How to transfer data from PHP and Mysql to amCharts or Google Chart javascript

Today I want to share some helpful coding help-out, it's about how to use the cool amChart javascript charting in your PHP application getting data from mysql table to PHP to an awesome 3D animated Pie in amCharts same thing for Google Chart tool. 

Example of what you'll get on your website.



First of all download the amChart from here and upload it to your server.

The problem:
The problem here is that amCharts is ready to handle a CVS files or ready statics data inside the javascript function, but what most developers want to do is to transfer a data or a table from PHP or from mysql table into javascript amChart.

The solution:
Well, the solution I found is quite simple using the json and loop, to transfer the PHP table inside the amChart javascript table, first thing first I want to show you how to load the required data from a mysql table into a PHP array:

In my case its a table that contain Visitors IPs, and I want to select only unique IP and country name and put it on a Pie chart:

<?
    $result = mysql_query("SELECT t2.`country` AS `country`, COUNT(DISTINCT ip) AS count FROM iptable as t1 LEFT JOIN `countrytable` as t2 ON t2.ip = t1.visitor_id WHERE (UNIX_TIMESTAMP()-t1.`time_end`) < 3000 GROUP BY t2.`country`");
       $rows_count = mysql_num_rows($result);
       $data = array();
       if ($rows_count > 0)
        while ($data = mysql_fetch_array($result)) {
        $pietable[] = '{country: "' . $data['country'].'",visits:' . $data['count'] . '},';
        $pie = '{country: "' . $data['country'].'",visits:' . $data['count'] . '},';
        echo $pie;
        echo "</br>";
}
    else echo "Got nothing !!";
?>

As you can notice from the code above the key of the problem is to store the data on PHP array using the following format on every table row : {country: "countryname",visits: 9252},

Now that we have all the data stored on $pietable[], we proceed to the Javascript part,

        <script src="/amcharts.js" type="text/javascript"></script>        
        <script type="text/javascript">
            var chart;
            var chartData = [
            <?php

                               // You can modifies the limit of $i by your needs

                for ($i=0; $i<10; $i++){
                    echo $pietable[$i];
                 }
             ?>
            ];

            AmCharts.ready(function () {
                // PIE CHART
                chart = new AmCharts.AmPieChart();

                // title of the chart
                chart.addTitle("Visitors countries", 16);

                chart.dataProvider = chartData;
                chart.titleField = "country";
                chart.valueField = "visits";
                chart.sequencedAnimation = true;
                chart.startEffect = "elastic";
                chart.innerRadius = "30%";
                chart.startDuration = 2;
                chart.labelRadius = 15;

                // the following two lines makes the chart 3D
                chart.depth3D = 10;
                chart.angle = 15;

                // WRITE                                
                chart.write("chartdiv");
            });
        </script>

Simple huh, just echo every row on a for loop and boom, you get all your data on the Pie, the pie that you will get from this code is a 3D animated Pie, now you need to call the chart with the following div on the html code:
        <div id="chartdiv" style="width:600px; height:400px;"></div>

Noting that this method will also work for JS Google Chart which using the same algorithm.

If this helped you out shared to help others !

If you like this article, please share it on facebook, tweet it and +1 it to spread it :) !