I'm trying to draw two charts in the same page php using highcharts.But, just the first one was displayed.The $data1,$data2,$data3,$data4,$data5 are values returned by some functions.
page.php:
<div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="containerone" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<?php
include 'data.php';
$data1=data::amountUSD($res['id']);
$data2=data::amountEUR($res['id']);
$data3=data::Month($res['id']);
$data5=data::Totalminutejour($res['id']);
$data4=data::Day($res['id']);
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/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">
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'USD VS EUR'
},
xAxis: {
categories: [<?php echo join(',', $data3); ?>]
},
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: [ {
name: 'EUR',
data: [<?php echo join(',', $data2); ?>],
},
{
name: 'USD',
data: [<?php echo join(',', $data1); ?>],
},
]
});
});
$(function() {
var chartone = new Highcharts.Chart({
chart: {
renderTo: 'containerone',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Range Total Minutes every day',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [<?php echo join(',', $data4); ?>]
},
yAxis: {
title: {
text: 'Total Minutes'
},
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: [{
name: 'TotalMinuteDay',
data: [<?php echo join(',', $data5); ?>],
},
]
});
});
</script>
</div>
That's what print_r returns:
print_r($data1); // Array ( [0] => 8.800000190734863 [1] => 20 )
print_r($data2); // Array ( [0] => 8.800000190734863 [1] => 2 )
print_r($data3); // Array ( [0] => 5 [1] => 5 [2] => 4 [3] => 4 )
print_r($data4); //Array ( [0] => a [1] => d )
print_r($data5); // Array ( [0] => 0.2 [1] => 0.2 )
