Membuat Grafik 3D menggunakan FusionCharts

Contoh Kasus:

Saya mempunyai tabel seperti dibawah ini:

TAHUN SKRIPSI DISERTASI TESIS
1996 560 300 400
1997 700 200 300
1998 500 400 250
1999 450 500 230
2000 300 560 440

Keterangan:

Pada tabel diatas dikatakan pada tahun 1996 jumlah orang yang mengikuti skripsi sebanyak 560, disertasi sebanyak 300 dan tesis sebanyak 400 orang.

Pertanyaan:

Bagaimana cara membuat grafiknya menggunakan FusionCharts sehingga terlihat seperti gambar dibawah ini:

Jawaban:

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_multiseries.php dalam folder htdocs/php dan isi dengan kode dibawah ini:

<?php 

include “class/FusionCharts_Gen.php”;
$grafik=new FusionCharts(“MSColumn3D”,”750″, “300”);
$grafik->setSWFPath(“Charts/”);
$strParam=”caption=Trend Peserta; xAxisName=Tahun; yAxisName=Jumlah Peserta;decimalPrecision=0″;
$grafik->setChartParams($strParam);

 

$grafik->addCategory(“1996”);

$grafik->addCategory(“1997”);

$grafik->addCategory(“1998”);

$grafik->addCategory(“1999”);

$grafik->addCategory(“2000”);

 

$grafik->addDataset(“SKRIPSI”);

$grafik->addChartData(“560”);

$grafik->addChartData(“700”);

$grafik->addChartData(“500”);

$grafik->addChartData(“450”);

$grafik->addChartData(“350”);

 

$grafik->addDataset(“DISERTASI”);

$grafik->addChartData(“300”);

$grafik->addChartData(“200”);

$grafik->addChartData(“400”);

$grafik->addChartData(“500”);

$grafik->addChartData(“560”);

 

$grafik->addDataset(“TESIS”);

$grafik->addChartData(“400”);

$grafik->addChartData(“300”);

$grafik->addChartData(“250”);

$grafik->addChartData(“230”);

$grafik->addChartData(“440″);

?>

<html>

<head>

<title>Membuat Grafik 3D menggunakan FusionCharts</title>

<script type=”text/javascript” src=”js/FusionCharts.js”></script>

</head>

<?php

$grafik->renderChart();

?>

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
  • $grafik->addCategory(“1996”); Kode ini digunakan untuk menambah label tahun 1996
  • $grafik->addDataset(“SKRIPSI”); Kode ini digunakan untuk menambahka Legend “SKRIPSI”
  • $grafik->addChartData(“560”); Kode ini digunakan untuk menambahkan data ‘560’ pada masing-masing legend.
  • renderChart(), kode ini digunakan untuk men-generate grafik.

Hasil:

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

 

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


You may also like...

3 Responses

  1. teguh says:

    sblumnya trimakasih bang fahmi
    saya mau tanya itu datanya statis apa dinamis
    jika statis bagaimana cara buat dinamisnya, jd biar bisa di ubah ubah datanya !!!
    trimakasih

  2. Fahmi Basya Kartapura says:

    Jelas saya menggunakan data statis pada tutorial ini, kalo data dinamis maka kamu bisa ambil dari tabel database

  3. yoga says:

    Mas Fahmi, ada nggak contohnya yang data nya dari mysql.
    Soalnya sebelumnya saya sudah belajar jpgraph tapi ada kendala.

Leave a Reply

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