Membuat Grafik dengan FusionCharts di PHP dan Oracle

Posted on

setelah memposting artikel tentang membuat grafik dengan highcharts sekarang saya jelaskan sedikit lebih mudah yaitu dengan cara mengkonversi isi table HTML ke dalam grafik dengan menggunakan FusionCharts. dimana isi baris akan di masukkan dalam grafik.

Tahap-tahap codingannya :

1. Unduh terdahulu library FusionCharts [Get here!]
2. Copy Paste ke notepad anda source code dibawah ini, simpan dengan nama coba_grafik.php di htdocs anda

<html><head><script type=”text/javascript” src=”JS/jquery-1.4.js”></script><script type=”text/javascript” src=”JS/jquery.fusioncharts.js”></script><style>h2{align:center}table{font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#fff;}th{background-color:#000; padding: 2 5 2 5;}td{background-color:#000}</style></head><body> <center> <h2>Lembaga Survey Not Responding</h2><h3>Data Judul Skripsi di tinjau dari Bahasa Pemrograman + DB</h3> <table id=”myHTMLTable” border=”1″ align=”center”> <tr> <th>Bahasa Pemrograman + DB</th> <th>Jumlah Penggemar</th> </tr> <tr> <td>Native PHP+MySQL</td> <td>1</td> </tr> <tr> <td>CodeIgniter+MySQL</td> <td>3</td> </tr>        <tr> <td>Android</td> <td>1</td>  </tr>        <tr> <td>Native PHP+Oracle</td> <td>5</td>  </tr>        <tr> <td>Java</td> <td>1</td> </tr> <tr> <td>Flash2Android</td> <td>2</td> </tr> <tr> <td>GIS</td> <td>4</td> </tr> <tr> <td>Networking</td> <td>1</td> </tr> <tr> <td>Gak Jelas Arahnya</td> <td>22</td> </tr> </table> <script type=”text/javascript”> $(‘#myHTMLTable’).convertToFusionCharts({ swfPath: “Charts/”, type: “MSColumn3D”, data: “#myHTMLTable”, dataFormat: “HTMLTable”, width: “800” }); </script> </center></body></html>

3. Kemudian buka browser anda dan ketika di address bar : localhost/coba_grafik.php 
4. Hasilnya seperti ini

Selamat mencoba dan kreasikan sendiri kawan…
Gravatar Image
Suka jalan-jalan, naik sepeda, bermain code-code asal tidak suka mengkode cinta. Hubungi email : andhika.na@gmail.com jika anda butuh website untuk personal maupun bisnis.

Leave a Reply

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

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