Search code examples
javascriptjsonflot

Flot not parsing json as categorical data


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.


Solution

  • 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.