Visualizzazione: grafico Movimento

  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. Note

Panoramica

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

Nota per gli sviluppatori. A causa delle impostazioni di sicurezza di Flash, questa (e tutte le visualizzazioni basate su Flash) potrebbero non funzionare correttamente se si accede da una posizione del file nel browser (ad es. file:///c:/webhost/myhost/myviz.html) anziché da un URL del server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta di un problema solo 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

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 esempio "Mele", "Arance", "Banane" nell'esempio sopra.
  • La seconda colonna deve contenere i valori temporali. L'orario può essere espresso in uno dei seguenti formati:
    • Anno. Tipo di colonna: "numero". Esempio: 2008.
    • Mese, giorno e anno - Tipo di colonna: "data"; i valori devono essere istanze JavaScript Date.
    • Numero settimana: tipo di colonna: "stringa". I valori devono utilizzare il pattern AAAAWww, che è conforme alla norma ISO 8601. Esempio: "2008W03".
    • Quarter - Tipo di colonna: "stringa"; i valori devono avere il pattern AAAAQq, conforme alla norma ISO 8601. Esempio: "T3 2008".
  • Le colonne successive possono essere di tipo "numero" o "stringa". Le colonne numeriche verranno visualizzate nei menu a discesa per gli assi X, Y, Colore e Dimensione. Le colonne della stringa vengono visualizzate solo nel menu a discesa Colore. Vedi l'esempio sopra.

Impostare lo stato iniziale

Puoi specificare che il grafico Movimento inizi con uno stato specifico, ovvero un insieme di entità selezionate e personalizzazioni delle viste. A questo scopo, devi prima creare e visualizzare il grafico, poi apportare le modifiche di stato che vuoi che il grafico mostri (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 utilizzare il codice di stato.

  1. Apri un grafico di lavoro e definisci le impostazioni che vuoi acquisire. Le impostazioni che puoi specificare includono livelli di opacità, zoom e log rispetto al ridimensionamento 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 Avanzate all'insieme.
  4. Espandi il riquadro Avanzate e copia i contenuti della casella di testo Stato negli appunti. Nota: anziché utilizzare il menu, descritto nei passaggi 2-4, puoi inserire un pulsante nella pagina che chiama getState() e visualizzare lo stato corrente in una casella di messaggio.
  5. Assegna la stringa di stato che hai copiato nel passaggio precedente al parametro "state" delle opzioni nel codice, come mostrato qui. Quando viene 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 Predefinito Descrizione
height number 300 Altezza del grafico in pixel.
width number 500 Larghezza del grafico in pixel.
state string none Uno stato di visualizzazione iniziale per il grafico. Questo è un oggetto JSON serializzato che descrive il livello di zoom, le dimensioni selezionate, le bolle/le entità selezionate e altre descrizioni degli stati. Consulta la sezione Impostazione dello stato iniziale per scoprire come impostarlo.
showChartButtons boolean true false nasconde i pulsanti che controllano il tipo di grafico (bolle / righe / colonne) nell'angolo in alto a destra.
showHeader boolean true false nasconde l'etichetta del titolo delle entità (derivata dall'etichetta della prima colonna nella tabella dati).
showSelectListComponente boolean true false nasconde l'elenco delle entità visibili.
pannello laterale boolean true false nasconde il riquadro a destra.
pulsante Selettore metricaX boolean true false nasconde il selettore delle metriche per x.
pulsante Selettore metrica boolean true false nasconde il selettore delle metriche per y.
selettoreXXXX boolean true false nasconde il selettore della scala per x.
pulsante Selettore Y boolean true false nasconde il selettore della scala per y.
mostraPannello avanzato boolean true false disattiva il compartimento delle opzioni nel riquadro delle impostazioni.

Metodi

Metodo Tipo restituito Descrizione
draw(data, options) Nessuno Disegna il grafico con le opzioni fornite.
getState() string Restituisce lo stato corrente del grafico Movimento, serializzato in una stringa JSON. Per assegnare questo stato al grafico, assegna questa stringa all'opzione state nel metodo draw(). Questo viene spesso utilizzato per specificare uno stato del grafico personalizzato 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 ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo di disegno e chiamarli solo dopo che l'evento è stato attivato. Nessuno
cambio di stato L'utente ha interagito in qualche modo con il grafico. Chiama il numero getState() per conoscere lo stato corrente del grafico. Nessuno

Norme sui dati

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

Note

A causa delle impostazioni di sicurezza di Flash, questa (e tutte le visualizzazioni basate su Flash) potrebbero non funzionare correttamente quando viene eseguito l'accesso da una posizione del file nel browser (ad esempio file:///c:/webhost/myhost/myviz.html) anziché da un URL del server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta di un problema solo di test. Puoi risolvere il problema come descritto sul sito web di Macromedia.