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”:

data

The database is ready.

Step 2 – index.html


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

<html>
<head>
<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>
</head>

<body>

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

</body>
</html>

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:

<?php

$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']. "/" ;
}

mysql_close($con);
?>

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) {
months.push(data[i]);
switch1 = false;
} else {
days.push(parseFloat(data[i]));
switch1 = true;
}

}
months.pop();

$('#chart').highcharts({
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:
    http://www.highcharts.com/demo/line-ajax

    Thanks

  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: