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 :) !
How to transfer data from PHP and Mysql to amCharts or Google Chart javascript How to transfer data from PHP and Mysql to amCharts or Google Chart javascript Reviewed by Mhr on 14:35 Rating: 5

10 comments

  1. Stopeck10:21

    Excellent...hopefully this end my hours of googling. i'm going to try use the same concept to generate Line graph
    Thanx

    ReplyDelete
  2. try it and let me know :), I can provide anyone with ajax request for amcharts if any one need it ;)

    ReplyDelete
  3. Marx Brou14:03

    hi Maher, I tested the code but it does not display the graph, in other blank page. I would like more detail how to create graphs with amCharts using MySQL database and PHP.

    Thank you for your understanding, Your Sincerely.

    ReplyDelete
  4. Hello Marx,
    Can you please provide the code, or send it to my email: mhr.live@gmail.com

    ReplyDelete
  5. edwar sirait19:11

    Please help me... how to load data from Html Table?

    ReplyDelete
  6. icha13:56

    thank you it's very help me :)

    ReplyDelete
  7. Nickol Morina11:45

    thank you very much for your help, I have been trying hundreds of ways for 2 days and nothing had worked till now.
    This works perfect.
    Thnx again :)

    ReplyDelete
  8. you are welcome thanks

    ReplyDelete
  9. disqus_dlvcPhfMO823:46

    hi! realy test code a lot of time, and get blank page, can u help me?. thanks

    ReplyDelete

No Backlinks please, Comments are under moderation !