flot chart with json data is empty - php

Question

I need to plot chart in flot with data returned by a php script as json encoded data
i get the data in through jquery like this
$("button").click(function(){
var dp1 = $('#dp1').val();
var dp2 = $('#dp2').val();
$.ajax({
type: "GET",
url: "chart.php",
datatype:"json",
success: onSuccess,
data: {d1:dp1, d2:dp1}
});
function onSuccess(series) {
var plotarea = $("#pieChart");
plotarea.css("height", "300px");
plotarea.css("width", "400px");
$.plot( plotarea , [
{
data: series,
bars: {
show: true
}
}
] );
}
});
the data return is json encoded i can see it in firebug like so
[["ebbok1",39.55],["ebbok2",92.23],["ebbok3",102.44]]
but my chart is empty
the php file returning the json data is
$dataset = array();
while($row = $result->fetch_array(MYSQLI_ASSOC)) {
//echo $row['amount'] . "\t" . $row['product_name']. "\n";
$dataset[] = array( $row['product_name'], $row['amount'] );
}
echo json_encode($dataset,JSON_NUMERIC_CHECK);
what am i doing wrong?
EDIT
i modified my php script, it now returns data like this
[{"label":"ebook1","data":39.55},{"label":"ebook2","data":92.23},{"label":"ebook3","data":102.44}]
but i still get empty chart

Answer 1

Your $.plot call doesn't look correct. You are mixing the options and data together.
var series = [
{"label":"ebbok1","data":12},
{"label":"ebook1","data":27.55},
{"label":"ebook2","data":92.33},
{"label":"ebook3","data":102.44}
];
$.plot( $("#somePlot") , series,
{
series: {
pie: {
show: true
}
}
}
);
See fiddle here.

Answer 2

You've misunderstood how a set of data is expected for flot.
You have:
series = [["label",1],["label2",2],... ];
Flot expects data formatted like this:
series = [[[x1,y1],[x2,y2],...]];// where xN and yN are all NUMBERS
See also the documentation on this topic.
So assuming that you really want to see the labels you've specified, one way to deal with that is to use the ticks property of the xaxis. So you'd return two sets of data:
data = [[[0,1],[1,1],...]];
tickLabels = [[0,"label1"],[1,"label2"],...];
Then in your flot options specify this:
$.plot( plotarea , data, {
series: {
bars: {
show:true;
}
},
xaxis: {
ticks:tickLabels
}
} );
Example: http://jsfiddle.net/ryleyb/8gGEz/1/
EDIT: If you want to keep returning your series data the same way, you can do the manipulation in the javascript:
var tickLabels = [];
for (var i =0;i<series.length;i++){
tickLabels.push([i,series[i][0]);
series[i][0] = i;
}
var data = [series];
//now you can call flot as I described above.

Answer 3

I meet the same problem with you. But now I figure it out.
The problem is cause by your data
[["ebbok1",39.55],["ebbok2",92.23],["ebbok3",102.44]]
It look like what you want to show at x-axis is "category" type.
So flot(v0.8.2) provide 'categories' mode to present the x-axis show what you want as categories.
As following:
Step1: add categories module to your HTML
<script type="text/javascript" src="flot/jquery.flot.categories.js"></script>
Step2: add the following to your js.
var options={
xaxis:{mode: "categories"}
};
try it and enjoy it :)