CODEWITHSUNDEEP
javascriptphpjsonhighcharts
Rtenklooster
Rtenklooster

Reputation: 25

Highcharts json php multiple series

I have a simple question but for some reason can't find the solution. As described here: highcharts documentation, I made the following script:

<script type="text/javascript">
$(document).ready(function() {

    var options = {
            chart: {
                renderTo: 'container',
                type: 'column',
            },
            title: {
                text: 'Dagelijks waterverbruik'
            },
            subtitle: {
                text: 'Waterverbruik in liters'
            },
            xAxis: {
                categories: [
                    'Zondag',
                    'Maanag',
                    'Dinsdag',
                    'Woensdag',
                    'Donderdag',
                    'Vrijdag',
                    'Zaterdag'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Waterverbruik (Liter)'
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{}]
    };

    $.getJSON('testdata.php', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});
</script>

my testdata.php is as follows:

 <?php
header('Content-Type: application/json');
$data[] = array('Zondag',11);
$data[] = array('Maandag',10);
$data[] = array('Dinsdag',9);
$data[] = array('Woensdag',8);
$data[] = array('Donderdag',12);
$data[] = array('Vrijdag',2);
$data[] = array('Zaterdag',18);
$serie1[] = array('name' => 'serie 1', 'data' => $data);
$serie1[] = array('name' => 'serie 2', 'data' => $data);
echo json_encode($serie1);
?>

For some reason the charts don't render. What am I doing wrong? One series is working this way, but multiple series don't.

As you can see I would expect two bars with the same value. The output of testdata.php is:

[{"name":"serie 1","data":[["Zondag",11],["Maandag",10],["Dinsdag",9],["Woensdag",8],["Donderdag",12],["Vrijdag",2],["Zaterdag",18]]},{"name":"serie 2","data":[["Zondag",11],["Maandag",10],["Dinsdag",9],["Woensdag",8],["Donderdag",12],["Vrijdag",2],["Zaterdag",18]]}]

Upvotes: 2

Views: 7184

Answers (3)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

In the JSON you need to set JSON_NUMERIC_CHECK flag, because in your example it seems that you have no numebr values on data.

Upvotes: 0

claw68
claw68

Reputation: 374

In this part:

$.getJSON('testdata.php', function(data) {
    options.series[0].data = data;
    var chart = new Highcharts.Chart(options);
});

Change it to this

$.getJSON('testdata.php', function(data) {
    options.series = data;
    var chart = new Highcharts.Chart(options);
});

You current code can only accomodate one series since you specified an index to the series i.e. [0].

Upvotes: 0

waqas
waqas

Reputation: 181

You make the array like this and do not use categories in the $data array because you are using static categories in chart.following is a hint

$data = array(11,10,9,8,12,81);
$serie1[] = array('name' => 'serie 1', 'data' => $data);
$serie1[] = array('name' => 'serie 2', 'data' => $data);
echo json_encode($serie1);

Upvotes: 1

Related Questions