Mutiple Highcharts with different ajax calls

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>

What have you tried so far? What obstacles are you facing with your approach? — Jugal Thakkar, Dec 30 '12 at 16:33
I'd like to add that I get this error: Uncaught Highcharts error #13: www.highcharts.com/errors/13 — Eliel, Dec 31 '12 at 14:44
Then you can check this http://stackoverflow.com/questions/13112652/highcharts-error-13-while-instantiating-highchart-on-ajax-call/13118747#13118747 — Jugal Thakkar, Dec 31 '12 at 17:05

score 1 · Answer 1 · answered Jan 02 '13 at 14:23

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.

answered Jan 02 '13 at 14:23

Eliel

109
1
7

score 1 · Answer 2 · answered Jan 21 '13 at 22:32

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;
}
?>

It has more to do with highchart itself rather than technicalities surrounding the Ajax requests themselves. Also, you may assume the controller already works properly. — Ja͢ck, Jan 21 '13 at 22:56

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

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

edited May 23 '17 at 11:56

Community

1
1

answered Dec 28 '12 at 23:13

Skuli Axelson

534
1
8
17

Probably the mentioned questions will help. – Ricardo Alvaro Lohmann Dec 31 '12 at 00:47

score 0 · Answer 4 · answered Dec 29 '12 at 09:30

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.

Mutiple Highcharts with different ajax calls

4 Answers4