1

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

4 回答 4

1

问题是 Highcharts 演示告诉您在“容器”div 中呈现图表，而 CakePHP 默认布局也使用“容器”div。这两者之间发生了冲突。

感谢你们。

于 2013-01-02T14:23:20.713 回答
1

你的 setTimeout(requestData, 1000); 在 requestData 和 requestDataTwo 中是相同的。您需要它们彼此独立，否则，返回的总是不是 1，而是请求数量的两倍...

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

同样...您需要将其添加到您的php“控制器”中

<?php
switch (key($_GET)) {

  case 'random_two':
    random_two();
    die();
break;

  case 'random_one':
    random_one();
    die();
    break;
}
?>
于 2013-01-21T22:32:27.390 回答
0

如果您想首先在单个页面上使用多个图表，请为所有图表创建不同的变量，例如var chart1, chart2;

现在$(document).ready定义不同图表的所有图表变量，并给出适当的属性，尤其是renderTo属性。您可以通过对图表使用单独的load事件来为不同的图表定义不同的 ajax 调用。

于 2012-12-29T09:30:15.707 回答
0

您是否在此处查看过有关堆栈溢出的类似帖子？

无法在单个页面上显示多个 Highchart 在单个网页
中管理多个
Highchart 在单个页面中使用多个 Highchart
创建六个具有相同渲染，不同数据的图表（highchart ）

它还有助于查看 Highcharts 演示页面的源代码，该页面在一页上有许多图表，并查看它们是如何被调用的。
Highcharts 演示

对不起，我不能提供更多帮助。今晚晚些时候可能有更多时间:)

于 2012-12-28T23:13:26.290 回答