Tags

, , ,

I have found Google Chart very interesting while creating chart from dynamically driven data. I have tried to put things together for better understanding.
 
1. Include mysql connection string:
<?php </span>
include “conn_string.php”;
?>
2. Load the AJAX API:

script type=”text/javascript” src=”jquery-1.7.1.min.js”>

//
/javascript”>
3. Load the Visualization API for Column Chart
google.load(‘visualization’, ‘1’, {‘packages’:[‘corechart’]});
4. Set a callback to run when the Google Visualization API is loaded
  google.setOnLoadCallback(drawChart);
  function drawChart() {
     var data = google.visualization.arrayToDataTable([
     [‘Time’, ‘Bots’, ‘Openresolvers’, ‘Proxy’, ‘Malwareurl’, ‘Phishing’, ‘Bruteforce’, ‘Scanners’, ‘Spam’]
     <?php <o:p>
     //$sql_query = “SELECT DATE_FORMAT(time, ‘%Y-%m-%d’) AS time,report,count(ip) AS countip FROM asn_data WHERE DATE_FORMAT(time, ‘%Y-%m-%d’
) > ‘2012-10-31’ GROUP BY DATE_FORMAT(time,’%Y-%m-%d’),report”;
     $sql_query = “
          SELECT DATE_FORMAT(time, ‘%Y-%m-%d’) AS time,
          SUM(CASE WHEN report = ‘bots’ THEN ipc ELSE 0 END) AS bots,
          SUM(CASE WHEN report = ‘openresolvers’ THEN ipc ELSE 0 END) AS openresolvers,
          SUM(CASE WHEN report = ‘proxy’ THEN ipc ELSE 0 END) AS proxy,
          SUM(CASE WHEN report = ‘malwareurl’ THEN ipc ELSE 0 END) AS malwareurl,
          SUM(CASE WHEN report = ‘phishing’ THEN ipc ELSE 0 END) AS phishing,
          SUM(CASE WHEN report = ‘bruteforce’ THEN ipc ELSE 0 END) AS bruteforce,
          SUM(CASE WHEN report = ‘scanners’ THEN ipc ELSE 0 END) AS scanners,
          SUM(CASE WHEN report = ‘spam’ THEN ipc ELSE 0 END) AS spam
          FROM (
          SELECT count(ip) AS ipc, report, DATE(time) as time
          FROM  asn_data
          GROUP BY report, DATE(time)) i
          GROUP BY time;
”;
 
     $result = mysql_query($sql_query);
 
     while($row = mysql_fetch_assoc($result)){
          echo “,[‘{$row[‘time’]}’,{$row[‘bots’]},{$row[‘openresolvers’]},{$row[‘proxy’]},{$row[‘malwareurl’]},{$row[‘phishing’]},{$row[‘br
uteforce’]},{$row[‘scanners’]},{$row[‘spam’]}]rn”;
     }
     ?>
     ]);
Lets explain what I have done here. First we have create a function name drawChart() and fetch the required data from mysql. As per Google Chart documentation, bellow is the format of data source:
[ ‘Month, ‘Dhaka’, ‘Chittagong’, ‘Sylhet’, ‘Khulna’ ]
[ ‘2011/05’, 150,     200,          210,       130  ]
[ ‘2011/06’, 180,     190,          215,       210  ]
[ ‘2011/07’, 196,     176,          190,       155  ]
To match format we have writer down the mysql query in such way that it will give output in desired format. Later using while loop we echo the output.
 
5. Options for the graph:
var options = {
          title : ‘Category Counts’,
          vAxis: {title: “Counts”},
          hAxis: {title: “Date”},
          seriesType: “bars”,
          series: {5: {type: “line”}}
        };
6. Call the variable and create graph:
var chart = new google.visualization.ComboChart(document.getElementById(‘chart_div’));
chart.draw(data, options);
7. Lastly use HTML tag to print the chart_div.

You can get the complete script from http://pastebin.com/HbfAdFas

Here is few sample graphs:

image

image