Python Dash crea grafici | Linuxiano.it
Privacy Policy

Python Dash crea grafici

Con dash e grazie a Ploty possiamo creare grafici in un interfaccia Web

Plotly , è una società di informatica tecnica con sede a Montreal, in Québec, che sviluppa strumenti di analisi e visualizzazione di dati online

Plotly fornisce strumenti grafici, analitici e statistici online per individui e collaborazioni, oltre a librerie grafiche scientifiche per Python, R, MATLAB, Perl, Julia, Arduino e REST.

Prodotti

I prodotti principali di Plotly includono:

  • Dash è un framework Python open source per la creazione di applicazioni analitiche basate sul web.
  • Dash DAQ è un pacchetto non open source per la creazione di GUI di acquisizione dati da utilizzare con strumenti scientifici. È costruito su Dash.
  • Chart Studio ha un’interfaccia utente grafica per l’importazione e l’analisi dei dati in una griglia e l’utilizzo di strumenti di statistiche. I grafici possono essere incorporati o scaricati. Utilizzato principalmente per rendere la creazione di grafici più veloce ed efficiente.
  • Librerie API per Python, R, MATLAB, Node.js, Julia, e Arduino e un’API REST. Plotly può anche essere usato per disegnare grafici interattivi con il taccuino Jupyter.
    Convertitori di figure che convertono i grafici matplotlib, ggplot2, e IGOR Pro in grafici interattivi online.
  • App plotly per Google Chrome.
  • Plotly.js è una libreria JavaScript open source per la creazione di grafici e dashboard.
  • Plotly Enterprise un’installazione locale di Plotly.

Passiamo alla creazione dei grafici.

Ora per creare un grafico dobbiamo sapere scrivere in Python oppure possiamo copiare e incollare i codici che troviamo sul Web.
Ma copiare e incollare che scopo ha? A mio parere nessuno, se vogliamo creare un grafico dobbiamo impostare noi i parametri.

Installazione

Disponibile per tutte le distribuzioni Linux, per installare apriamo un terminale (CTRL+ALT+T) e copiamo i seguenti comandi:

Io ho installato uno di questi due comandi, il primo, e uno di dei quattro nella seconza sezione terminale.

Terminale
  • sudo pip install dash dash-renderer dash-html-components dash-core-components plotly

oppure

  • sudo -H pip install dash dash-renderer dash-html-components dash-core-components plotly

Con l’aggiunta della -H non emetterebbe un avviso perché verrai indirizzato alla variabile Home. Anche se non la usi,  ok in quanto mostrerebbe un avvertimento, in ogni caso Dash verrebbe comunque installato.

Creare Grafici esempi pratici

Ora, andremo a creare uno script python. Il nostro primo esempio di codice mostra semplicemente un output semplice nel nostro browser web sull’indirizzo e sulla porta del server menzionati sopra. Nell’esempio, le prime 3 righe sarebbero le importazioni di dash, dash-core-components e dash-html-components. Dash-core-components come dcc significa che ovunque vogliamo usare i componenti dash-core possiamo usare ‘dcc’ invece e allo stesso modo dove vogliamo usare dash-html-componenti, possiamo usare ‘html’. Dash () è la classe integrata che contiene il codice predefinito per le applicazioni Dash. ‘app.layout’ rappresenta tutto nell’interfaccia utente Web che significa tutto ciò che desideriamo visualizzare nel browser nell’applicazione Dash, deve essere scritto nell’area operativa di ‘app.layout’. Seguendo il nostro primo esempio di codice semplice che mostra solo un semplice output.

Primo esempio

import dash

import dash_core_components as dcc

import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(‘Saluti da Linuxiano’)

if __name__ == ‘__main__’:
app.run_server(debug=True)

Copia e incolla il testo sopra in un editor di testo (nel mio caso “gedit”) e salvalo come “app.py”.

python-dash-crea-grafici

Per vedere il risultato sul Web aprite un terminale (CTRL+ALT+T)  e copiate i seguenti comandi:

Terminale
  • python app.py

python-dash-crea-grafici

Una volta premuto invio potrete vedere sul web il risultato semplicemente aprendo un browser con url http://127.0.0.1:8050/ oppure http://localhost:8050

Risultato

python-dash-crea-grafici

Nelle schermate seguenti la procedura è la stessa di quanto spiegato sopra.

Secondo esempio

Il secondo esempio riguarda la creazione di un grafico. Useremmo ‘dcc’ che essenzialmente significa dash-core-components e creeremo un grafico che lo usa. Nel nostro esempio, abbiamo disegnato un grafico di esempio per Energia e Tempo con valori casuali di ‘x’ e ‘y’ dando un tipo di ‘linea’ a Energia e un tipo di ‘barra’ a Tempo. Faremmo tutto questo all’interno di un metodo dcc.Graph () in cui chiameremo i nostri due assi del grafico e imposteremo anche il titolo del grafico:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
html.Div(children=’LinuxHint Youtube Hi’),
dcc.Graph(
id=’graphss’,
figure={
‘data’: [
{‘x’:[1,2,3,4,5,6,7], ‘y’:[11,12,22,23,24,44,55], ‘type’:’line’, ‘name’:’Energy’},
{‘x’:[1,2,3,4,5,6,7], ‘y’:[13,15,26,27,34,44,65], ‘type’:’bar’, ‘name’:’Time’},
],
‘layout’: {
‘title’: ‘Graph for Time and Energy’
}
}
)
])

if __name__ == ‘__main__’:
app.run_server(debug=True)

python-dash-crea-grafici

 

Terzo esempio

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
html.H1(children=’Hello Dash’),

html.Div(children=”’
Dash: A web application framework for Python.
”’),

dcc.Graph(
id=’example-graph’,
figure={
‘data’: [
{‘x’: [1, 2, 3], ‘y’: [4, 1, 2], ‘type’: ‘bar’, ‘name’: ‘SF’},
{‘x’: [1, 2, 3], ‘y’: [2, 4, 5], ‘type’: ‘bar’, ‘name’: u’Montréal’},
],
‘layout’: {
‘title’: ‘Dash Data Visualization’
}
}
)
])

if __name__ == ‘__main__’:
app.run_server(debug=True)

python-dash-crea-grafici

  1. Il layout è composto da un albero di “componenti” come html.Div e dcc.Graph.
  2. La libreria dash_html_components ha un componente per ogni tag HTML. Il componente html.H1 (children = ‘Hello Dash’) genera un elemento HTML <h1> Hello Dash </ h1> nell’applicazione.
  3. Non tutti i componenti sono HTML puro. I dash_core_components descrivono componenti di livello superiore che sono interattivi e vengono generati con JavaScript, HTML e CSS tramite la libreria React.js.
  4. Ogni componente è descritto interamente attraverso gli attributi delle parole chiave. Dash è dichiarativo: descrivi principalmente la tua applicazione attraverso questi attributi.
  5. La proprietà dei bambini è speciale. Per convenzione, è sempre il primo attributo che significa che è possibile ometterlo: html.H1 (children = ‘Hello Dash’) è lo stesso di html.H1 (‘Hello Dash’). Inoltre, può contenere una stringa, un numero, un singolo componente o un elenco di componenti.
  6. I caratteri nella tua applicazione appariranno leggermente diversi da quelli visualizzati qui. Questa applicazione utilizza un foglio di stile CSS personalizzato per modificare gli stili predefiniti degli elementi. Puoi imparare di più nel tutorial css, ma per ora puoi inizializzare la tua app con

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

per ottenere lo stesso aspetto di questi esempi.

Grazie! per l’utilizzo della Guida di Linuxiano.

Trovi questo tutorial utile? Condividi con i tuoi amici per tenerlo in vita.
Sii il primo a commentare, apprezzo i tuoi suggerimenti. Per ulteriori domande potete commentare qui sotto.