Forum | tutorial pengembangan web terbaru
 

Charts Tutorial Google



Charts Google adalah murni perpustakaan charting berdasarkan JavaScript dimaksudkan untuk meningkatkan aplikasi web dengan menambahkan kemampuan charting interaktif. Charts Google menyediakan berbagai macam grafik. Misalnya, line chart, grafik spline, diagram daerah, bar chart, diagram lingkaran dan sebagainya.

Tutorial ini akan mengajarkan Anda dasar-dasar Charts Google. Tutorial berisi bab-bab membahas semua komponen dasar Charts Google dengan contoh-contoh yang sesuai.


Hadirin

Tutorial ini dirancang untuk Software Profesional yang bersedia untuk belajar Charts Google dalam langkah-langkah sederhana dan mudah. Tutorial ini akan memberikan Anda pemahaman yang besar pada konsep Charts Google dan setelah menyelesaikan tutorial ini Anda akan berada pada tingkat menengah experties dari mana Anda dapat mengambil sendiri di tingkat yang lebih tinggi keahlian.


Prasyarat

Sebelum melanjutkan dengan tutorial ini Anda harus memiliki pemahaman dasar JavaScript, html, css dan editor teks.


Coba Charts Online Google

Untuk sebagian besar dari contoh yang diberikan dalam tutorial ini Anda akan menemukan Cobalah pilihan, jadi hanya menggunakan opsi ini untuk menjalankan program Anda di tempat dan menikmati belajar Anda.

Coba contoh berikut menggunakan Cobalah opsi yang tersedia di pojok kanan atas kotak kode contoh di bawah ini -

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