How can I include multiple highcharts to the same page using php include command?
I've tried this but it doesn't work :
$y=$objective;
$n=count($objective);
for($i=0; $i<$n; $i++){
$count[]=$i;
}
$x=$count;
include("graph.php");
$y=$temp;
$n=count($temp);
for($i=0; $i<$n; $i++){
$count[]=$i;
}
$x=$count;
include("graph.php");
in "graph.php" I've this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
var x_data = <?php echo json_encode($x); ?>;
var y_data = <?php echo json_encode($y); ?>;
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Title'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
//type: 'datetime',
// minRange: 14 * 24 * 3600000 // fourteen days
x_data
},
yAxis: {
title: {
text: 'Variable'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Data',
// pointInterval: 24 * 3600 * 1000,
//pointStart: Date.UTC(2006, 0, 1),
data: y_data
}]
});
});
</script>
</head>
<body>
<script src="Highchart/js/highcharts.js"></script>
<script src="Highchart/js/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
If it's not possible how can I solve this problem? Is there any other method that I can use?
Thanks
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>Try to make id value different for each include, e.g.
$divId = 'container_' . mt_rand( 1, 1000 );$('#<?php echo $divId;?>').highcharts...<div id="<?php echo $divId;?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>