Strumenti grafici - Creiamo una gauge con Python

Post Views: 609

Oggi impariamo a creare uno strumento di misura con una grafica dinamica, che si visualizzi all’interno del browser. O magari di una pagina.

Chi si diletta nella rappresentazione dei dati, siano essi provenienti da un centro dati, da apparecchiature IoT o da un sistema di monitoraggio esterno, avrà sicuramente sofferto la mancanza di strumenti ad hoc per interagire sul web. Il miniprogramma Python di oggi mostra come sia semplice creare tali strumenti, semplicemente attingendo a librerie già pronte.

Nel caso parrticolare, il programma creerà una gauge, con livelli di guardia preimpostati (ma pur sempre dinamici). Ovviamente tutte le opzioni sono personalizzabili…

Il programma

import plotly.graph_objects as go

figura = go.Figure(go.Indicator(
    mode  = "gauge+number",
    value = 65,
    title = {'text': "Speed"},
    gauge = {'axis': {'range': [0,100]},
             'bar': {'color': "darkblue"},
             'steps': [{'range': [ 0,  50], 'color': "lightgray"},
                       {'range': [50, 100], 'color': "gray"}],
             'threshold': {'line': {'color': "red", 'width': 4},
                           'thickness': 0.75, 'value': 80}}))

figura.show()

import plotly.graph_objects as go

figura = go.Figure(go.Indicator(

mode = "gauge+number",

value = 65,

title = {'text': "Speed"},

gauge = {'axis': {'range': [0,100]},

'bar': {'color': "darkblue"},

'steps': [{'range': [ 0, 50], 'color': "lightgray"},

{'range': [50, 100], 'color': "gray"}],

'threshold': {'line': {'color': "red", 'width': 4},

'thickness': 0.75, 'value': 80}}))

figura.show()

Importiamo la libreria plotly. Se la vastità delle opzioni della libreria vi intimidisce, sappiate che questi moduli vanno “aswsaporati” un po’ alla volta, metodo dopo metodo. Senza fretta.

Creiamo dunque un oggetto figura. Occorre ora definirne le proprietà.

I più industriosi tra chi legge avranno sicuramente riconsociuto la struttura che consente di “caricare” i valori da rappresentare: leggiamoli assieme.

mode – rappresenta la tipologia del grafico. Nel caso specifico, gauge con valore, quindi presentazione grafica + numerica.
value – è il valore che deve essere rappresentato. Questo valore può essere acquisito da uno strumento di misura, un sensore, una funzione e così via.
title – è l’etichetta del grafico
gauge – inizia qui la descrizione dei parametri di presentazione dello strumento.
- axis – definisce il range relativo al valore presentato. Nell’esempio, tra 0 e 100.
- bar – il colore della barra (semicerchio) che rappresenta graficamente il valore (darkblue).
- steps – nell’esempio è diviso in due parti: grigio chiaro (sino al 50%) e grigio scuro (dal 50% al 100%).
- threshold – a che valore devo mettere la soglia di allarme? nel nostro caso la soglia è raprpesentata da una linea rossa, larga 4 pixel, spessa 0.75 e posta sul valore 80.

Abbiamo terminato. Tutto ciò che resta da fare ora è mosrtrare la figura, chiamando il metodo .show().

Facile no?

Ora provate a replicare questo…

Iscriviti ai nostri gruppi Telegram

Link utili

Seguici per non perdere le prossime novità!

Luigi_Morelli

Definire ciò che si è non risulta mai semplice o intuitivo, in specie quando nella vita si cerca costantemente di migliorarsi, di crescere tanto professionalmente quanto emotivamente. Lavoro per contribuire al mutamento dei settori cardine della computer science e per offrire sintesi ragionate e consulenza ad aziende e pubblicazioni ICT, ma anche perche’ ciò che riesco a portare a termine mi dà soddisfazione, piacere. Così come mi piace suonare (sax, tastiere, chitarra), cantare, scrivere (ho pubblicato 350 articoli scientfici e 3 libri sinora, ma non ho concluso ciò che ho da dire), leggere, Adoro la matematica, la logica, la filosofia, la scienza e la tecnologia, ed inseguo quel concetto di homo novus rinascimentale, cercando di completare quelle sezioni della mia vita che ancora appaiono poco ricche.