Highcharts – load JSON data via Ajax and PHP!

Highcharts is a popular JavaScript for creating easy and interactive charts, but you know it is also possible to make it dynamic by pulling the data from database using server side scripts. In this tutorial I have used PHP as a server side script, you can use any other technology  such as ASP, ASP.NET, Ruby etc.,

Lets see JavaScript first:

If you see, I’m using getJSON() for ajax call, because Highcharts needs JSON data to create charts. Then I have create a function called getAjaxData(), this helps to load dynamic data to the Highcharts without reloading the page.

Here is the entire HTML (index.html):

And here is the PHP file (data.php):

PHP file is used to connect to the MySQL database, pull the data from the table and printing it as a JSON result. To understand the PHP file just read the comments in it.

And the MySQL dump data for table “highcharts_data“:

Finally, to make it more easier, here is the DEMO and DOWNLOAD for you:

demo download

14 Comments

Add a Comment

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