Create flot on PHP data

问题

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?

回答1:

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.

回答2:

I think, your output has an incorrect format. Try this:

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

来源：https://stackoverflow.com/questions/19862617/create-flot-on-php-data

标签

php

jquery

flot