Membuat Chart Line

Line Chart adalah salah satu bentuk dari chart atau grafik yang juga sering di gunakan dalam memaparkan data laporan.

Untuk itu, sahabat Indonesia bisa menggunakan line chart ini dengan sangat mudah pada website atau kemasan data lainnya yang mendukung kode Js, Css dan Html.

Proses Pembuatan Chart Line
Tahap Pertama
Pada tahapan ini kita sediakan terlebih dahulu data yang akan kita kemas dalam bentuk Grafik Garis. Sebagai contoh kita sediakan data pengunjung situs Desa Gabung Makmur sebagai berikut :
Data Pengunjung Tahun 2013

Januari : 19 Februari : 20 Maret : 21 April : 22 Mei : 23 Juni : 24 Juli : 500 Agustus : 990 September : 0

Data Pengunjung Tahun 2014

Januari : 30 Februari : 31 Maret : 32 April : 33 Mei : 34 Juni : 35 Juli : 36 Agustus : 300 September : 130

Tahap Kedua dan Ketiga
Pada tahapan ini sama dengan tahapan pada tutorial Membuat Chart Doughnut.

Tahap Keempat
Kode penulisan Chart Line ini harus di mulai dengan kode script dan diakhiri kode script. Untuk lebih jelasnya perhatikan kode penulisan pembuka dan penutup di bawah ini :

<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*1000)};
var lineChartData = {
labels : ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September"],
datasets : [.............Input Data Chart...................]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>

Untuk input data chart kita gunakan model penulisannya sebagai berikut :

{
label: "Nama Label",
fillColor : "Warna latar area data",
strokeColor : "Warna garis area data",
pointColor : "Warna titik nilai area data",
pointStrokeColor : "Warna garis tepi titik nilai area data",
pointHighlightFill : "Warna pointcolor ketika di sorot dengan pointer",
pointHighlightStroke : "Warna pointstrokecolor ketika di sorot dengan pointer",
data : [nilai data dalam angka]
} // pada penutup kode ini, jika ingin menambahkan data label maka harus di tambah dengan koma (},)

Untuk lebih jelasnya, sahabat Indonesia bisa meng-copy kode di bawah ini dan memasangnya di laman postingan. Silahkan otak-atik kode-kode yang ada untuk melihat perubahan tampilannya.