Highcharts(cloumn chart) not displaying anything just blank html page

Highcharts(cloumn chart) not displaying anything just blank html page - javascript

I tried to use a column chart example given in Highcharts tutorial. This code should work fine. Someone please help me to figure out the problem. I attach the code below. I don't know why it only shows blank page.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Column chart with data from MySQL using Highcharts</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">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Project Requests',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Requests'
},
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: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Here is data.php. I think there is nothing wrong about this php.
<?php
$con = mysql_connect("localhost","*****","*******");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test_youtube", $con);
$query = mysql_query("SELECT month, wordpress, codeigniter, highcharts FROM project_requests");
$category = array();
$category['name'] = 'Month';
$series1 = array();
$series1['name'] = 'Wordpress';
$series2 = array();
$series2['name'] = 'CodeIgniter';
$series3 = array();
$series3['name'] = 'Highcharts';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['month'];
$series1['data'][] = $r['wordpress'];
$series2['data'][] = $r['codeigniter'];
$series3['data'][] = $r['highcharts'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>

Related

Dynamic updates with highcharts

I'm working with Highcharts and Highstock from a few weeks ago. Step by step, following the documentation and help online, I have builded some charts with interesting options. But now I have a question, and my skills with mysql and php are limited.
I get temperature values from a data base, every minute. I use a php file to connect to database, and then I build the chart. Now, I want to update the chart like in this example. But I can't find a right way. I was reading in Highcharts documentation, and Stackoverflow some answers, but I can't implement into my code.
I was working in 2 ways to implement the dynamic updates. The first one is:
<?php
function conectarBD(){
$server = "localhost";
$usuario = "user";
$pass = "password";
$BD = "databasename";
$conexion = mysqli_connect($server, $usuario, $pass, $BD);
if(!$conexion){
echo 'Ha sucedido un error inexperado en la conexion de la base de datos<br>';
}
return $conexion;
}
function desconectarBD($conexion){
$close = mysqli_close($conexion);
if(!$close){
echo 'Ha sucedido un error inexperado en la desconexion de la base de datos<br>';
}
return $close;
}
function getArraySQL($sql){
$conexion = conectarBD();
if(!$result = mysqli_query($conexion, $sql)) die();
$rawdata = array();
$i=0;
while($row = mysqli_fetch_array($result))
{
$rawdata[$i] = $row;
$i++;
}
desconectarBD($conexion);
return $rawdata;
}
$sql = "SELECT Probe1,Time from table2;";
$rawdata = getArraySQL($sql);
for($i=0;$i<count($rawdata);$i++){
$time = $rawdata[$i]["Time"];
$date = new DateTime($time);
$rawdata[$i]["Time"]=$date->getTimestamp()*1000;
}
?>
<HTML>
<BODY>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container">
</div>
<script type='text/javascript'>
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
series.addPoint([<?php echo $rawdata[$i]["Time"];?>,<?php echo $rawdata[$i]["Probe1"];?>], true, true);
<?php } ?>
}, 90000);
}
}
},
title: {
text: 'Tunnel temperature'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'ºC'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d-%b %H:%M', this.x) +'<br/>'+
'<b>'+ Highcharts.numberFormat(this.y, 1) +'</b>';
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: 'Probe-1',
data: (function() {
var data = [];
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
data.push([<?php echo $rawdata[$i]["Time"];?>,<?php echo $rawdata[$i]["Probe1"];?>]);
<?php } ?>
return data;
})()
}]
});
});
});
</script>
</html>
And this other way:
Connection to datatest2.php:
<?php
//convert the date values to Unix Timestamp
//Convert from 2017-02-28 19:30:01 to Tuesday, February 28 2017 19:30:01
$con = mysql_connect("localhost","username","password");
if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("databasename", $con);
$result = mysql_query("SELECT * FROM table2");
while ($row = mysql_fetch_array($result)) {
$uts=strtotime($row['Time']); //convertir a Unix Timestamp
$date=date("l, F j Y H:i:s",$uts);
//echo $valor3 . “\t” . $row[$valor2]. “\n”;
echo $date . "\t" . $row['Probe1'] . "\n";
}
mysql_close($con); ?>
And the php file for the chart:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Highstock & multiple</title>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature Tunnel',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
rangeSelector: {
buttons: [
{
type: 'all',
text: 'all'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'hour',
count: 18,
text: '18h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 6,
text: '6h'
}]
},
xAxis: {
type: 'datetime',
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%d-%b %H:%M', this.value);
}
}
},
yAxis: {
title: {
text: 'Celsius degrees'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return Highcharts.dateFormat('%d-%b %H:%M', this.x) +': <b>'+ this.y + '</b>';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Probe1'
}]
}
jQuery.get('datatest2.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
date = Date.parse(line[0] +' UTC');
traffic.push([
date,
parseInt(line[1].replace(',', ''), 10)
]);
});
} catch (e) { }
options.series[0].data = traffic;
chart = Highcharts.stockChart (options);
setInterval(function() { tsv; }, 30000);
pollChart.series[0].setData(data);
});
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>
</body>
</html>
Can you help me to find and fix the mistake?
Thanks!
Alex.

Using a combination of your first example and the JSFiddle that you posted, I would try something like this:
chart: {
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
<?php
for($i = 0 ;$i<count($rawdata);$i++){
?>
series.addPoint([<?php echo $rawdata[$i]["Time"];?>,<?php echo $rawdata[$i]["Probe1"];?>], true, true);
<?php } ?>
}, 1000);
}
}
}
Note that I have no idea whether your PHP code there is actually retrieving the data that you wanted, I have simply copied it from your example and made the assumption that that part of the code was ok.
The key here is the chart.events.load property, this takes a function that fires once the chart has finished loading. By calling setInterval here, your function will fire continuously after the chart finishes loading the first time.
By calling series.addPoint, your chart will redraw every time a new point is added, which I believe is what you want.
More information is available here about the load property.

Line graph data HighChart JS cannot shown

i wannna make a line graph using highchart JS with data from my SQL, but unfortunately the graph just shown like this :
the graph just shown a Xline and Yline but not a data
and this is my sql code
$sqlX=mysql_query("SELECT DISTINCT DAY(tgl_daftar) as value FROM pasien WHERE MONTH(tgl_daftar) = '06' AND YEAR(tgl_daftar)='2016'")or die(mysql_error()) ;
and this my php and JS code :
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script type="text/javascript">
var chart1 ;
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'grafik',
type: 'column'
},
title: {
text: 'Data Pendaftaran Pasien Baru Per Bulan',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [<?php while($r=mysql_fetch_array($sqlX)){ echo "'".$r['value']."',";} ?>]
},
yAxis: {
title: {
text: 'Jumlah'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: <?php echo "'".$namabulan."'" ; ?>
<?php
while($date=mysql_fetch_array($sqlX)){
$date=$date['value'];
$sql_jumlah = "SELECT tgl_daftar, COUNT(*) as jumlah_pasien
FROM pasien
WHERE
DAY(tgl_daftar) = '$date'
AND MONTH(tgl_daftar)='$bulan' AND YEAR(tgl_daftar) = '$namatahun'";
$query_jumlah = mysql_query( $sql_jumlah ) or die(mysql_error());
while( $data = mysql_fetch_array( $query_jumlah ) ){
$jumlah = $data['jumlah_pasien']; }
?>
data: [<?php echo $jumlah ; ?>]
<?php
} ?>
}]
});
});
</script>
thanks, Any help would be really appreciated

How to debug a non-working AJAX-based HighChart?

I came across HighChart. I have followed some of the tutorials, but unfortunately I am not able to execute. The page is loading blank. I have added all the required scripts.
Here is the following code:
data.php
<?php
$con = mysql_connect("localhost","root","root");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("demo", $con);
$query = mysql_query("SELECT month, wordpress, codeigniter, highcharts FROM project_requests");
$category = array();
$category['name'] = 'Month';
$series1 = array();
$series1['name'] = 'Wordpress';
$series2 = array();
$series2['name'] = 'CodeIgniter';
$series3 = array();
$series3['name'] = 'Highcharts';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['month'];
$series1['data'][] = $r['wordpress'];
$series2['data'][] = $r['codeigniter'];
$series3['data'][] = $r['highcharts'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
index.php
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content=html>
"text/html; charset=utf-8">
<title>Bar chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
<script type="text/javascript">
$(document).ready(function() {
var url = "http://localhost/test/example9/data.php";
$.getJSON(url, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1] ;
options.series[1] = json[2] ;
options.series[2] = json[3] ;
var chart = new Highcharts.Chart(options);
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Project Requests',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Requests'
},
labels: {
overflow: 'justify'
}
},
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
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{}]
}
});
});
</script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
</html>
I have traced the AJAX response rendered by data.php and have found the following text in my browser's Network tab:
Browser Network Tab--Response
<br />
<font size='1'><table class='xdebug-error xe-deprecated' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:\wamp\www\test\example9\data.php on line <i>2</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>246984</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\test\example9\data.php' bgcolor='#eeeeec'>..\data.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>247272</td><td bgcolor='#eeeeec'><a href='http://www.php.net/function.mysql-connect' target='_new'>mysql_connect</a>
( )</td><td title='C:\wamp\www\test\example9\data.php' bgcolor='#eeeeec'>..\data.php<b>:</b>2</td></tr>
</table></font>
[{"name":"Month","data":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},{"name":"Wordpress","data":[4,5,6,2,5,7,2,1,6,7,3,4]},{"name":"CodeIgniter","data":[5,2,3,6,7,1,2,6,6,4,6,3]},{"name":"Highcharts","data":[7,8,9,6,7,10,9,7,6,9,8,4]}]

You seem to be in a hurry with the cut'n'paste.
I encourage you to walk through your code line by line and find out what it does.
Only then will you learn. I can help you some on the way:
Starting with index.php
Dharmesh Goswami has already pointed out the incomplete line with "text/html; charset=utf-8">. Underneath that line you have an open script tag. It's missing >
If you take a look at your JavaScript, at the first six lines underneath $.getJSON(url, function(json) {:
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1] ;
options.series[1] = json[2] ;
options.series[2] = json[3] ;
var chart = new Highcharts.Chart(options);
var options = {
...
What is going on here? You are changing the object options four times before you create it at var options = {. Before that at var chart = new Highcharts.Chart(options); you are initializing HighChart with the settings inside of options. Before you create it!
In the JS you need to start with the var options = {, then you can change the xAxis and series and then you may initialize HighCharts with var chart =....
As for the data.php I suggest you open the url for it and make sure it prints out valid json. And that the json is in a format that HighChart expect.
Here is an official fiddle showing ajax loaded data: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/
I wish you good luck.

You have fixed one problem, which is that your AJAX JSON response was invalid, because it contained PHP warnings that made it unparseable.
Next, your JavaScript doesn't work. This code here:
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1] ;
options.series[1] = json[2] ;
options.series[2] = json[3] ;
var chart = new Highcharts.Chart(options);
This should go after you have defined options, so move it after this:
var options = {
...
}
The reason for this is that you're accessing something that does not exist.
Also, the above options needs a semi-colon, so change it to this:
var options = {
...
};

Please check this below code for index.php
I have noticed that your $(document).ready() function is not called so I have added js files on top and also removing below line which is not completed.
"text/html; charset=utf-8">
Code:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content=html>
<title>Bar chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
var url = "http://localhost/test/example9/data.php";
$.getJSON(url, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1] ;
options.series[1] = json[2] ;
options.series[2] = json[3] ;
var chart = new Highcharts.Chart(options);
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Project Requests',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Requests'
},
labels: {
overflow: 'justify'
}
},
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
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{}]
}
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
</html>

HighCharts / Wordpress - How do I generate unique charts for ~4,800 posts?

Relatively new to HighCharts, PHP and JS but continuing to learn. I have searched extensively on the web but have not found anything that works so far.
I have a listing website that displays information on a variety of hospitals. As part of this offering, I am looking to show salary information unique to each hospital (~4,800) in HighCharts, using the WP post ID as the identifier.
I have a static chart showing across all hospitals as a placeholder right now but would like make this dynamic based on the individual hospital in question. I tried to use an Ajax POST command to push the right data without any luck thus far.
Any help or guidance would be greatly appreciated!
Code below:
JS Chart Display (Contained in a Widget)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!--
updatepage();
//--></script>
*** Function does not work when included ***
//var post_id = parseInt( ( document.body.className.match( /(?:^|\s)postid-([0-9]+)(?:\s|$)/ ) || [ 0, 0 ] )[1] ); // - JS to get post ID
var post_id = "1"; //Temporary post_id
jQuery(function($){
$('.section').click(function () {
jQuery.ajax({
url: http://www.rndeer.com/data.php,
type: 'POST',
data: post_id,
success:function(data) {
console.log(data);
},
error: function(errorThrown){
console.log(errorThrown);
}
});
});
});
***********************
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
colors: ['#0000FF', '#0066FF', '#3396d1'],
title: {
text: '<?php echo get_the_title();?>',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Salary ($ per / hour)'
},
plotLines: [{
value: 0,
width: 1,
color: '#3396d1'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': $'+ this.y+' per / hour';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
});
</script>
Data.PHP Script
<?php
$con = mysql_connect("localhost","Database_Name","Password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
//$post_id = $_POST['post_id']; - Attempt at getting posted data
$post_id = '1';
mysql_select_db("Database Name", $con);
$query = mysql_query("SELECT hospital, newgrad, median, high FROM salary_estimates WHERE id='".$post_id."'");
$category = array();
$category['name'] = 'Hospital';
$series1 = array();
$series1['name'] = 'New Grad';
$series2 = array();
$series2['name'] = 'Median';
$series3 = array();
$series3['name'] = 'High';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['hospital'];
$series1['data'][] = $r['newgrad'];
$series2['data'][] = $r['median'];
$series3['data'][] = $r['high'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>

highchart change chart by choosing month in drop down

Sir good evening. i have a highchart graph which display all the month in the present year. All i want is to add a drop down list months which if i choose a month the graph will change data also specifically in the month chosen in the drop down. Pls help me
heres my data.php code. This code will just get the data without the specific month and year. Now i want is to put a dropdown list of month e.g january->december with the present year and if i choose a month from the drop down the graph will also change data.
<?php
$con = mysql_connect("localhost","root");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("bfp", $con);
$query = mysql_query("select city, sum(Miscellaneous) as Miscellaneous,
sum(Residential) as Residential, sum(Assembly) as Assembly, sum(Educational) as `Educational, sum(Institutional) as Institutional, sum(Mercantile) as Mercantile, sum(Business) as Business, sum(Industrial) as Industrial, sum(Storage) as Storage, sum(Mixed) as Mixed, sum(total) as total from report_structure group by city ");`
$category = array();
$category['name'] = 'City';
$series1 = array();
$series1['name'] = 'Business';
$series2 = array();
$series2['name'] = 'Storage';
$series3 = array();
$series3['name'] = 'Residential';
$series4 = array();
$series4['name'] = 'Assembly';
$series5 = array();
$series5['name'] = 'Educational';
$series6 = array();
$series6['name'] = 'Institutional';
$series7 = array();
$series7['name'] = 'Mercantile';
$series8 = array();
$series8['name'] = 'Industrial';
$series9 = array();
$series9['name'] = 'Miscellaneous';
$series10 = array();
$series10['name'] = 'Mixed';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['city'];
$series1['data'][] = $r['Business'];
$series2['data'][] = $r['Storage'];
$series3['data'][] = $r['Residential'];
$series4['data'][] = $r['Assembly'];
$series5['data'][] = $r['Educational'];
$series6['data'][] = $r['Institutional'];
$series7['data'][] = $r['Mercantile'];
$series8['data'][] = $r['Industrial'];
$series9['data'][] = $r['Miscellaneous'];
$series10['data'][] = $r['Mixed'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
array_push($result,$series4);
array_push($result,$series5);
array_push($result,$series6);
array_push($result,$series7);
array_push($result,$series8);
array_push($result,$series9);
array_push($result,$series10);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
end of data.php
and here's my structure.php which the data loaded.can anyone help me please?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bar chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
height: 400,
width: 1000,
renderTo: 'container',
type: 'column'
},
title: {
text: 'Consolidated Fire Incident by Structure in each Station',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Requests'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
options.series[4] = json[5];
options.series[5] = json[6];
options.series[6] = json[7];
options.series[7] = json[8];
options.series[8] = json[9];
options.series[9] = json[10];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
</html>

you can do it in 2 different ways.
maintain the entire data month-wise as separate data sets. append them to make an entire year data. when user selects any month in the dropdown then update the series data or re-render the chart
you can use setExtremes() method for xAxis depending on the month selected in the drop down.
if user selects june set xAxis extremes from 1st Jun to 30th Jun.
Hope this will help you

Develop Reference

JavaScript is the programming language of the Web.

Highcharts(cloumn chart) not displaying anything just blank html page - javascript

Related

Dynamic updates with highcharts

Line graph data HighChart JS cannot shown

How to debug a non-working AJAX-based HighChart?

HighCharts / Wordpress - How do I generate unique charts for ~4,800 posts?

highchart change chart by choosing month in drop down

Categories

Resources