Menggambar Grafik dengan JavaScript pada File HTML

Sahid
Departemen Pendidikan Matematika, Universitas Negeri Yogyakarta
sahid@uny.ac.id, sahidyk@gmail.com

Kanvas HTML

Kanvas HTML memberikan cara yang sempurna untuk menggambar grafik/diagram pencar (titik), grafik garis, dan kombinasinya.

Diagram Pencar (Titik) dengan Kanvas


xxxxxxxxxx
<canvas id="kanvas1" width="400" height="400" style="border:1px solid grey"></canvas>
<script>
const canvas = document.getElementById("kanvas1");
const ctx = canvas.getContext("2d");
canvas.height = canvas.width;
ctx.transform(1, 0, 0, -1, 0, canvas.height)
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
  let x = xArray[i]*400/150;
  let y = yArray[i]*400/15;
  ctx.beginPath();
  ctx.ellipse(x, y, 3, 3, 0, 0, Math.PI * 2);
  ctx.fill();
}
</script>

Diagram Garis dengan Kanvas


xxxxxxxxxx
<canvas id="kanvas2" width="400" height="400" style="border:1px solid grey"></canvas>
<script>
const canvas1 = document.getElementById("kanvas2");
const ctx1 = canvas1.getContext("2d");
ctx1.fillStyle = "#FF0000";
canvas1.height = canvas1.width;
ctx1.transform(1, 0, 0, -1, 0, canvas1.height)
let xMax = canvas1.height;
let slope = 1.2;
let intercept = 70;
ctx1.moveTo(0, intercept);
ctx1.lineTo(xMax, f(xMax));
ctx1.strokeStyle = "black";
ctx1.stroke();
function f(x) {
  return x * slope + intercept;
}
</script>

Kanvas Gabungan untuk Diagram Pencar dan Grafik Garis


xxxxxxxxxx
<canvas id="kanvas3" width="400" height="400" style="border:1px solid grey"></canvas>
<script>
const canvas2 = document.getElementById("kanvas3");
const ctx2 = canvas2.getContext("2d");
ctx2.fillStyle = "#FF0000";
canvas2.height = canvas2.width;
ctx2.transform(1, 0, 0, -1, 0, canvas2.height)
let xMax2 = canvas2.height;
let yMax2 = canvas2.width;
let slope2 = 1.2;
let intercept2 = 70;
const xArray2 = [50,60,70,80,90,100,110,120,130,140,150];
const yArray2 = [7,8,8,9,9,9,10,11,14,14,15];
// Diagram pencar
ctx2.fillStyle = "red";
for (let i = 0; i < xArray2.length-1; i++) {
  let x2 = xArray2[i]*xMax2/150;
  let y2 = yArray2[i]*yMax2/15;
  ctx2.beginPath();
  ctx2.ellipse(x2, y2, 3, 3, 0, 0, Math.PI * 2);
  ctx2.fill();
}
// Grafik garis
ctx2.moveTo(0, intercept2);
ctx2.lineTo(xMax2, f(xMax2));
ctx2.strokeStyle = "black";
ctx2.stroke();
// Fungsi linier
function f(x) {
  return x * slope2 + intercept2;
}
</script>

Pustaka Grafik pada JavaScript

Selain menggunakan kanvas, untuk menggambar grafik menggunakan JavaScript pada file HTML sudah tersedia beberapa pustaka siap pakai yang memudahkan pengembang menghasilkan gambar. Di antara pustaka grafik untuk JavaScript yang teredia secara gratis adalah:

Plotly.js,
Chart.js, dan
Google Chart.

`Plotly.js`

Plotly.js adalah pustaka JavaScript yang menyediakann lebih dari 40 jenis diagram, termasuk grafik 2D, grafik 3D, grafik statistik, dan peta SVG.

`Chart.js`

Pustaka Chart.js menyediakan banyak diagram, di antaranya:

diagram titik (Scatter plot),
diagram garis,
diagram batang,
diagram Radar,
diagram dingkaran dan donat,
diagram (bidang) kutub (polar), dan
diagram gelembung.

`Google Charts`

Google Charts menyediakan sejumlah jenis diagram, mulai dari diagram garis sederhana sampai peta pohon yang rumit:

diagram titik (scatter plot),
diagram garis,
diagram batang/kolom,
diagram luasan,
diagram lingkaran,
diagram donat,
diagram organisasi
diagram peta/geografis

Menggambar Grafik dan Diagram dengan Pustaka `Plotly.js`

Berikut adalah beberapa contoh diagram yang dapat dibuat dengan menggunakan pustaka JavaScript Plotly.js. Untuk memanggil pustaka tersebut, pada dokumen HTML dituliskan perintah:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>.

Perintah tersebut dapat ditulis di bagian awal dokumen (misalnya setelah tag <body>).

Contoh 1: Diagram Titik (Pencar)


xxxxxxxxxx
<div id="diagpencar" style="width:100%;max-width:700px"></div>
<script>
var xArray3 = [50,60,70,80,90,100,110,120,130,140,150];  
var yArray3 = [7,8,8,9,9,9,10,11,14,14,15];
var data = [{ x: xArray3, y: yArray3, mode:"markers", type:"scatter"}];
var layout = {  
  xaxis: {range: [40, 160], title: "Square Meters"},  
  yaxis: {range: [5, 16], title: "Price in Millions"},  
  title: "House Prices vs. Size"  
};
Plotly.newPlot("diagpencar", data, layout);

Diagram Garis


xxxxxxxxxx
<div id="diagaris" style="width:100%;max-width:700px"></div>
<script>
var xArray4 = [50,60,70,80,90,100,110,120,130,140,150];  
var yArray4 = [7,8,8,9,9,9,10,11,14,14,15];  
var data = [{x4: xArray4, y: yArray4, mode: "lines",type: "scatter"}];
var layout = {  
  xaxis: {range: [40, 160], title: "Luas (Meter Persegi)"},
  yaxis: {range: [5, 16], title: "Harga (dalam Puluhan Juta Rupiah)"},  
  title: "Harga rumah menurut ukuran"
};
Plotly.newPlot("diagaris", data, layout);
</script>

Grafik Persamaan Linier

Berikut adalah contoh menggambar grafik persamaan linier $y = 2x +7$ dengan menggunakan Plotly.


xxxxxxxxxx
<div id="graflin" style="width:100%;max-width:700px"></div>
<script>
var persamaan = "2*x + 7"; 
var xValues = []; 
var yValues = []; 
for (var x = 0; x <= 10; x += 1) {yValues.push(eval(persamaan)); 
xValues.push(x); } 
var data = [{x: xValues, y: yValues, mode: "lines"}]; 
var layout = {title: "y = " + persamaan}; 
Plotly.newPlot("graflin", data, layout);
</script>

Menggambar Beberapa Persamaan Linier

$y=x,\quad y=-1.5x+5,\quad y=2x - 7 $


xxxxxxxxxx
<div id="multiline" style="width:100%;max-width:700px"></div>
<script>
var p1 = "x";
var p2 = "-1.5*x+5";
var p3 = "2*x - 7";
// Menghitung nilai-nilai x dan y
var x1Values = [];var x2Values = [];var x3Values = [];
var y1Values = [];var y2Values = [];var y3Values = [];
for (var x = 0; x <= 10; x += 1) {
  x1Values.push(x);  x2Values.push(x);  x3Values.push(x);
  y1Values.push(eval(p1));  y2Values.push(eval(p2)); y3Values.push(eval(p3));
}
// Data
var data = [
  {x: x1Values, y: y1Values, mode:"lines"},
  {x: x2Values, y: y2Values, mode:"lines"},
  {x: x3Values, y: y3Values, mode:"lines"}
];
//Layout
var layout = {title: "[y=" + p1 + "]  [y=" + p2 + "]  [y=" + p3 + "]"};
// Tampilkan ketiga grafik dengan Plotly
Plotly.newPlot("multiline", data, layout);
</script>

Diagram Batang

Diagram Batang Tegak


xxxxxxxxxx
<div id="bardiag" style="width:100%;max-width:700px"></div>
<script>
var xArray5 = ["Italy","France","Spain","USA","Argentina""Italia", "Perancis", "Spanyol", "USA", "Argentina"]; 
var yArray5 = [55, 49, 44, 24, 15];
var data = [{x: xArray5,y: yArray5,type: "bar"  }]; 
var layout = {title:"Produksi Anggur Dunia"};
Plotly.newPlot("bardiag", data, layout);
</script>

Diagram Batang Miring


xxxxxxxxxx
<div id="bardiag1" style="width:100%;max-width:700px"></div>
<script>
var yArray6 = ["Italia", "Perancis", "Spanyol", "USA", "Argentina"];
var xArray6 = [55, 49, 44, 24, 15];
var data = [{ x:xArray6,  y:yArray6,  type:"bar"}];
var layout = {title:"Produksi Anggur Dunia"};
Plotly.newPlot("bardiag1", data, layout);
</script>

Diagram Lingkaran dan Donat

Untuk menampilkan diagram lingkaran, pada definisi data gunakan properti labels untuk mengganti x dan values untuk mengganti y dan type bernilai "pie". Untuk membuat diagram donat, tambahkan properti hole dengan nilai bilangan pecahan antara 0 dan 1.


xxxxxxxxxx
<div id="diaglingkar" style="width:90%;max-width:600px"></div>
<script>
var xArray7 = ["Italia", "Perancis", "Spanyol", "USA", "Argentina"];
var yArray7 = [55, 49, 44, 24, 15];
var data = [{labels: xArray7, values: yArray7, type: "pie"}]; 
var layout = {title:"Produksi Anggur Dunia"};
Plotly.newPlot("diaglingkar", data, layout);
</script>


xxxxxxxxxx
<div id="diagdonat" style="width:100%;max-width:700px"></div>
<script>
var xArray8 = ["Italia", "Perancis", "Spanyol", "USA", "Argentina"];
var yArray8 = [55, 49, 44, 24, 15];
var data = [{labels: xArray8, values: yArray8, hole: .4, type: "pie"}]; 
var layout = {title:"Produksi Anggur Dunia"};
Plotly.newPlot("diagdonat", data, layout);
</script>

Kurva Persamaan


xxxxxxxxxx
<div id="kurva1" style="width:100%;max-width:700px"></div>
<script>
var persin = "Math.sin(x)";
// Nilai-nilai x dan y
var xValues = []; var yValues = [];
for (var x = 0; x <= 10; x += 0.1) {
  xValues.push(x);   yValues.push(eval(persin));
}
// Menampilkan kurva fungsi dengan Plotly
var data = [{x:xValues, y:yValues, mode:"lines"}];
var layout = {title: "y = sin(x)"};
Plotly.newPlot("kurva1", data, layout);
</script>


xxxxxxxxxx
<div id="kurvacos" style="width:100%;max-width:700px"></div>
<script>
var exp = "Math.cos(x)";
// Nilai-nilai x dan y
var xValues = [];
var yValues = [];
for (var x = 0; x <= 10; x += 0.2) {
  yValues.push(eval(exp));
  xValues.push(x);
}
// Menampilkan kurva fungsi dengan Plotly
var data = [{x:xValues, y:yValues, mode:"markers"}];
var layout = {title: "y = cos(x)"};
Plotly.newPlot("kurvacos", data, layout);
</script>

Menggambar Grafik dan Diagram dengan Pustaka `Chart.js`

Chart.js adalah pustaka JavaScript gratis untuk membuat diagram berbasis HTML. Ini adalah salah satu perpustakaan visualisasi paling sederhana untuk JavaScript, dan dilengkapi dengan tipe diagram bawaan berikut:

Diagram Tititk (Pencar)
Diagram Garis
Diagram batang
Diagram Lingkaran
Diagram Donat
Diagram Gelembung
Diagram Luasan
Diagram Radar
Diagram Campuran

Bagaimana Cara Menggunakan Chart.js? Cara menggunakan pustaka Chart.js sama dengan cara menggunakan pustaka Plotly.js, yakni dengan menambahkan link ke penyedia CDN (Content Delivery Network):


xxxxxxxxxx
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"> 
</script>

Apabila dokumen HTML juga perlu menggunakan MathJax, maka pemanggilan pustaka Chart.js harus dilakukan sebelum memanggil MathJax.

Selanjutnya, gunakan <canvas> di tempat untuk menampilkan diagram, dengan memberikan identitas (id) unik, misalnya:


xxxxxxxxxx
<canvas id="diagramku" style="width:100%;max-width:700px"></canvas>

Sintaks umum untuk menghasilkan diagram pencar (titik):


xxxxxxxxxx
var diagramku=new Chart("diagramku",{type:"scatter",data:{},options:{}});

Sintaks umum untuk menghasilkan gambar diagram garis:


xxxxxxxxxx
var diagramku=new Chart("diagramku",{type:"line",data:{},options:{}});

Sintaks umum untuk menggambar diagram batang:


xxxxxxxxxx
var diagramku=new Chart("diagramku",{type:"bar",data:{},options:{}});

Contoh Diagram Pencar dengan `Chart.js`


xxxxxxxxxx
<canvas id="diagpencar1" style="width:100%;max-width:700px"></canvas>
<script>
var xyValues = [{x:50, y:7},{x:60, y:8},{x:70, y:8},{x:80, y:9},
  {x:90, y:9},{x:100, y:9},{x:110, y:10},{x:120, y:11},{x:130, y:14},
  {x:140, y:14},{x:150, y:15}];
new Chart("diagpencar1", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgb(0,0,255)",
      data: xyValues
    }]
  },
  options: {
    legend: {display: false},
    scales: {
      xAxes: [{ticks: {min: 40, max:160}}],
      yAxes: [{ticks: {min: 6, max:16}}],
    }
  }
});
</script

Harga rumah (puluhan juta rupiah) vs ukuran rumah (meter persegi)

Contoh Diagram Garis dengan `Chart.js`

Jika digunakan properti borderColor: "rgba(0,0,0,0)", diagram garis menjadi diagram titik.

Contoh diagram multi kurva


xxxxxxxxxx
<canvas id="multikurva" style="width:100%;max-width:600px"></canvas>
<script>
var xValues2 = [100,200,300,400,500,600,700,800,900,1000];
new Chart("multikurva", {
  type: "line",
  data: {
    labels: xValues2,
    datasets: [{ 
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    }, { 
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    }, { 
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});
</script>

Contoh Grafik Linier dengan `Chart.js`


xxxxxxxxxx
<canvas id="diaglin1" style="width:100%;max-width:600px"></canvas>
<script>
var xValues = [];
var yValues = [];
generateData("2*x + 7", 0, 10, 0.5);
new Chart("diaglin1", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      fill: false,
      pointRadius: 1,
      borderColor: "rgba(255,0,0,0.5)",
      data: yValues
    }]
  },    
  options: {
    legend: {display: false},
    title: {
      display: true,
      text: "y = 2x + 7",
      fontSize: 16
    }
  }
});
function generateData(value, i1, i2, step = 1) {
  for (let x = i1; x <= i2; x += step) {
    yValues.push(eval(value));
    xValues.push(x);
  }
}
</script>

Menggambar Grafik Fungsi dengan `Chart.js`

Cara menggambar grafik fungsi sama dengan cara menggambar grafik linier, namun dengan mengubah paramter pada fungsi generateData(), misalnya:

generateData("Math.sin(x)", 0, 10, 0.5);

Diagram Batang dengan `Chart.js`


xxxxxxxxxx
<canvas id="diagbatang2" style="width:100%;max-width:600px"></canvas>
<script>
var xValues3 = ["Italia", "Perancis", "Spanyol", "USA", "Argentina"];
var yValues3 = [55, 49, 44, 24, 15];
var barColors = ["red", "green","blue","orange","brown"];
new Chart("diagbatang2", {
  type: "bar",
  data: {
    labels: xValues3,
    datasets: [{
      backgroundColor: barColors,
      data: yValues3
    }]
  },
  options: {legend: {display: false},
    title: {
      display: true,
      text: "Produksi Anggur Dunia Tahun 2018"
    }
  }
});
</script>

Diagram Batang Horisontal

Untuk membuat diagram datang horisontal, ganti kata "bar" menjadi "horizontalBar": type: "horizontalBar".

Diagram Lingkaran


xxxxxxxxxx
<canvas id="diaglin3" style="width:100%;max-width:600px"></canvas>
<script>
var xValues4 = ["Italia", "Perancis", "Spanyol", "USA", "Argentina"];
var yValues4 = [55, 49, 44, 24, 15];
var barColors = [
  "#b91d47",
  "#00aba9",
  "#2b5797",
  "#e8c3b9",
  "#1e7145"
];
new Chart("diaglin3", { 
  type: "pie", 
  data: { 
    labels: xValues4, 
    datasets: [{ 
      backgroundColor: barColors, 
      data: yValues4 
    }] 
  }, 
  options: { 
    title: { 
      display: true, 
      text: "Produksi Anggur Dunia 2018" 
    } 
  } 
});
</script>

Diagram Donut

Menggambar Grafik dan Diagram Menggunakan Google Chart

Google Chart menyediakan fasilitas untuk menggambar berbagai diagram/grafik, mulai dari grafik garis sederhana sampai peta pohon hirarkhis yang rumit: + diagram pencar, + grafik garis, + diagram batang/kolom, + diagram area, + diagram lingkaran, + diagram donut, + diagram organisasi, + diagram peta/geo.

Bagaimana Cara Menggunakan Google Chart?

Untuk menggunakan Google Chart di dalam file HTML (halaman Web), tambahkan tautan berikut ini guna memanggilnya. Ini harus dilakukan sebelum skrip untuk menggambar.


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

Anda hanya dapat memangil loader sekali (biasanya di bagian <head> </head> pada file HTML, tidak peduli berapa banyak diagram yang ingin Anda gambar. Setelah memuat loader, Anda dapat memanggil fungsi google.charts.load satu kali atau lebih untuk memuat paket untuk jenis bagan tertentu. Selanjutnya Anda harus memanggil fungsi/skrip untuk menggambar diagram dengan menggunakan perintah google.charts.setOnLoadCallback().


xxxxxxxxxx
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(gambarDiagram);
  ...
</script>

Argumen pertama fungsi google.charts.load adalah nama versi atau nomor, sebagai string. Pada contoh tersebut digunakan 'current', artinya memanggil rilis resmi terbaru Google Charts.

Contoh di atas mengasumsikan Anda ingin menggunakan paket corechart (untuk membuat diagram pencar, garis, batang/kolom, area, lingkaran, donut, peta/geo). Jika Anda menginginkan jenis bagan yang berbeda atau tambahan, gantikan atau tambahkan nama paket yang sesuai untuk corechart di atas (misalnya, {packages: ['corechart', 'line', 'bar', 'table', 'sankey']}).

Baris selanjutnya adalah memanggil fungsi JavaScript bernama gambarDiagram yang sudah Anda definisikan pada halaman web Anda. Pastikan fungsi tersebut unik secara global dan Anda mendefinisikannya sebelum Anda menggunakannya melalui perintah google.charts.setOnLoadCallback. Biasanya fungsinya didefinisikan setelah atau sebelum perintah untuk memanggilnya.

Selajutnya, untuk menggunakan Google Chart tambahkan elemen <div> pada posisi untuk menampilkan diagram di file HTML.


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

dengan DiagramID adalah identitas (nama) unik untuk diagram tersebut. Nama unik ini digunakan untuk menyimpan gambar diagram yang diinisiasi menggunakan perintah yang sesuai, misalnya:


xxxxxxxxxx
google.visualization.ScatterChart(document.getElementById('GCpencar'));
diagram.draw(data, opsi);

Baris pertama pada perintah di atas mendefinisikan gambar diagram pencar dan diberi nama GCpencar, yang dapat ditampilkan di dalam elemen HTML <div>. Baris kedua adalah perintah untuk menggambar diagram pencar menggunakan data dan opsi yang sudah didefinisikan sebelumnya.

Selanjutnya akan diberikan contoh-contoh menggambar berbagai diagram menggunakan Google Charts. Pada contoh-contoh di bawah ini, perintah untuk memanggil loader Google Charts dan elemen HTML <div> untuk menampilkan gambarnya tidak ditunjukkan. Lihat penjelasan di atas. Yang ditunjukkan hanya skrip untuk menghasilkan gambarnya.

Diagram Pencar Menggunakan Google Chart


xxxxxxxxxx
<script type="text/javascript">
 google.charts.setOnLoadCallback(diagramPencar);
 function diagramPencar() {
        var data = google.visualization.arrayToDataTable([
          ['Umur', 'Berat badan'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]]);
        var opsi = {
          title: 'Berat Badan Menurut Umur',
          hAxis: {title: 'Umur', minValue: 0, maxValue: 15},
          vAxis: {title: 'Berat Badan', minValue: 0, maxValue: 15},
          legend: 'none'};
        var diagram = new google.visualization.ScatterChart(document.getElementById('GCpencar'));
diagram.draw(data, opsi);}
</script>

Diagram Garis Menggunakan Google Chart

Contoh diagram Garis Tren


xxxxxxxxxx
<script type="text/javascript">
  google.charts.setOnLoadCallback(gambarDiagram);
function gambarDiagram() {
var data = google.visualization.arrayToDataTable([
    ['Tahun', 'Cacah Digit'],
    [ 1985,    17526200],
    [ 1986.1, 29360111],
    [ 1986.5, 33554414],
    [ 1986.8, 67108839],
    [ 1987, 134214700],
    [ 1988, 201326551],
    [ 1989.2, 480000000],
    [ 1989.4, 535339270],
    [ 1989.6, 536870898],
    [ 1989.8, 1011196691],
    [ 1989.9, 1073740799]
  ]);
var opsi = {
    title: 'Cacah Digit Pi yang Diketahui',
    hAxis: {title: 'Tahun', format: '####'},
    vAxis: {title: 'Cacah Digit'},
    legend: 'none',
    trendlines: {0: {type: 'exponential', color: 'blue',}}};
var diagram = new google.visualization.ScatterChart(document.getElementById('GCgarisTren'));
diagram.draw(data, opsi);
}
</script>

Contoh 2 diagram garis berbentuk kurva dalam 1 bingkai


xxxxxxxxxx
<script type="text/javascript">
google.charts.setOnLoadCallback(diagramGaris1);
function diagramGaris1() {
        var data = google.visualization.arrayToDataTable([
          ['Tahun', 'Penjualan', 'Pengeluaran'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',   660,     1120],
          ['2007',  1030,      540]]);
        var opsi = {
          title: 'Kinerja Perusahaan',
          curveType: 'function',
          legend: { position: 'bottom' }
        };
        var diagram = new google.visualization.LineChart(document.getElementById('GCgaris1'));
        diagram.draw(data, opsi);
      }
</script>

Contoh 2 diagram garis dalam 1 bingkai dengan 2 garis silang


xxxxxxxxxx
<script type="text/javascript">
google.charts.setOnLoadCallback(diagramGaris2);
function diagramGaris2() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Anjing');
      data.addColumn('number', 'Kucing');
      data.addRows([
[0,   0, 0],  [1,  10, 5],  [2,  23, 15], [3,  17,  9], [4,  18, 10], 
[5,   9, 5],  [6,  11, 3],  [7,  27, 19], [8,  33, 25], [9,  40, 32], 
[10, 32, 24], [11, 35, 27], [12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40], [18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49], [24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],  [30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57], [36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57], [42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62], [48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62], [54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61], [66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
      ]);
      var opsi = {
        title: 'Popularitas binatang perliharaan menurut waktu',
        hAxis: {title: 'Waktu'},
        vAxis: {title: 'Popularitas'},
        colors: ['#a52714', '#097138'],
        crosshair: {color: '#000',trigger: 'selection'}};
      var diagram = new google.visualization.LineChart(document.getElementById('GCgaris2'));
     diagram.draw(data, opsi);
     diagram.setSelection([{row: 38, column: 1}]);}
</script>

Contoh diagram 3 garis dengan legenda


xxxxxxxxxx
<script type="text/javascript">
google.charts.setOnLoadCallback(diagramGaris3);
function diagramGaris3() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Hari');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');
      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4] ]);
var opsi = {
    chart: {
    title: 'Pendapatan Film Box Office Selama Dua Pekan Peluncuran',
    subtitle: 'dalam juta dolar (USD)'  },
    width: 900,
     height: 500    };
var diagram = new google.charts.Line(document.getElementById('GCgaris3'));
diagram.draw(data, google.charts.Line.convertOptions(opsi));
}
</script>

Contoh diagram 2 garis dengan 2 sumbu Y berbeda dalam 1 bingkai yang dapat diganti modelnya dengan tombol


xxxxxxxxxx
<button id="gantimodel">Grafik Model 1</button><br>
<div id="GCgaris4" style="max-width: 900px; height: 500px;"></div>
<script type="text/javascript">
google.charts.setOnLoadCallback(diagramGaris4);
function diagramGaris4() {
    var tombol = document.getElementById('gantimodel');
    var grafik = document.getElementById('GCgaris4');
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Bulan');
    data.addColumn('number', "Rerata Suhu");
    data.addColumn('number', "Rerata Jam Siang Hari");
    data.addRows([[new Date(2014, 0),  -.5,  5.7],
        [new Date(2014, 1),   .4,  8.7],
        [new Date(2014, 2),   .5,   12],
        [new Date(2014, 3),  2.9, 15.3],
        [new Date(2014, 4),  6.3, 18.6],
        [new Date(2014, 5),    9, 20.9],
        [new Date(2014, 6), 10.6, 19.8],
        [new Date(2014, 7), 10.3, 16.6],
        [new Date(2014, 8),  7.4, 13.3],
        [new Date(2014, 9),  4.4,  9.9],
        [new Date(2014, 10), 1.1,  6.6],
        [new Date(2014, 11), -.2,  4.5]]);
    var opsi1 = {
        chart: {
        title: 'Rerata Suhu dan Jam Siang Hari di Iceland Sepanjang Tahun'}, width: 900, height: 500,
        series: { // nama sumbu-Y untuk masing-masing seri.
            0: {axis: 'Suhu'},
            1: {axis: 'Siang'}},
        axes: {// Label setiap sumbu, tidak harus sesuai nama sumbu.
            y: {
        Suhu: {label: 'Suhu (Celsius)'},
        Siang: {label: 'Siang Hari'}}}};
    var opsi2 = {
        title: 'Rerata Suhu dan Jam Siang Hari di Iceland Sepanjang Tahun', width: 900, height: 500,
        series: { // Sumbu untuk setiap seri yang sesuai vAxes
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}},
        vAxes: { // Judul setiap sumbu
          0: {title: 'Suhu (Celsius)'},
          1: {title: 'Siang Hari'}},
        hAxis: {ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)]},
        vAxis: {viewWindow: {max: 30}}
      };
function grafikmodel1() {
 var grafik1 = new google.charts.Line(grafik);
     grafik1.draw(data, opsi1);
     tombol.innerText = 'Grafik Model 2';
     tombol.onclick = grafikmodel2;}
function grafikmodel2() {
   var grafik2 = new google.visualization.LineChart(grafik);
       grafik2.draw(data, opsi2);
       tombol.innerText = 'Grafik Model 1';
       tombol.onclick = grafikmodel1;}
grafikmodel1();
}
</script>

Diagram Batang Menggunakan Google Chart

Contoh diagram batang tegak dengan warna


xxxxxxxxxx
<script type="text/javascript">
google.charts.setOnLoadCallback(diagramBatang1);
function diagramBatang1() {
   var data = new google.visualization.DataTable();
   data.addColumn('timeofday', 'Waktu');
   data.addColumn('number', 'Tingkat Motivasi');
   data.addColumn('number', 'Tingkat Energi');
   data.addRows([
        [{v: [8, 0, 0], f: '8 am'}, 1, .25],
        [{v: [9, 0, 0], f: '9 am'}, 2, .5],
        [{v: [10, 0, 0], f:'10 am'}, 3, 1],
        [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
        [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
        [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
        [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
        [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
        [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
        [{v: [17, 0, 0], f: '5 pm'}, 10, 10],]);
   var opsi = {
        title: 'Tingkat Motivasi dan Energi Sepanjang Hari',
        colors: ['#9575cd', '#33ac71'],
        hAxis: {
          title: 'Waktu',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]}},
        vAxis: {title: 'Level (skala 1-10)'}};
  var grafik = new google.visualization.ColumnChart(document.getElementById('diagbar1'));
      grafik.draw(data, opsi);
    }
</script>

Contoh berbagai model diagram batang tegak

Klik tombol dengan tulisan model diagram yang diinginkan.

Contoh diagram batang mendatar


<script type="text/javascript">
google.charts.setOnLoadCallback(diagBarmiring);
function diagBarmiring() {
var data = google.visualization.arrayToDataTable([
        ['Kota', 'Populasi 2010', 'Populasi 2000'],
        ['New York City, NY', 8175000, 8008000],
        ['Los Angeles, CA', 3792000, 3694000],
        ['Chicago, IL', 2695000, 2896000],
        ['Houston, TX', 2099000, 1953000],
        ['Philadelphia, PA', 1526000, 1517000]
      ]);
var opsi = {title: 'Populasi Kota-kota Terbesar di AS',
    chartArea: {width: '50%'}, 
    hAxis: { title: 'Total Populasi', minValue: 0,
          textStyle: {bold: true, fontSize: 12, color: '#4d4d4d'},
    titleTextStyle: {bold: true, fontSize: 18, color: '#4d4d4d'}},
    vAxis: {title: 'Kota', textStyle: {fontSize: 14, bold: true, color: '#848484'}, titleTextStyle: {fontSize: 14, bold: true, color: '#848484'}}};
var grafik = new google.visualization.BarChart(document.getElementById('GCBarmiring'));
grafik.draw(data, opsi);
}   
</script>

Contoh berbagai model diagram batang horisontal

Klik tombol bertulisan model diagram yang diinginkan

Diagram Area Menggunakan Google Chart

Contoh diagram area non-stacked


xxxxxxxxxx
<script type="text/javascript">
google.charts.setOnLoadCallback(digArea);
function digArea() {
   var data = google.visualization.arrayToDataTable([
          ['Tahun', 'Penjualan', 'Pengeluaran'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]]);
    var opsi = {
          title: 'Kinerja Perusahaan',
          hAxis: {title: 'Tahun',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}};
    var grafik = new google.visualization.AreaChart(document.getElementById('GCArea'));
        grafik.draw(data, opsi);
}
</script>

Contoh diagram area non-stacked dan stacked


xxxxxxxxxx
<script type="text/javascript">
  google.charts.setOnLoadCallback(diaGCarea);
  function diaGCarea() {
    var data = google.visualization.arrayToDataTable([
      ['Tahun', 'Mobil', 'Truk', 'Drone', 'Segway'],
      ['2013',  870,  460, 10, 120],
      ['2014',  460,   720, 20, 60],
      ['2015',  930,  540, 140, 30],
      ['2016',  1000,  400, 80, 15]
    ]);
    var opsi1 = {
      vAxis: {minValue: 0},
      isStacked: false,
      chartArea: { width: 200 }
    };
    var opsi2 = {
      vAxis: {minValue: 0},
      isStacked: true,
      chartArea: { width: 200 }
    };
    var grafik1 = new google.visualization.AreaChart(document.getElementById('GCarea1'));
    grafik1.draw(data, opsi1);
    var grafik2 = new google.visualization.AreaChart(document.getElementById('GCarea2'));
    grafik2.draw(data, opsi2);
}
</script>

Diagram Pohon Kata dengan Google Charts

Pohon kata menggambarkan beberapa rangkaian kata/istilah secara hirarkhis. Diagram ini dapat digunakan untuk menunjukkan kata mana yang paling sering mengikuti atau mendahului kata target (misalnya, "Kucing adalah...") atau untuk menunjukkan hirarkhi istilah (misalnya, pohon istilah). Untuk menggambar diagram pohon kata dibutuhkan paket wordtree.

Catatan: Pohon kata masih dalam versi beta dan mungkin mengalami revisi besar pada rilis Google Charts mendatang.


xxxxxxxxxx
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(diagramKata);
function diagramKata() {
  var data = new google.visualization.arrayToDataTable(
      [['phrase', 'size', 'value'],
      ['Matematika memiliki cabang Aritmetika', 2, 1],
      ['Matematika memiliki cabang Aljabar Rendah', 2, 2],
      ['Matematika memiliki cabang Aljabar Abstrak', 2, 3],
      ['Matematika memiliki cabang Aljabar Linier', 2, 4],
      ['Matematika memiliki cabang Geometri Euklid', 2, 5],
      ['Matematika memiliki cabang Geometri non-Euklid', 2, 6],
      ['Matematika memiliki cabang Geometri Analitik', 2, 7],
      ['Matematika memiliki cabang Geometri Fraktal', 2, 8],
      ['Matematika memiliki cabang Analisis Riil', 2, 1],
      ['Matematika memiliki cabang Analisis Kompleks', 2, 2],
      ['Matematika memiliki cabang Teori Peluang dan Statistika', 2, 3],
      ['Matematika memiliki cabang Topologi', 3, 4],
      ['Matematika memiliki cabang Teori Bilangan', 2, 5],
      ['Matematika memiliki cabang Kombinatorik', 3, 6],
      ['Matematika memiliki cabang Trigonometri', 3, 7],
      ['Matematika memiliki cabang Teori Himpunan', 2, 8],
      ['Matematika memiliki cabang Matematika-Terapan', 3, 1],
      ['Matematika diperlukan oleh Ilmu Sosial', 2, 2],
      ['Matematika diperlukan oleh Ilmu Ekonomi', 2, 3],
      ['Matematika diperlukan oleh IPA', 3, 4],
      ['Matematika diperlukan oleh Teknologi', 3, 5],
      ['Matematika diperlukan oleh Ilmu Komputer', 2, 6],
      ['Matematika diperlukan oleh Ilmu Manajemen', 2, 7],
      ['Matematika diajarkan di Sekolah Dasar', 2, 8],
      ['Matematika diajarkan di Sekolah Menengah', 2, 1],
      ['Matematika diajarkan di Sekolah Kejuruan', 2, 2],
      ['Matematika diajarkan di Perguruan Tinggi', 3, 3],
      ['Matematika digunakan oleh Masyarakat', 2, 4],
      ['Matematika digunakan oleh Industri', 2, 5],
      ['Matematika digunakan oleh Peneliti', 2, 6]]);
  var opsi = {
    wordtree: {format: 'implicit', word: 'Matematika'}, 
    colors: ['red', 'green', 'blue']};
  var diagram = new google.visualization.WordTree(document.getElementById('GCdiagKata'));
       diagram.draw(data, opsi);
}
</script>
<div id="GCdiagKata" style="width: 900px; height: 600px;"></div>


xxxxxxxxxx
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(diagramBilangan);
function diagramBilangan() {
  var data = new google.visualization.arrayToDataTable([
          ['id', 'childLabel', 'parent', 'size', 'weight'],
          [0, 'Bilangan', -1, 5, 3],
          [1, 'Riil', 0, 3, 2],
          [2, 'Imajiner', 0, 3, 2],
          [3, 'Kompleks', 0, 3, 2],
          [4, 'Rasional', 1, 3, 0],
          [5, 'Irasional', 1, 3, 0],
          [6, 'Bulat', 4, 3, 0],
          [7, 'Pecahan', 4, 3, 0],
          [8, 'Cacah', 6, 3, 0],
          [9, 'Negatif', 6, 3, 0],
          [10, 'Nol', 8, 3, 0],
          [11, 'Asli', 8, 3, 0],
          [12, 'Komposit', 11, 3, 0],
          [13, 'Prima', 11, 3, 0]]);
   var opsi = {maxFontSize: 14,
          wordtree: {format: 'explicit',type: 'suffix'}};
   var diagram = new google.visualization.WordTree(
          document.getElementById('GCdiagBil'));
diagram.draw(nodeListData, opsis);
}
</script>
<div id="GCdiagBil" style="width: 900px; height: 500px;"></div>

Diagram Timeline dengan Google Charts

Untuk menggambar diagram timeline (garis waktu) menggunakan Google Chart Anda harus memanggil paket timeline.

Contoh diagram waktu Kepresidenan AS (Periode 1789 - 1809)


xxxxxxxxxx
<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(diagramWaktu);
  function diagramWaktu() {
    var kerangka = document.getElementById('GCdiagTimeline');
    var diagram = new google.visualization.Timeline(kerangka);
    var data = new google.visualization.DataTable();
    data.addColumn({ type: 'string', id: 'Posisi' });
    data.addColumn({ type: 'string', id: 'Nama' });
    data.addColumn({ type: 'date', id: 'Mulai' });
    data.addColumn({ type: 'date', id: 'Berakhir' });
    data.addRows([
      ['Presiden', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      ['Presiden', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      ['Presiden', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      ['Wakil Presiden', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      ['Wakil Presiden', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Wakil Presiden', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      ['Wakil Presiden', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      ['Secretaris Negara', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      ['Secretaris Negara', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      ['Secretaris Negara', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      ['Secretaris Negara', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      ['Secretaris Negara', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      ['Secretaris Negara', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      ['Secretaris Negara', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      ['Secretaris Negara', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]]);
diagram.draw(data);
}
</script>

Diagram Meteran Gause dengan Google Charts

Untuk mengambar diagram meteran gause (gauge) diperlukan paket gauge.

Berikut adalah contoh beberapa gambar meteran gause.


xxxxxxxxxx
<script type="text/javascript">
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(diaGause);
function diaGause() {
    var data = google.visualization.arrayToDataTable([
          ['Label', 'Nilai'],
          ['Memori', 80],
          ['CPU', 55],
          ['Network', 68]]);
    var opsi = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          majorTicks: ['0', '25', '50', '75', '100'],
          minorTicks: 5};
    var gambar = new google.visualization.Gauge(document.getElementById('GCgause'));
gambar.draw(data, opsi);
setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          gambar.draw(data, opsi);}, 13000);
setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          gambar.draw(data, opsi);}, 5000);
setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          gambar.draw(data, opsi);}, 26000);
}
</script>

Daftar Referensi

Charts Developers. 2024. Chart.js. https://www.chartjs.org/docs/latest/. (18-5-2024).
Google Developers. 2023. Using Google Chart. https://developers.google.com/chart/interactive/docs. (20-5-2024)
Plotly. 2024. Plotly JavaScript Open Source Graphing Library. https://plotly.com/javascript/. (15-5-2024)
W3Schools. 2023. JavaScript Tutorial. https://www.w3schools.com/js/default.asp. (25-9-2023).