Tutorial Highcharts with MySQL, PHP and AJAX

In this tutorial, I will create a chart with highcharts that displays the data retrieved from a mysql database. I will use jQuery, PHP, Ajax and MySQL.

ajax example

See live example clicking here.

In this tutorial we will create: database, index.html, data.js and values.php

Step 1 – Create database

I have already created a new database called “chart” with a table called “values” and two columns: “month” and “days”
create database

I insert the data in the table “values”:


The database is ready.

Step 2 – index.html

I will create the home page index.html with the following content:

<title>Highcharts with mySQL and PHP - Ajax101.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data.js" ></script>


<div id="chart" style="height: 400px; margin: 0 auto"></div>


You can see I import jQuery, Highcharts and file data.js

Step 3 values.php

Now I create the page values.php to retrieve data from the database:


$con = mysql_connect("localhost","root","root");

if (!$con) {
die('Could not connect: ' . mysql_error());

mysql_select_db("chart", $con);

$result = mysql_query("SELECT * FROM `values`") or die ("Error");

while($row = mysql_fetch_array($result)) {
echo $row['month'] . "/" . $row['days']. "/" ;


I connect to the database and with “echo” I return all data.

Step 4 data.js

in the file data.js do I make an AJAX call to values.php file to collect all data. Once I get the data, I get into two arrays to create the chart:

$(function() {
//Highcharts with mySQL and PHP - Ajax101.com

var months = [];
var days = [];
var switch1 = true;
$.get('values.php', function(data) {

data = data.split('/');
for (var i in data) {
if (switch1 == true) {
switch1 = false;
} else {
switch1 = true;


chart : {
type : 'spline'
title : {
text : 'Highcharts with mySQL, PHP and AJAX'
subtitle : {
text : 'Source: Ajax101.com'
xAxis : {
title : {
text : 'Months'
categories : months
yAxis : {
title : {
text : 'Days'
labels : {
formatter : function() {
return this.value + 'days'
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
series : [{

name : 'Days',
data : days


We have created our graph that retrieves data from a mysql database.

You can download all the files clicking here

11 Responses Tutorial Highcharts with MySQL, PHP and AJAX
  1. Job says:

    very nice tutorial..can you help me with a pie chart also .Thank very much

  2. Ali says:

    Thanks for this great tutorial i was able to get highcharts up and running with mysql finally and with out any errors.

    I just want to know how can I add 2 more lines to the chart for example

    1. Visitors
    2. Unique Visitors
    3. Link Click

    Something like this:


  3. […] tutorial is a modification of: Tutorial Highcharts with MySQL, PHP and AJAX. In this case, we will add 3 lines (or series) to our chart gets data from a mysql […]

  4. santoso says:

    hello, i follow your tutorial but the data i can’t retrieve. conn and database already correct. Are i missing something ?

  5. Rishabh says:

    Thank you for an amazing tutorial . Can you tell me how to get it in real time ?

  6. Junior says:

    Thank you very much for the tips, it helped me a lot !

  7. mitmitaaa says:

    hi, this is very good tutorial.
    but how can i do for change the y_axis and x_axis tittle ? i tried to change the title at data.js file. but when i reload my page, the title was still ‘day’ and ‘month’

  8. Santiago Fernandez says:

    Good Tutorial … I’m showing my Arduino temperature measurement ! The only question I have is how to reload the Ajax with the data every 10 seconds ?

  9. Michael says:

    Hm — strange: Yesterday I got your example working but today I’ve got a white Screen and nothing loads anymore (firefox). The Browser in my Smartphone works nevertheless. What’s that?

Leave a Comment
Your comment: