Perbandingkan Data Column Chart Menggunakan Highchart

5 93

Highchart menyediakan berbagai jenis komponen bagan yang indah. Hal ini berguna untuk menyajikan data dalam representasi grafis interaktif. Ada diagram lingkaran, diagram batang, bagan kolom, diagram garis dan format bagan yang jauh lebih berbeda. Ini adalah komponen bagan sisi klien berdasarkan Javascript dan dapat dengan mudah diterapkan dalam proyek web kami.

Dalam tutorial ini, mari kita asumsikan contoh skenario dan lihat bagaimana kita bisa menggambar grafik untuk mereka. Mari bandingkan data sensus tiga tahun terakhir dari negara-negara berpenduduk paling padat di dunia. Kami akan menggunakan bagan kolom Highchart untuk melakukan perbandingan ini.

Pertama mari kita inisialisasi sumbu X dan sumbu Y dan opsi default lainnya. Setelah menetapkan opsi yang diperlukan, kami menetapkan susunan negara sebagai legenda bagan. Kemudian, kami mendorong data sensus ke opsi theHighcharts series untuk menggambar diagram batang.

HTML ke Render Chart

HTML berikut memiliki kotak centang negara tempat pengguna ingin membandingkan data sensus. Saat mengklik tombol compare, bagan akan ditampilkan ke target DIV. Referensi DIV target ini diatur ke opsi renderTo.

<div class="chart-filter">
	<div class="chart-item-title">
	<input type="checkbox" name="countries" value="China" checked /> China
	<input type="checkbox" name="countries" value="India" class="chart-item-option" checked /> India
	<input type="checkbox" name="countries" value="United States" class="chart-item-option" /> United States
	</div>
	<input type="button" id="compare" value="Compare" class="btn-input" />
</div>
<div id="chart"></div>

Draw Column Chart menggunakan Highcharts

Kode berikut digunakan untuk mengatur beberapa opsi default untuk menggambar grafik. Itu adalah, jenis grafik, judul, hieght dan lebar, sumbu X dan sumbu Y dan banyak lagi. Kami menginisialisasikan opsi seri tanpa data apapun.

var options = {
	chart: {
		 renderTo: 'chart',
		type: 'column',
		height: 500,
		width:530
	},
	title: {
		text: 'Population'
	},
	xAxis: {
		categories: [ '2014','2015','2016' ],
		title: { text: 'Year' }
	},
	yAxis: {
		min: 0,
		title: {
			text: 'Millon',
			align: 'middle'
		}
	},
	plotOptions: {
		column: {
			dataLabels: {
				enabled: true
			}
		}
	},
	series: [{},{},{}]
};

Setelah opsi seri awal kita harus mengatur data ke opsi ini. Dalam kode berikut, kami menetapkan negara dan tingkat sensus mereka atas nama dan data opsi seri. Selain itu, kami menetapkan warna eksplisit ke kolom.

// On click event handler to compare data
$("#compare").on("click",function(){
	var countries = ["China","India","United States"];
	var data = [[1347,1360,1374],[1210,1233,1255],[311,316,322]];
	var color = ["#10c0d2","#f1e019","#a2d210"];
	var selected_countries,j;

	// Clear previous data and reset series data
	for (i=0;i<data.length;i++) {
		options.series[i].name = "";
		options.series[i].data = "";
		options.series[i].color = "";
	}

	// Intializeseries data based on selected countries
	var i = 0;
	$("input[name='countries']:checked").each(function() {	
		selected_countries = $(this).val();
		j = jQuery.inArray(selected_countries,countries)
		if(j >= 0){
		options.series[i].name = countries[j];
		options.series[i].data = data[j];
		options.series[i].color = color[j];
		i++;	
		}
		
	});
	
	// Draw chart with options
	var chart = new Highcharts.Chart(options);

	// Display legend only for visible data.
	var item;
	for (k=i;k<=data.length;k++) {
		item= chart.series[k];
		if(item) {
			item.options.showInLegend = false;
			item.legendItem = null;
			chart.legend.destroyItem(item);
			chart.legend.render();
		}
	}

});
Demo

Kami berharap artikel ini sangat membantu kamu yang sedang belajar. Untuk belajar Membuat jQuery Drag and Drop silahkan baca artikel selanjutnya

Get real time updates directly on you device, subscribe now.

5 Comments
  1. […] tutorial sebelumnya kita sudah membuat perbandingan data menggunakan highchart, pada artikel ini kita akan melihat contoh kode untuk jQuery drag and drop. Dalam contoh ini, kita […]

  2. didit says

    cara data dari database gmana gan .. ?
    warna tergantung nilai .. contoh 100 warna biru.

    1. Infokoding says

      Masukkan variabel data nilai dan color nya

  3. […] grafik seperti Google Charts, Highchart, Chart.js, dan banyak lagi. Sebelumnya, kita telah membuat kode untuk menghasilkan grafik menggunakan Highchart. Mari kita membuat contoh untuk membuat tampilan grafik dengan menggunakan library […]

  4. rina says

    kalo semua datanya dari database itu penulisnya kyak gmna gan? sya sudah coba tp tetap gabisa

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.