Fusionchart

Sudah diduga sebelumnya, javascript chart yang dahulu gratis kini sudah tidak gratis. Sebagai contoh FusionChart http://www.fusioncharts.com/

fusionchart

tapi jangan kecewa, saya punya backupnya loh he.. he.. he..

Gimana caranya yak buat grafik pake fusionchart? Mau tau? yuk nyimak..

1. Buatlah file index.php dengan script seperti berikut:

  http://swfobject.js

  var flashvars = {};
  flashvars.xml_file = "flashmo_264_photo_list_2.xml";
  var params = {};
  params.wmode = "transparent";
  params.allowfullscreen = true;
  var attributes = {};
  attributes.id = "slow";
  swfobject.embedSWF("flashmo_264_bar_gallery.swf", "flashmo_template", "900", "150", "9.0.0", false, flashvars, params, attributes);

 http://jquery-1.5.1.min.js
 http://js/jquery.fusioncharts.js
 http://js/FusionCharts.js

<?php
 echo"<span id='myChart2Container'>Loading FusionCharts!</span>

 $('#myChart2Container').insertFusionCharts({
  swfPath: 'Charts/',
  id: 'chart2',
  width: '900',
  height: '300', 
  type: 'Column3D',
  data: 'summary.php',
  dataFormat: 'URIData'
  });
  "; 
 echo"<hr>"; 
 ?>
 

2. File index.php akan memanggil data dari file summary.php, berikut script summary.php

<?php
 include "config/fungsi_indotgl.php";
 include"config/koneksi.php"; 
 include"config/library.php";

$result = mysql_query(" select bulan, 
  COUNT(tgl_cash) as jumlah_jual 
  from tbl_motor 
  where tgl_cash like '%2015%' and tgl_cash<>'0000-00-00' group by bulan "); 
 echo "<graph caption='Penjualan CV. H.M. Asep Motor Tahun $thn_sekarang' xAxisName='Bulan' yAxisName='Penjualan' numberPrefix=''>";
 $colors = array( 'AFD8F8','F6BD0F','8BBA00','FF8E46','008E8E','D64646','8E468E','588526',
  'B3AA00','008ED6','9D080D','A186BE','CC6600','FDC689','ABA000','F26D7D',
  'FFF200','0054A6','F7941C','CC3300','006600','663300','6DCFF6'); 
 $no=0;

while ($data = mysql_fetch_array($result)) {
  $bulan=konversi_bulan($data['bulan']);
  echo "<set name='$bulan' value='$data[jumlah_jual]' color='$colors[$no]' />";
  $no++;
 }

echo "</graph>";
 ?>
 

3. Result:
diagramfusionchart

4. Done 😀

Sekian Terimakasih,
Regards,

Okto Alhamda Putra

Advertisements

Leave a Reply

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