Related
I'm going through a bit of a learning process, in order to create a small database backed reporting system for my company.
The intent is to draw a multi line chart using Google Charts, based on a mysql database.
I've managed to get the data to echo from the mysql database, but it's not generating the chart. All I get is the echo, and a blank space where the chart should be. The echo is shown for debugging purposes.
Here is the code :
<?php include 'confile.php';
$qry = "SELECT time,p1,p2,p3,p4 from $db WHERE date = '2016-03-02' ORDER BY time ASC";
$result = $conn->query($qry);
if($result === FALSE) {
echo mysql_errno($result) .": ". mysql_error($result) ."/n";
die(mysql_error());
}
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Time', 'type' => 'datetime'),
array('label' => 'Probe 1', 'type' => 'number'),
array('label' => 'Probe 2', 'type' => 'number'),
array('label' => 'Probe 3', 'type' => 'number'),
array('label' => 'Probe 4', 'type' => 'number')
);
while($r = mysqli_fetch_assoc($result)) {
$temp = array();
$temp[] = array($r['time']);
$temp[] = array($r['p1']);
$temp[] = array($r['p2']);
$temp[] = array($r['p3']);
$temp[] = array($r['p4']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?$jsonTable?>);
var options = {
title: 'Recorded Temperatures',
legend: {position: 'bottom' },
width: 800,
height: 600
};
var chart = new google.visualization.Table(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
And this is the 'echo' output
{"cols":[{"label":"Time","type":"datetime"},{"label":"Probe 1","type":"number"},{"label":"Probe 2","type":"number"},{"label":"Probe 3","type":"number"},{"label":"Probe 4","type":"number"}],"rows":[{"c":[["03:02:07"],["270.26"],["298.40"],["111.54"],["228.06"]]},{"c":[["03:28:42"],["273.23"],["190.43"],["245.69"],["283.21"]]},{"c":[["07:26:04"],["144.33"],["217.26"],["206.53"],["167.68"]]},{"c":[["12:13:20"],["153.15"],["277.23"],["167.20"],["240.88"]]}]}
This is test data, using a test query on the db. Once I understand the formatting to render the chart, it will be setup to allow the user to select which date to view, etc.
This was the closest existing question I can find, but doesn't seem to answer the question.
Not able to generate a Google Chart using MySQL table data as the data source
Following the answer of #MickMackusa, I managed to hack this together to get it to work, by ensuring the mysql/php array was output in a manner acceptable to Google Charts.
Thanks to #MickMacUSA for his assistance.
The final, working code, is below.
<?php include 'confile.php';
$qry = "SELECT time,p1,p2,p3,p4 from $db WHERE date = '2016-04-16' ORDER BY time ASC";
$result = $conn->query($qry);
if($result === FALSE) {
echo mysqli_errno($result) .": ". mysqli_error($result) ."/n";
die(mysqli_error());
}
$i = 0; //iteration counter - start at 0
$totalRows = mysqli_num_rows($result); // we need this to know when to change the output
$targetRows = $totalRows - 1; //row indies start from 0, not 1.
foreach ($result as $row){
$comTime = str_replace(":",",",$row['time']); // for each row, remove the : and put , in its place
if ($targetRows == $i) { // if the index is the same value as the target (ie, it's the last row)...
$temp = "[[".$comTime."],".($row['p1']).",".($row['p2']).",".($row['p3']).",".($row['p4'])."]". PHP_EOL;
} else {
$temp = "[[".$comTime."],".($row['p1']).",".($row['p2']).",".($row['p3']).",".($row['p4'])."],". PHP_EOL;
}
$i = $i + 1;
$rows[] = $temp;
}
$table = $rows;
$data = implode($table); //format the table as a single string, with line returns
//echo $i;
//echo $data;
?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('timeofday','Time');
data.addColumn('number','Probe 1');
data.addColumn('number','Probe 2');
data.addColumn('number','Probe 3');
data.addColumn('number','Probe 4');
data.addRows([
<?php echo $data; ?> //dump the result into here, as it's correctly formatted
]);
var options = {
title: 'Recorded Temperatures',
legend: { position: 'bottom' },
width: 900,
height: 500,
hAxis: { format: 'hh:mm:ss' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Your number values must be formatted differently and you want timeofday not datetime.
According to: https://developers.google.com/chart/interactive/docs/reference#dataparam
Format your data to look like this:
{cols:
[
{"label":"Time","type":"timeofday"},
{"label":"Probe 1","type":"number"},
{"label":"Probe 2","type":"number"},
{"label":"Probe 3","type":"number"},
{"label":"Probe 4","type":"number"}
],
rows:
[
{c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]},
{c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]},
{c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]},
{c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]}
]
}
And you must echo it in the javascript:
change:
<?$jsonTable?>
to:
<?php echo $jsonTable; ?>
And put your javascript code block just before your </body> tag.
This is the full working code using the above data format that I tested on my server:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable(
{cols:[
{"label":"Time","type":"timeofday"},
{"label":"Probe 1","type":"number"},
{"label":"Probe 2","type":"number"},
{"label":"Probe 3","type":"number"},
{"label":"Probe 4","type":"number"}
],
rows:[
{c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]},
{c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]},
{c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]},
{c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]}
]
});
var options = {
title: 'Recorded Temperatures',
legend: { position: 'bottom' },
width: 900,
height: 500,
hAxis: { format: 'hh:mm:ss' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
This is an alternative format that will be simpler/clearer/easier to build/comprehend using your mysqli results:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('timeofday','Time');
data.addColumn('number','Probe 1');
data.addColumn('number','Probe 2');
data.addColumn('number','Probe 3');
data.addColumn('number','Probe 4');
data.addRows([
[[03,02,07],270.26,298.40,111.54,228.06],
[[03,28,42],273.23,190.43,245.69,283.21],
[[07,26,04],144.33,217.26,206.53,167.68],
[[12,13,20],153.15,277.23,167.20,240.88]
]);
var options = {
title: 'Recorded Temperatures',
legend: { position: 'bottom' },
width: 900,
height: 500,
hAxis: { format: 'hh:mm:ss' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</body>
</html>
See the SO Demo provided by WhiteHat:
google.charts.load('current', {
callback: drawChart,
packages: ['corechart', 'table']
});
function drawChart() {
var data = new google.visualization.DataTable({cols: [
{"label":"Time","type":"timeofday"},
{"label":"Probe 1","type":"number"},
{"label":"Probe 2","type":"number"},
{"label":"Probe 3","type":"number"},
{"label":"Probe 4","type":"number"}
],
rows: [
{c:[{v:[03,02,07],f:'03:02:07'},{v:270.26},{v:298.40},{v:111.54},{v:228.06}]},
{c:[{v:[03,28,42],f:'03:28:42'},{v:273.23},{v:190.43},{v:245.69},{v:283.21}]},
{c:[{v:[07,26,04],f:'07:26:04'},{v:144.33},{v:217.26},{v:206.53},{v:167.68}]},
{c:[{v:[12,13,20],f:'12:13:20'},{v:153.15},{v:277.23},{v:167.20},{v:240.88}]}
]
});
var table = new google.visualization.Table(document.getElementById('chart_0'));
table.draw(data);
var options = {
title: 'Recorded Temperatures',
legend: {position: 'bottom' },
width: 800,
height: 600,
hAxis: {
format: 'hh:mm:ss'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_1'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_0"></div>
<div id="chart_1"></div>
I have seen similar questions but still do not understand how it woks.. I have this while loop looping my DB for dates, leads and sold. For each date in the DB I would like to show the daily leads and sold for each date in the DB in a line chart.
$sql = "SELECT * FROM customers WHERE source = 'website' ORDER BY date ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$sold = $row['sold'];
$visit= $row['visit'];
$date= $row['date'];
}else{
}
}
Here is the chart script -
<script type="text/javascript">
google.charts.setOnLoadCallback(drawChartl);
function drawChartl() {
var data = google.visualization.arrayToDataTable([
['Date', 'Leads', 'Sold'],
['1st', 6, 2],
['2nd', 3, 1],
['3rd', 2, 3],
]);
var options = {
title: 'Internet Performance',
curveType: 'function',
legend: { position: 'top' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
<div id="curve_chart" style="width: 1900px; height: 500px"></div>
see following snippet...
need an array that holds all the data --> $json
then add each row to $json --> $dataRow
then write the result to the javascript --> data.addRows(<?= $jsonstring ?>);
try something like this, probably need to format the date too...
<?php
$json = array();
$sql = "SELECT * FROM customers WHERE source = 'website' ORDER BY date ASC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$dataRow = array(
$row['date'],
$row['visit'],
$row['sold']
);
array_push($json, $dataRow);
}
}
$jsonstring = json_encode($json);
?>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'callback': function () {
var data = google.visualization.arrayToDataTable([
[{type: 'string', label: 'Date'}, {type: 'number', label: 'Leads'}, {type: 'number', label: 'Sold'}]
]);
data.addRows(<?= $jsonstring ?>);
var options = {
title: 'Internet Performance',
curveType: 'function',
legend: { position: 'top' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
},
'packages': ['corechart']
});
</script>
<div id="curve_chart" style="width: 1900px; height: 500px"></div>
I am using jquery widget for displaying a line graph for my file. for this purpose i have 3 files connect.php where i just have my username and password and dbhost name and rest of the two files are here
I am using this code as my data.php
<?php
include 'conn.php';
$conn = oci_connect($dbuser, $dbpass, $dbhost) or die('Error connecting to mysql');
$query = "SELECT PRODUCT, sum(QUANTITY) as QUANTITY FROM SALES GROUP BY PRODUCT";
$resultb = oci_parse($conn, $query);
oci_execute($resultb);
$orders = array();
$i = 0;
while (($row = oci_fetch_array($resultb, OCI_NUM)) != false) {
$orders[] = array(
'ProductName' => $row[0],
'Quantity' => $row[1]
);
}
$_SESSION['orders'] = $orders;
echo json_encode($orders);
?>
and this is my code of file which I want to run
<html lang="en">
<head>
<title id='Description'>jQuery Chart Column Series Example</title>
<link rel="stylesheet" href="dw/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="dw/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="dw/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="dw/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="dw/jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="dw/jqwidgets/jqxdata.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var source = {
datatype: "json",
datafields: [{
name: 'Quantity'
}, {
name: 'ProductName'
}],
url: 'data.php'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
autoBind: true,
async: false,
downloadComplete: function() {},
loadComplete: function() {},
loadError: function() {}
});
// prepare jqxChart settings
var settings = {
title: "Orders by Product",
showLegend: true,
padding: {
left: 5,
top: 5,
right: 5,
bottom: 5
},
titlePadding: {
left: 90,
top: 0,
right: 0,
bottom: 10
},
source: dataAdapter,
categoryAxis: {
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'ProductName',
showTickMarks: true,
tickMarksInterval: Math.round(dataAdapter.records.length / 15),
tickMarksColor: '#888888',
unitInterval: Math.round(dataAdapter.records.length / 15),
showGridLines: true,
gridLinesInterval: Math.round(dataAdapter.records.length / 15),
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups: [{
type: 'line',
valueAxis: {
displayValueAxis: true,
description: 'Quantity',
//descriptionClass: 'css-class-name',
axisSize: 'auto',
tickMarksColor: '#888888',
unitInterval: 100,
minValue: 0,
maxValue: 500
},
series: [{
dataField: 'Quantity',
displayText: 'Product'
}]
}]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
});
</script>
</head>
<body style="background:white;">
<div id='jqxChart' style="width:400px; height: 300px" />
</body>
</html>
It is displaying it like this
Although my data.php is working fine
Remove "Hello World" from your data.php file, your chart cannot read the array properly because of it
I am trying to work through a tutorial regarding getting a JSON string from MySQL and preparing it for highcharts, but it's not working and I have no idea why....
HTML:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
$.getJSON("data.php", function (json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
The JSON string is produced using the file
data.php:
<?php
$con = mysql_connect("*****", "*****", "*****");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("*****", $con);
$sth = mysql_query("SELECT revenue FROM projections_sample");
$rows = array();
$rows['name'] = 'Revenue';
while ($r = mysql_fetch_array($sth)) {
$rows['data'][] = $r['revenue'];
}
$sth = mysql_query("SELECT overhead FROM projections_sample");
$rows1 = array();
$rows1['name'] = 'Overhead';
while ($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = $rr['overhead'];
}
$result = array();
array_push($result, $rows);
array_push($result, $rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
If I enter a JSON string manually into data.php the charts is displayed as expected.
[{
"name": "Revenue",
"data": [23987, 24784, 25899, 25569, 25897, 25668, 24114, 23899, 24987, 25111, 25899, 23221]
}, {
"name": "Overhead",
"data": [21990, 22365, 21987, 22369, 22558, 22987, 23521, 23003, 22756, 23112, 22987, 22897]
}]
I'm assuming my connection details are correct, because if I purposely enter the wrong password I get the MySQL connection error...
“Could not connect: Access denied for user ‘*****’#'localhost’ (using password: YES)”
Also, I get “True” returned when I add “echo #mysql_ping() ? ‘true’ : ‘false’;” to the bottom of the page.
Because I'm convinced it should be working I'm wondering if there is anything related to server configuration that could be preventing me from using JSON?
if you can't use JSON_NUMERIC_CHECK (because it requires PHP 5.3.3 (json.constants))
you can cast to int [$number = (int)"1234";]
in
while ($r = mysql_fetch_array($sth)) {
$rows['data'][] = (int)$r['revenue']; // <- (int)
}
and
while ($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = (int)$rr['overhead']; // <- (int)
}
than
print json_encode($result);
is anyone ever use hightchart??i want to use hightchart to represent the data retrieve from mysql database..i try look at the example,this is full example:
<script type="text/javascript">
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
</script>
the problem is they used this link ("http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?") to get the data and which that i cant to view the example how they display the data..
i dont know how the link "http://www.highcharts.com/samples/data/jsonp.php" is look like, and how they represent the data.. i want to make my own page that retrieve data from database and replace the link above with my own php page..
this is working example...http://www.highcharts.com/stock/demo/compare
You have to create an array of data you want to populate. Then encode the php array to json format using json_encode. Echo that json string.
Here is a sample code
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
foreach($a as $i => $v)
{
$cordinates[]= array($v,$b[$i]);
}
echo (json_encode($cordinates));
Hope this helps.
solved------------ index file below
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("map2.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Revenue vs. Overhead',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
ajax file below
<?php
$con = mysql_connect("localhost","username","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}mysql_select_db("cakephp", $con);
$sth = mysql_query("SELECT revenue FROM highcharts2");
$rows = array();
$rows['name'] = 'revenue';
while($r = mysql_fetch_array($sth)) {
$rows['data'][] = $r['revenue'];
}
$sth = mysql_query("SELECT overhead FROM highcharts2");
$rows1 = array();
$rows1['name'] = 'overhead';
while($rr = mysql_fetch_assoc($sth)) {
$rows1['data'][] = $rr['overhead'];
}$result = array();
array_push($result,$rows);
array_push($result,$rows1);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
create db like below
CREATE TABLE IF NOT EXISTS `highcharts2` (
`id` int(10) NOT NULL auto_increment,
`month` varchar(225) NOT NULL,
`revenue` varchar(225) NOT NULL,
`overhead` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
)
INSERT INTO `highcharts2` (`id`, `month`, `revenue`, `overhead`) VALUES
(1, 'jan', '23987', '21990'),
(2, 'Feb', '24784', '22363'),
(3, 'Mar', '25899', '21987'),
(4, 'Apr', '25569', '22369'),
(5, 'May', '25599', '22698'),
(6, 'jun', '25577', '21999'),
(7, 'Jul', '24111', '2599'),
(8, 'Aug', '25555', '21988'),
(9, 'sep', '25444', '21981'),
(10, 'oct', '25599', '21988'),
(11, 'nov', '24559', '20142'),
(12, 'dec', '25111', '22222');
Using firebug, you can check the response of the ajax, should be a json object