Help with Mongodb + PHP + hightcharts

Question

Help with Mongodb + PHP + hightcharts

Navigation

#1 by (0 votes)

1

Dear, the following code does not work for me, I do not know what is the part I am doing wrong, this is the code:

I wanted to see a line chart of the api highcharts

<?php
$dbname = 'db';

$m = new MongoClient();
$db = $m->$dbname;

$collection = $db->prueba3;
$results = $collection->find();
    $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'];
        }


?> 
<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({
            xAxis:  {
                categories: [<?php echo json_encode($xAxis); ?> ]                   
                    },
                credits: {
                    enabled: false
                    },  
                series: [{
                            name:'<?php echo $key ?>',
                            data:[
                                <?php 
                                    foreach($series as $key => $dataPoints)
                                    {
                                ?>
                                    [<?php echo json_encode($dataPoints) ?>],
                                <?php 
                                    } 
                                ?>
                                ]
                        }]
               });
         });
</script>
</body>

</html>

and my collection has this format:

 { 
    "_id" : NumberInt(1), 
    "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"
}

When viewing the source code in browser I see this

<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({
            xAxis:  {
                categories: [(["2015-07-19","2015-07-20","2015-07-22"]) ]                   
                    },
                credits: {
                    enabled: false
                    },  
                series: [{
                            name:'third_test',
                            data:[
                                                                    [([4279.558451,5279.558451,6279.558451])],
                                                                    [([4296.838515,5296.838515,6296.838515])],
                                                                    [([825.446594,925.446594,1025.446594])],
                                                                ]
                        }]
               });
         });
</script>
</body>

</html>

This is the graphic that I get:

php mongodb highcharts

asked by zeron 22.02.2017 в 21:03

source

1 answer

Display the contents of a gridlookedit while writing avoid downloading Documents

score 0 · Answer 1

I think I already know what the problem is. You are passing the output of json_encode (a string) to the Highcharts parameters that await an object.

The following may work:

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