I have a page that dynamically updates a HighCharts graph from a multiselect dropdown.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<!-- FIELDS -->
<div id="fields">
<form method="post" action="">
<select id="f" name="f[]" multiple>
<option value="rss1" select>1RSS(dB)</option>
<option value="rss2">2RSS(dB)</option>
<option value="rqly">RQly(%)</option>
<option value="rsnr">RSNR(dB)</option>
</select>
</form>
</div>
<!-- GRAPH -->
<div id="graph">No selection</div>
<script>
var updateChart = function(json) {
// console.log(json)
var options = {
chart: {
renderTo: 'graph',
type: 'line',
zoomType: 'x'
},
title: { text: null },
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0
}
},
series: []
}
options.series = json;
var chart = new Highcharts.Chart(options);
// update yaxis
for (i=0; i<json.length; i++) {
if(i==0) {
// it seems that a yAxis already exist when graph is initialized. Did not find a smarter way to destroy it...
chart.yAxis[0].update({ title: { text: json[i].name }});
} else {
chart.addAxis({ title: { text: json[i].name } });
}
}
}
$(document).ready(function() {
$('#f').change(function() {
var requestParams = { f: $('#f').val() };
$.post('analysisajax.php', requestParams, updateChart);
});
});
</script>
</body>
</html>
Now, my analysisajax.php file looks like this:
<?php
header("Content-type: text/json");
// Initialize the session
session_start();
// Include config file
require_once "config.php";
$jsonObject = array();
$yaxis = 0;
foreach($_POST["f"] as $v) {
$data = array();
$sql = "SELECT $v FROM log WHERE id_user = " . $_SESSION["id_user"];
$result = $link->query($sql);
while($row = $result->fetch_row()) {
$data[] = $row[0];
}
$jsonObject[] = array(
"name" => $v,
"data" => $data,
"yAxis"=>$yaxis
);
$yaxis++;
}
$myJSON = json_encode($jsonObject, JSON_NUMERIC_CHECK);
echo $myJSON;
// Close connection
mysqli_close($link);
?>
When I'm selecting 1 value from the form, the graph loads without problem, but as soon as more than 1 value is selected from the dropdown, the graph fails with the following trace:
highcharts.src.js:498 Uncaught Error: Highcharts error #18: www.highcharts.com/errors/18
at Object.a.error (highcharts.src.js:498)
at highcharts.src.js:32669
at Array.forEach (<anonymous>)
at r.<anonymous> (highcharts.src.js:32621)
at a.fireEvent (highcharts.src.js:2635)
at r.bindAxes (highcharts.src.js:32618)
at r.init (highcharts.src.js:32482)
at a.Chart.initSeries (highcharts.src.js:26913)
at highcharts.src.js:28765
at Array.forEach (<anonymous>)
I feel that the issue is coming from my dynamic construction of yAxis but can't find a way to make it work. Any idea? Thanks a lot.
I eventually made it work with the following solution:
In the analysisajax.php script, I no longer generate the yaxis. I only send name and data.
The code to generate the graph now looks like this:
var updateChart = function(json) {
//console.log(json)
var options = {
chart: {
renderTo: 'graph',
type: 'line',
zoomType: 'x'
},
title: { text: null },
yAxis:[],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'bottom'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 0
}
},
series: [],
tooltip: { shared: true }
}
var chart = new Highcharts.Chart(options);
// update axis and series
for (i=0; i<json.length; i++) {
// add axis
chart.addAxis({ title: { text: json[i].name } });
// add serie
var a = chart.series.length;
var seriesOptions = {
name: json[i].name,
data: json[i].data,
yAxis: a
}
chart.addSeries(seriesOptions,true);
chart.options.series.push(seriesOptions);
}
}
$(document).ready(function() {
$('#f').change(function() {
var requestParams = { f: $('#f').val() };
$.post('analysisajax.php', requestParams, updateChart);
//return false;
});
});
Related
$(document).ready(function() {
Highcharts.setOptions(Highcharts.theme);
$('#div-chart').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Average Purchase',
align: 'center'
},
subtitle: {
text: ' '
},
xAxis: {
categories: <?php echo json_encode($result['day']) ?>,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Amount (Millions)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Purchase',
data: <?php echo json_encode($result['amount']) ?>
}]
});
});
In $(document).ready(function(){}); I'm defining the properties how my chart is drawn, what comes to x-axis and y-axis and properties of it. But, now I want to build a function in which I pass argument whether I want to draw high chart or canvas and then that function draw chart. How to start this? Can anyone help?
<?php
//dummy data
$result['day'] = array('Sun', 'Man', 'Tue', 'Wed');
$result['amount'] = array(1, 32, 324, 3531, 15, 6);
$result['chartType'] = 'canvas';
//$result['chartType'] = 'normal'; //this one to draw normal chart
?>canvas
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.highcharts.com/4.0.4/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/4.0.4/modules/exporting.js"></script>
<style type="text/css">
#div-chart {
max-width: 800px;
height: 400px;
margin: 1em auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
DrawhighChart(); //first draw high chart by default and make it hidden by
<?php if($result['chartType'] === 'canvas'){
?> DrawCanvas($('#div-chart').highcharts());
<?php } else { ?> $('#div-chart').show(); <?php } ?>
});
function DrawCanvas(chart) {
EXPORT_WIDTH = 1000;
var render_width = EXPORT_WIDTH;
var render_height = render_width * chart.chartHeight / chart.chartWidth
// Get the cart's SVG code
var svg = chart.getSVG({
exporting: {
sourceWidth: chart.chartWidth,
sourceHeight: chart.chartHeight
}
});
// Create a canvas
var canvas = document.createElement('canvas');
canvas.height = render_height;
canvas.width = render_width;
document.body.appendChild(canvas);
// Create an image and draw the SVG onto the canvas
var image = new Image;
image.onload = function() {
canvas.getContext('2d').drawImage(this, 0, 0, render_width, render_height);
};
image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
}
function DrawhighChart(){
Highcharts.setOptions(Highcharts.theme);
$('#div-chart').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Average Purchase',
align: 'center'
},
subtitle: {
text: ' '
},
xAxis: {
categories: <?php echo json_encode($result['day']) ?>,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Amount (Millions)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Purchase',
data: <?php echo json_encode($result['amount']) ?>
}]
});
}
</script>
<div id='div-chart' style="display: none"></div>
Note:
If you want to change the properties dynamically follow the same thing you did for x-axis values for example if you want to change the title then
title: {
text: '<?php echo $result["title"] ?>',
align: 'center'
},
Look at the official documentation. You have to call Highcharts.chart('div-chart', { ... your settings ... }. You can assign this to a variable, but not to your div like you did above. And what do you mean with draw canvas OR Highchart?
I think what Thamaraiselvam ment was:
$(document).ready(function() {
drawChart(chart_type, args...);
});
function drawChart(chart_type, args....){
if (type === 'highchart') {
drawHighChart(args);
} else if (type === 'canvas'){
drawCanvas(args);
}
}
function drawHighChart(args){
}
function drawCanvas(args){
}
Not directly related but still. I suggest you to look on the side of Jquery which gives the possibility to produce a lot of fancy graphic output with usually less effort than with javascript. see this documentation. Greetings andy
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.
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);
?>
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);
?>
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