来自MongoDB的数据结果为空的Highcharts图

时间:2015-08-17 20:26:36

标签: php mongodb highcharts

我刚开始使用MongoDB。我需要在图形和图中显示来自MongoDB的数据。要做到这一点,我使用Highcharts与PHP。

问题是,当我运行简单查询时,我得到结果(我在foreach循环中循环结果)但是当我在Highcharts系列数据中回显相同结果时,我什么都没得到。图表为空,没有任何行。

我想显示特定电台的所有测试数据(在此示例中,电台为Alpha1)以天为单位。

有人知道问题出在哪里吗?

以下是MongoDB记录的示例:

"id": 3,
    "date": "2015-07-19",
    "name": "StressTest",
    "first_test": 4279.558451,
    "second_test": 4296.838515,
    "third_test": 825.446594,
    "min": 2.827739,
    "max": 6071.036922,
    "station": "Alpha1"
}

以及我正在使用的代码:

 <?php
    $dbname = 'db';

    $m = new MongoClient("mongodb://root:toor@localhost:55732/db");
    $db = $m->$dbname;

    $collection = $db->db;
    $results = $collection->find()->limit(10);
    foreach ($results as $result){
        echo $result["name"]."<br>";//I got result here
    }


    ?> 
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    </head>
    <body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <script>
    $(function () {
        $('#container').highcharts({
            series: [{data: <?php echo json_encode($results) ?>, name: 'graph data'}]
        });
    });
    </script>
    </body>

    </html>

1 个答案:

答案 0 :(得分:2)

根据系列上的Highcharts docs,您需要以有效格式(数字列表)发送数据。

尝试检查这个生成的来源,它可能就像

<script>
$(function () {
    $('#container').highcharts({
        series: [{data: 
         {  
          "_id" : ObjectId("55d24118cb924da44d039ea6"),
          "date": "2015-07-19",
          "name": "StressTest",
          "first_test": 4279.558451,
          "second_test": 4296.838515,
          "third_test": 825.446594,
          "min": 2.827739,
          "max": 6071.036922,
          "station": "Alpha1"}, 
         {"_id:  //     .... and so on

 , name:     'graph data'}]
    });
});
</script>

您需要回显您想要绘制的数字列表,而不仅仅是直接从Mongo输出文档。

如果您打算将first_testsecond_testthird_test绘制为自己的行,则需要将每个分组为自己的系列:

$results = $collection->find()->limit(10);
$series = array('first_test'=>[], 'second_test'=>[], 'third_test'=>[]);
$xAxis = array();
foreach ($results as $result){
    foreach($series as $key => $values){
         $series[$key][] = $result[$key];
    }
    $xAxis[] = $result['date'];
}

然后分别输出每个系列:

<script>
    $(function () {
        $('#container').highcharts({
            xAxis: {
                categories: [<?php echo json_encode($xAxis); ?> ]
            },
            series: [
                <?php foreach($series as $key => $dataPoints){ ?>
                {
                    data: <?php echo json_encode($dataPoints) ?>,
                    name: '<?php echo $key ?>'
                }
                <?php }// End foreach ?>
            ]
        });
    });
</script>

使用类似的图表类型here查看他们的示例小提琴。