Visualizzazione: grafico animato

  1. Panoramica
  2. Esempio
  3. Caricamento in corso…
  4. Impostazione dello stato iniziale
  5. Formato dei dati
  6. Opzioni di configurazione
  7. Metodi
  8. Eventi
  9. Norme sui dati
  10. Notes

Panoramica

Un grafico dinamico per esplorare diversi indicatori nel tempo. Il grafico viene visualizzato all'interno del browser utilizzando Flash.

Nota per gli sviluppatori: a causa delle impostazioni di sicurezza di Flash, questa visualizzazione (e tutte le visualizzazioni basate su Flash) potrebbe non funzionare correttamente se vi si accede dalla posizione di un file nel browser (ad es. file:///c:/webhost/myhost/myviz.html) anziché dall'URL di un server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta soltanto di un problema di test. Puoi risolvere il problema come descritto sul sito web di Adobe.

Esempio

Tieni presente che il seguente codice non funziona se viene caricato come file locale, ma deve essere caricato da un server web.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Caricamento in corso...

Il nome del pacchetto google.charts.load è "motionchart".

  google.charts.load('current', {'packages': ['motionchart']});

Il nome della classe della visualizzazione è google.visualization.MotionChart.

  var visualization = new google.visualization.MotionChart(container);

Formato dei dati

  • La prima colonna deve essere di tipo "stringa" e contenere i nomi delle entità (ad es. "Mele", "Arance", "Banane" nell'esempio riportato sopra).
  • La seconda colonna deve contenere valori temporali. Il tempo può essere espresso in uno dei seguenti formati:
    • Anno: tipo di colonna: "numero". Esempio: 2008.
    • Mese, giorno e anno: tipo di colonna: 'date'; i valori devono essere istanze di JavaScript Date.
    • Numero settimana: tipo di colonna: "stringa". I valori devono utilizzare il pattern AAAAWww, conforme allo standard ISO 8601. Esempio: "2008W03".
    • Trimestre: tipo di colonna: "stringa". I valori devono avere il pattern AAAAQq, conforme allo standard ISO 8601. Esempio: "2008Q3".
  • Le colonne successive possono essere di tipo "number" o "string". Le colonne numeriche verranno visualizzate nei menu a discesa per gli assi X, Y, Colore e Dimensione. Le colonne delle stringhe verranno visualizzate solo nel menu a discesa per Colore. Vedi l'esempio riportato sopra.

Impostazione dello stato iniziale

Puoi specificare che il grafico animato inizi con uno stato specifico, ovvero un insieme di entità selezionate e visualizzare le personalizzazioni. Per farlo, devi prima creare e visualizzare il grafico, quindi apportare le modifiche allo stato da visualizzare (selezionare valori, modificare le impostazioni e così via), quindi esportare queste impostazioni come stringa e infine utilizzare questa stringa nel codice, assegnandola all'opzione "stato". Le due sezioni successive descrivono come esportare e quindi utilizzare il codice di stato.

  1. Apri un grafico funzionante e definisci le impostazioni da acquisire. Le impostazioni che puoi specificare includono livelli di opacità, zoom e ridimensionamento del log rispetto a quello lineare.
  2. Apri il riquadro Impostazioni facendo clic sul simbolo della chiave inglese nell'angolo in basso a destra del grafico.
  3. Fai clic sul link Avanzate nell'angolo in basso a sinistra per aggiungere il riquadro Avanzato al set.
  4. Espandi il riquadro Avanzate e copia negli appunti il contenuto della casella di testo Stato. Nota: invece di utilizzare il menu descritto nei passaggi da 2 a 4, puoi inserire nella pagina un pulsante che chiami getState() e visualizzi lo stato corrente in una casella di messaggio.
  5. Assegna la stringa di stato che hai copiato nel passaggio precedente al parametro delle opzioni "state" nel codice, come mostrato qui. Una volta passato al metodo draw(), il grafico verrà inizializzato nello stato specificato all'avvio.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Opzioni di configurazione

Nome Tipo Predefinita Descrizione
altezza numero 300 Altezza del grafico in pixel.
larghezza numero 500 Larghezza del grafico in pixel.
state stringa none Uno stato di visualizzazione iniziale del grafico. Si tratta di un oggetto JSON serializzato che descrive il livello di zoom, le dimensioni selezionate, le bolle/le entità selezionate e altre descrizioni degli stati. Per scoprire come impostarlo, consulta la sezione Impostazione dello stato iniziale.
showChartButtons boolean true false nasconde i pulsanti che controllano il tipo di grafico (bolle / linee / colonne) nell'angolo in alto a destra.
showHeader boolean true false nasconde l'etichetta del titolo delle entità (deriva dall'etichetta della prima colonna nella tabella di dati).
showSelectListComponent boolean true false nasconde l'elenco delle entità visibili.
showSidePanel boolean true false nasconde il riquadro a destra.
showXMetricPicker boolean true false nasconde il selettore delle metriche per x.
showYMetricPicker boolean true false nasconde il selettore delle metriche per y.
showXScalePicker boolean true false nasconde il selettore della scala per x.
showYScalePicker boolean true false nasconde il selettore della scala per y.
showAdvancedPanel boolean true false disattiva la sezione opzioni nel riquadro delle impostazioni.

Metodi

Metodo Tipo restituito Descrizione
draw(data, options) Nessuno Disegna il grafico con le opzioni fornite.
getState() stringa Restituisce lo state corrente del grafico di movimento, serializzato in una stringa JSON. Per assegnare questo stato al grafico, assegna questa stringa all'opzione state nel metodo draw(). Questa opzione viene spesso utilizzata per specificare uno stato personalizzato del grafico all'avvio, anziché utilizzare lo stato predefinito.

Eventi

Nome Descrizione Proprietà
error Attivato quando si verifica un errore durante il tentativo di rendering del grafico. id, messaggio
pronta Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo di disegno e richiamarli solo dopo che l'evento è stato attivato. Nessun valore
cambiamento di stato L'utente ha interagito in qualche modo con il grafico. Chiama getState() per conoscere lo stato attuale del grafico. Nessun valore

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.

Note

A causa delle impostazioni di sicurezza di Flash, questa visualizzazione (e tutte le visualizzazioni basate su Flash) potrebbe non funzionare correttamente se vi si accede dalla posizione di un file nel browser (ad es. file:///c:/webhost/myhost/myviz.html) anziché dall'URL di un server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta solo di un problema di test. Puoi risolvere questo problema come descritto sul sito web di Macromedia.