Membuat Grafik Bar 2 Dimensi menggunakan Fusioncharts dan PHP

Contoh Kasus:

Saya ingin membuat grafik seperti dibawah ini menggunakan PHP dan Fusioncharts:

Download FusionCharts

Download fusionCharts dari http://www.fusioncharts.com/free

Extractlah disembarang tempat lalu

File-file FusionCharts yang dibutuhkan:

  • File FusionCharts_gen.php yang terletak pada folder code/PHPClass/Includes
  • Folder Charts yang berisi file-file swf
  • File FusionCharts.js yang terletak pada folder JSClass

Pengkopian File

  • Copylah file FusionCharts_gen.php kedalam folder htdocs/php/class
  • Copylah folder Charts ke dalam folder htdocs/php
  • Copylah file FusionCharts.js ke dalam folder htdocs/php/js

Membuat Kode PHP

Buatlah satu file PHP bernama grafik.php dalam folder htdocs/php dan isi dengan kode dibawah ini:

<?php 

 

include(‘class/FusionCharts_Gen.php’);

$FC = new FusionCharts(“Column2D”,”600″,”350″);

$FC->setSWFPath(“../Charts/”);

$strParam=”caption=Monthly Unit Sales;xAxisName=Month;yAxisName=Units;decimalPrecision=0; formatNumberScale=0″;

$FC->setChartParams($strParam);

$FC->addChartData(“462″,”name=Jan;color=AFD8F8”);
$FC->addChartData(“857″,”name=Feb;color=F6BD0F”);
$FC->addChartData(“671″,”name=Mar;color=8BBA00”);
$FC->addChartData(“494″,”name=April;color=FF8E46”);
$FC->addChartData(“761″,”name=May;color=008E8E”);
$FC->addChartData(“960″,”name=Jun;color=D64646”);
$FC->addChartData(“629″,”name=Jul;color=8E468E”);
$FC->addChartData(“622″,”name=Aug;color=588526”);
$FC->addChartData(“376″,”name=Sep;color=B3AA00”);
$FC->addChartData(“494″,”name=Oct;color=008ED6”);
$FC->addChartData(“761″,”name=Nov;color=9D080D”);
$FC->addChartData(“960″,”name=Dec;color=A186BE”);

?>
<html>
<head>
<title>First Chart Using FusionCharts PHP Class</title>
<script language=’javascript’ src=’js/FusionCharts.js’></script>
</head>
<body>
<?php

$FC->renderChart();

?>
</body>
</html>

Keterangan:

  • setSWFPath, kode ini digunakan untuk mensetting path relatif ke file swf
  • setChartParams($strParam), kode ini digunakan untuk mensetting attribut grafik.
  • caption, kode ini digunakan untuk membuat judul dari Grafik
  • xAxisName, kode ini digunakan untuk menampilkan tulisan pada sumbu X .
  • yAxisName, kode ini digunakan untuk menampilkan tulisan pada sumbu Y
  • addChartData(“857″,”name=Feb;color=F6BD0F”), kode ini digunakan untuk memberikan data pada grafik, dimana “857” adalah nilai dari grafik batangnya, “name=Feb” adalah nama kategorinya dan “color” adalah warna dari grafik batangnya.
  • renderChart(), kode ini digunakan untuk men-generate grafik.

Hasil:

Sekarang jalankan aplikasimu dari http://localhost/php/grafik.php.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *