Create flot on PHP data

Question

I would like to create a flot bar graph based on a php output. I managed to output data from php, but I would also like to use labels and display them on the xaxis. For some reason the output of the code below is invalid. The labels show up, but the bars and xaxis labels do not.

PHP:

function getOverview() {

    $arr[] = array(
        'label' => "Label 1", 
        'data' => array(0, 1)
    );
    $arr[] = array(
        'label' => "Label 2", 
        'data' => array(1, 2)
    );


    echo json_encode($arr);
}

Output: [{"label":"Label 1","data":[0,1]},{"label":"Label 2","data":[1,2]}]

jQuery:

$(document).ready(function(){

$.ajax({
    url: 'http://localhost/getOverview.php',
    method: 'GET',
    dataType:"json",
    success: onOutboundReveived
});

function onOutboundReveived(series)
{

    var options = {
        series: {
            bars: {
                show: true,
                barWidth: .1,
                align: 'center'
            }
        },
        xaxis: {
            tickSize: 1 
        }

    };

    $.plot("#chart_filled_blue", series, options);
}
});

Can anyone help me?

Mark Mark · Accepted Answer · 2013-11-08T16:24:43

You've got a couple problems:

1.) Series data needs to be an array of arrays. Not just a single array:

'data' => array(array(1, 2))

This is, of course, so a series could have more than one point (even though your's has a single point).

2.) To get xaxis labels, you have two options. One, use the categories plugin. Two, manually provide the tick labels:

ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]]

In your situation I'd just use the category plugin. You'll need to modify the final data to:

{"label":"Label 1","data":[["Label 1",1]]}

or in the PHP:

$arr[] = array(
    'label' => "Label 1", 
    'data' => array(array("Label 1", 1))
);

Here's a fiddle.

enter image description here

Create flot on PHP data

2 Answers