Mutiple Highcharts with different ajax calls - php

Question

I'd like to know the proper way to make a dashboard with multiple highcharts in a single page, I'm loading data to the charts with AJAX from a PHP method.
With 1 chart I'm doing it like this:
Controller
public function random_values(){
//CakePHP code
$this->autoRender = FALSE;
header("Content-type: text/json");
$x = time() * 1000;
$y = rand(1,100);
$ret = array($x, $y);
echo json_encode($ret);
}
View
<script type="text/javascript">
var chart; //global
function requestData() {
$.ajax({
url: 'singlecharts/random_values',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>
But how do I do to make many charts, everyone with its own ajax request.
Any help will be appreciated it, thank you.
EDIT
This is what I've tried so far and isn't working.
Controller:
public function random_one(){
$this->autoRender = FALSE;
//Set the JSON header
header("Content-type: text/json");
//The x value is the current JavaScript time, ...
$x = time() * 1000;
//The y value is a random number
$y = rand(1,100);
//Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
}
public function random_two(){
$this->autoRender = FALSE;
//Set the JSON header
header("Content-type: text/json");
//The x value is the current JavaScript time, ...
$x = time() * 1000;
//The y value is a random number
$y = rand(1,100);
//Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
}
View
<script type="text/javascript">
var chart; //global
function requestData() {
$.ajax({
url: 'charts/random_one',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data one'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data #1',
data: []
}]
});
});
var chart2; //global
function requestDataTwo() {
$.ajax({
url: 'charts/random_two',
success: function(point) {
var series = chart2.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart2.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container-two',
defaultSeriesType: 'spline',
events: {
load: requestDataTwo
}
},
title: {
text: 'Live random data two'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data #2',
data: []
}]
});
});
</script>

Answer 1

The problem was that Highcharts demo tells you to render the chart in "container" div and CakePHP default layout also uses a "container" div. There was a conflict between those two.
Thank you guys.

Answer 2

Your setTimeout(requestData, 1000); is the same in both requestData and requestDataTwo. You need them both to be independent of each other, otherwise, the one will always return with not 1, but twice the number of requests...
function requestDataTwo() {
$.ajax({
url: 'test.php?random_two',
success: function(point) {
var series = chart2.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart2.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000); **<-- Change this here to requestDataTwo**
},
cache: false
});
}
Just as well... You need to add this to your php "controller"
<?php
switch (key($_GET)) {
case 'random_two':
random_two();
die();
break;
case 'random_one':
random_one();
die();
break;
}
?>

Answer 3

Have you checked similar posts here on stack overflow?
Cannot display multiple Highcharts on a single page
Manage multiple highchart charts in a single webpage
Using multiple Highcharts in a single page
Create six chart with the same rendering,different data (highchart )
It could also help to view the source of the Highcharts demo page that has many charts on one page, and see how they are called.
Highcharts demo
Sorry I can´t help more. Might have more time later this evening :)

Answer 4

If you want to use multiple charts on a single page first of create different variables for all the charts like var chart1, chart2;
Now on $(document).ready define all the chart variables for different charts and give appropriate properties especially renderTo property. You can define different ajax calls for different charts by using separate load events for charts.