How do I pass a simple JSON array to jQuery then Flot?

问题

I've been Googling for a while trying to find a solution to my problem, but everything I've found which comes close is too complicated!

I have a working Flot pie chart. It receives a JSON array from Django in this format:

[0, 3, 5, 6, 7]

The array represents the number of instances of each series (i.e. 0 instances of Series 1, 3 instances of Series 2 etc etc).

That array is then shown in a simple Flot Pie Chart using this code (theData is the array above):

function loadTotalChart(theData) {
  $.plot($("#total-pie-chart"), theData ,
  {
    series: {
        pie: { 
            show: true
    }
        },
label: {
    show:true
},
legend: {
    show: false
    },
grid: {
    hoverable: true,
    }
   });
  }

The problem is that the labels are undefined in the array, so my pie chart shows "Undefined: 30%" or similar for each series.

What I'm trying to do is add labels for each series: the labels are the same for every instance of the chart.

How can I take the JSON array, add labels and then pass that to Flot??

Thanks very much!

EDIT:

Thanks to Liam McCann, I now have this code to plot the chart only if there is data:

function checkJsons(otherJson,newJson)
{
for (var key in otherJson) {if(otherJson[key] != newJson[key]) {return false;}}
return true;
}

function loadWeekChart(theData)
{
var blankData = [0, 0, 0, 0, 0];
if(checkJsons(blankData,theData)){$('#week-pie-chart').empty().append('Nothing to show yet');} 

else { $.plot($("#week-pie-chart"), theData ,
    {
        series: {
            pie: { 
                show: true
            }
        }
    }); }
 }

回答1:

Turns out I have answered my own question. Here is the code I'm now using to take an unlabelled JSON array (e.g. [1, 2, 4, 1, 5]), make sure the array contains data (i.e. is not [0, 0, 0, 0, 0]), add labels and then show the chart:

function loadTotalChart(theData) {
  var blankData = [0, 0, 0, 0, 0];
  if(checkJsons(blankData,theData)){
  $('#total-pie-chart').empty().append('Nothing to show yet');
} else { 
  var totalPieData = [
    {label: "1/5", data:theData[0]},
    {label: "2/5", data:theData[1]},
    {label: "3/5", data:theData[2]},
    {label: "4/5", data:theData[3]},
    {label: "5/5", data:theData[4]},
  ];
  $.plot($("#total-pie-chart"), totalPieData ,
    {
        series: {
            pie: { 
                 show: true
            }
        },
        label: {
               show:true
        },
        legend: {
                show: false
        },
        grid: {
              hoverable: true,
        }
    }); 
  }
}

If anyone can see any issues with the code, or a better way of doing it, please let me know!

EDIT: Looking back at this question, I realise I didn't include the checkJsons function which is referenced in this function. Here it is:

function checkJsons(otherJson,newJson){
    for (var key in otherJson) {if(otherJson[key] != newJson[key]) {return false;}}
    return true;
 }

来源：https://stackoverflow.com/questions/11627040/how-do-i-pass-a-simple-json-array-to-jquery-then-flot

标签

jquery

django

json

flot