[trick] Membuat Grafik dengan R-Graph dan mysql

Bismillahirrahmanirrahim..

R-Graph Adalah Library Grafik yang termasuk populer selain dari jquery dan extjs R-graph juga termasuk handal karena di buat dengan library HTML 5 . agan-agan bisa mencobanya , Gampang Banget Kok.

Ok Langsung saja

db

db_rgraph

 

selanjutnya codenya :


<?php


 mysql_connect("localhost","root","") OR die('Could not connect to MySQL: ' . mysql_error());
 mysql_select_db("rgraph");

 $sql = mysql_query("SELECT * FROM table_rgraph");
 if ($sql) {

 $labels = array();
 $data = array();

 while ($row = mysql_fetch_assoc($sql)) {
 $labels[] = $row["kode"];
 $data[] = $row["jumlah"];
 }
 $data_string = "[" . join(", ", $data) . "]";
 $labels_string = "['" . join("', '", $labels) . "']";
 } else {
 echo('MySQL query failed with error: ' . mysql_error());
 }
?>
<html>
<head>

<!-- Don't forget to update these paths -->

<script src="RGraph/libraries/RGraph.common.core.js" ></script>
 <script src="RGraph/libraries/RGraph.radar.js" ></script>
 <script src="RGraph/libraries/RGraph.bar.js" ></script>
 <script src="RGraph/libraries/RGraph.pie.js" ></script>
 <script src="RGraph/libraries/RGraph.rose.js" ></script>
 <link rel="stylesheet" href="RGraph/demos/demos.css" type="text/css" media="screen" />
</head>
<body>

 <script>
 window.onload = function ()
 {
 var radar = new RGraph.Radar('chart1', <?php print($data_string) ?>)
 .Set('labels',<?php print($labels_string) ?>)
 .Draw();

 var bar = new RGraph.Bar('chart2', <?php print($data_string) ?>)
 .Set('gutter.left', 35)
 .Set('title', 'A basic chart')
 .Set('labels', <?php print($labels_string) ?>)
 .Draw();

 var rose = new RGraph.Rose('chart3',<?php print($data_string) ?>)
 .Set('labels',<?php print($labels_string) ?>)
 .Draw();

 var donut = new RGraph.Pie('chart4', <?php print($data_string) ?> )
 .Set('variant', 'donut')
 .Set('labels', <?php print($labels_string) ?>)
 .Set('strokestyle', 'transparent')
 .Set('exploded', 3)
 .Draw();

 }
 </script>




 <table width="100%">
 <tr>
 <td><canvas id="chart1" width="400" height="250" align="left">[No canvas support]</canvas></td>
 <td><canvas id="chart2" width="400" height="250" align="left">[No canvas support]</canvas></td>
 <td><canvas id="chart3" width="400" height="250" align="left">[No canvas support]</canvas></td>
 </tr>

 <tr>
 <td><canvas id="chart4" width="400" height="250" align="left">[No canvas support]</canvas></td>
 </tr>

 </table>


</body>
</html>

untuk hasil bisa melihat seperti ini

hasil_rgraph

 

 

untuk sourcecode download langsung disini

Leave a comment

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

%d bloggers like this: