ExtJs – Integrasi Dengan FusionChart

Fusion Chart adalah salah satu tool charting berbasis javascript  dengan flash/HTML5 sebagai penggeraknya.
Saya sendiri lebih familiar dengan Fusion Chart yang dibuat diatas Javascript code.
Untuk Javascript chart, Fusion Chart membutuhkan file swf dan JSON atau XML yang berbeda untuk setiap jenis chart-nya, cek disini.
Untuk jenis swf mana serta bentuk JSON atau XML yang mesti anda gunakan bisa dilihat di dokumentasinya.

Untuk Membuat suatu chart anda harus menginstance object baru dari FusionChart.
Kemudian meng-set JSON URL (jika anda menggunakan JSON),
kemudian render di div container yang akan ditempelkan chart.

	new FusionCharts(swfPath, idOfChart, width, height);
	FusionCharts(idOfChart).render(idOfDiv);
	FusionCharts(idOfChart).setJSONUrl(urlJson);

Untuk implementasi Fusion Chart di ExtJs saya biasa menggunakan function berikut.

function putChartToContainer(swfPath, idOfChart, urlJson, parentComponent){

	var container = Ext.create('Ext.container.Container', {
		listeners : {
			boxready : function(thisPanel, width, height, eOpts){
				   if (FusionCharts(idOfChart)) FusionCharts(idOfChart).dispose();

				   new FusionCharts(swfPath, idOfChart, width, height, 0, 1);
				   FusionCharts(idOfChart).render(thisPanel.getId());
				   FusionCharts(idOfChart).setJSONUrl(urlJson);
			},
            resize: function(thisPanel, width, height, oldWidth, oldHeight, eOpts ){
            	if(FusionCharts(idOfChart)){
            		FusionCharts(idOfChart).resizeTo(width, height);
            	}
            }

		}
	});

	parentComponent.add(container);
}

Terima kasih dan semoga bermanfaat.

mazipan-signature

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s