1

I just started with MongoDB. I need to display data from MongoDB in graphs and plots. To do that I am using Highcharts with PHP.

Problem is that when I run simple query, I get results (I loop results inside foreach loop) but when I echo same results in Highcharts series data I got nothing. Chart is empty without any line.

I want to display all test data of particular station (in this example station is Alpha1) grouped in days.

Does someone know where is the problem?

Here is example of MongoDB record:

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

and here code that I am using:

 <?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 Answer 1

2

Per the Highcharts docs on Series, you need to send data in a valid format (a list of numbers).

Try to inspect the source this generates, it's probably something like

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

You need to echo a list of numbers you wish to plot, not just output documents directly from Mongo.

If you meant to graph first_test, second_test, and third_test as their own lines, you need to group each into their own series:

$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'];
}

Then output each series separately:

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

Check out their example Fiddle with a similar chart type here.

1
  • Thank you. With your example I managed to display chart. Best regards!
    – jureispro
    Aug 18, 2015 at 6:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.