multiple Highcharts using PHP include command

Question

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

Ivan Solowjew · Accepted Answer · 2015-06-07 15:53:40Z

1

<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>

answered Jun 7, 2015 at 15:53

Ivan Solowjew

243 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

multiple Highcharts using PHP include command

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related