Grafici di Google

Dalla semplice linea al complesso grafico a albero gerarchico, la libreria di grafici Google offre una vasta gamma di tipi di grafici disponibili in tempo reale:

  • Chart a Punti (Scatter Chart)
  • Chart a Linee (Line Chart)
  • Chart a Barre/Column (Bar / Column Chart)
  • Chart a Superficie (Area Chart)
  • Chart a Piatti (Pie Chart)
  • Chart a Torta (Donut Chart)
  • Chart Organizzativo (Org Chart)
  • Mappa/Chart Geografico (Map / Geo Chart)

Come utilizzare Google Chart?

Se desideri utilizzare Google Chart nel tuo sito web, dovrestiAggiungere un link al caricatore del grafico:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

Google Charts è facile da usare.

Basta aggiungere un <div> L'elemento può visualizzare il grafico:

<div id="myChart" style="max-width:700px; height:400px"></div>

L'elemento <div> deve avere un ID unico.

Poi caricare l'API di Google Graph:

  1. Caricare l'API di Visualization e il pacchetto corechart
  2. Impostare una funzione di callback, che viene chiamata dopo il completamento del caricamento dell'API
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

Ecco fatto!}

Grafico a linee

Codice sorgente

function drawChart() {
// Imposta i dati
var data = google.visualization.arrayToDataTable([
  ['Prezzo', 'Dimensione'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// Imposta le opzioni
var options = {
  title: 'Prezzo dell'immobile e superficie'},
  hAxis: {title: 'Metri quadrati'},
  vAxis: {title: 'Prezzo in milioni'},
  legend: 'none'
};
// Disegna il grafico
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Prova tu stesso

Grafico a dispersione

stessi dati per generareGrafico a dispersione, sostituisci google.visualization cambia in ScatterChart:

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

Prova tu stesso

Grafico a barre

Codice sorgente

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italia', 55],
  ['Francia', 49],
  ['Spagna', 44],
  ['Stati Uniti', 24],
  
]
var options = {
  title: 'Produzione mondiale di vino'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

Prova tu stesso

Grafico a torta

Per trasformare il grafico a barre inGrafico a tortacon:

google.visualization.PieChart

Sostituisci:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

Prova tu stesso

Grafico a torta 3D

Per visualizzare il grafico a torta in 3D, è sufficiente is3D: true aggiungi alle opzioni: }}

var options = {
  title: 'Produzione mondiale di vino',
  is3D: true
};

Prova tu stesso