Tutorial Highcharts (3 lines or series) with MySQL






This 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 database.

chart 3 lines mysql

See live example clicking here.

Step 1 – Create database


I have already created a new database called “chart3lines” with a table called “series” and four columns: “days”, “visitors”, “uniquev” and “linkc”

table series

database series

I insert the data in the table “series”:
values database

The database is ready.
Step 2 – index.html


<html>
<head>
<title>Highcharts with mySQL and PHP – Ajax101.com</title>
<script src=”http://code.jquery.com/jquery-1.10.2.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>
Step 3 values.php


<?php

$con = mysql_connect(“localhost”,”root”,”root”);

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

mysql_select_db(“chart3lines”, $con);

$result = mysql_query(“SELECT * FROM `series`”) or die (“Imposible”);

while($row = mysql_fetch_array($result)) {
echo $row[‘days’] . “/” . $row[‘visitors’]. “/” . $row[‘uniquev’]. “/” . $row[‘linkc’]. “/” ;
}

mysql_close($con);
?>

 

Step 4 data.js

$(function() {
//Highcharts 3 series with mySQL and PHP – Ajax101.com

var days = [];
var visitors = [];
var uniquev = [];
var linkc = [];

var series = 1;

$.get(‘values.php’, function(data) {

data = data.split(‘/’);
for (var i in data) {

switch(series){
case 1:
days.push(data[i]);
series = 2;
break;
case 2:
visitors.push(parseFloat(data[i]));
series = 3;
break;
case 3:
uniquev.push(parseFloat(data[i]));
series = 4;
break;
case 4:
linkc.push(parseFloat(data[i]));
series = 1;
break;
default:
//None
}
}

days.pop();

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

name : ‘Visitors’,
data : visitors
},{

name : ‘Unique Visitors’,
data : uniquev
},{

name : ‘Link Click’,
data : linkc
}

]
});
});
});

 

 


We already have our chart with 3 series that retrieves data from a mysql database.




 
5 Responses Tutorial Highcharts (3 lines or series) with MySQL
  1. gary says:

    Hello, I have tried this with database table, but I keep getting a blank page! Any advice?

  2. vincent says:

    Nice Tutorial

  3. zainal says:

    Hi, great tutorial. Can you help me how to change this code into dynamically chart like from this site http://www.highcharts.com/demo/dynamic-update i try to change but still failed. I want to every new row inserted in database the chart will be updated. Thank you sir

  4. Junior says:

    Hello,

    One tip, if you could help me, did you do a chart with drill down using database connection ?

    It’s something recursive, the second sql will use the first sql result, but, how to do this ?

    Tks

Leave a Comment
Your comment: