I am having trouble parsing data into a flot chart. I am unsure if it is the way I am using $.each to build my data arrays. I figured I could Anyone know what's wrong?
UPDATED: correct link: http://jsfiddle.net/qxdgrozs/
This is my json object and js code:
$(function () {
var jsonString = JSON.parse(readJSON('[
{
"Person":"Fred",
"NetIncome":0,
"StateTax":0,
"FedTax":0,
"TotalTax":0,
"AvgTaxRate":0
},
{
"Person":"Alex",
"NetIncome":5555385.06,
"StateTax":124463.24,
"FedTax":4320151.7,
"TotalTax":4444614.94,
"AvgTaxRate":44.45
},
{
"Person":"John",
"NetIncome":5555180.86,
"StateTax":124667.44,
"FedTax":4320151.7,
"TotalTax":4444819.14,
"AvgTaxRate":44.45
}
]';
var myData = JSON.parse(jsonString);
var data1 = [];
var data2 = [];
$.each(myData, function(i, jti) {
data1[i] = {
label: jti.Person,
data: jti.StateTax
}
data2[i] = {
label: jti.Person,
data: jti.FedTax
}
}
$.plot("#placeholder", [{
data: data1,
label: "test",
bars: {
show: true,
barWidth: 0.4,
align: "left"
}
}, {
data: data2,
label: "flot bug serie",
bars: {
show: true,
barWidth: 0.4,
align: "right"
}
}], {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
xaxis: {
mode: "categories",
tickLength: 0
},
grid: { hoverable: true, clickable: true }
});
});
I have also tired using the push method with no avail.
After fixing a lot of syntax errors, the big issue is that flot needs one array per datapoint, not an object, change
$.each(myData, function(i, jti) {
data1[i] = {
label: jti.Person,
data: jti.StateTax
}
data2[i] = {
label: jti.Person,
data: jti.FedTax
}
}
to
$.each(myData, function(i, jti) {
data1.push([jti.Person, jti.StateTax]);
data2.push([jti.Person, jti.FedTax]);
});
See this fiddle for the working code.