Forum | Gli ultimi tutorial di sviluppo web
 

Google Charts Tutorial



Google Charts è un puro biblioteca grafici basato su JavaScript lo scopo di migliorare le applicazioni web con l'aggiunta di funzionalità di creazione di grafici interattivi. Google Charts offre un'ampia varietà di grafici. Ad esempio, i grafici a linee, grafici spline, grafici ad area, grafici a barre, grafici a torta e così via.

Questo tutorial vi insegnerà nozioni di base di Google Charts. Tutorial contiene capitoli che parlano di tutti i componenti di base di Google Charts con esempi adatti.


Pubblico

Questo tutorial è stato progettato per i professionisti del software che sono disposti a imparare Google Charts in pochi semplici passaggi. Questo tutorial vi darà grande comprensione su Google Charts concetti e dopo aver completato questo tutorial vi sarà a livello intermedio di experties da dove si può prendere da soli a più alto livello di competenza.


Prerequisiti

Prima di procedere con questo tutorial si dovrebbe avere una conoscenza di base di JavaScript, HTML, CSS e qualsiasi editor di testo.


Prova Google Charts online

Per la maggior parte degli esempi forniti in questo tutorial troverete Provalo opzione, quindi basta fare uso di questa opzione per eseguire i programmi sul posto e godetevi il vostro apprendimento.

Provare seguente esempio usando Provalo opzione disponibile nell'angolo in alto a destra della casella di codice di esempio qui sotto -

<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('string', 'Browser');
   data.addColumn('number', 'Percentage');
   data.addRows([
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
	  ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7]
   ]);
   
   // Set chart options
   var options = {'title':'Browser market shares at a specific website, 2014',
      'width':550,
      'height':400};

   // Instantiate and draw the chart.
   var chart = new google.visualization.PieChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>