Question

I am using Flot to display a graph of timeseries data on a page. The chart works fine with a single dataset, however I want to add the capability of multiple data sets grouped by tags.

I have the JSON outputs formatted to what they need to be to work correctly, I am just running into a problem when combining multiple datasets prior to being plotted.

I would like to get the datasets into the seriesArray array, however with the code below that array isn’t populated when I am plotting the graph.

There is data in the tagsList array at the end of the function so I set up the seriesArray to be populated in the same manner to no avail.

What am I missing?

var plotarea = $("#placeholder");
var data;   
var plot;
var tagsList=[];
var seriesArray = [];
$.getJSON("/items/getTags.json", function(tagsJSON) {
  $.each(tagsJSON, function(key, val) {
    tagsList.push(val.name);
    $.getJSON("/data/"+val.name+".json", function(json) {
      data = [{label:val.name, data:format(json)}];
      seriesArray.push(data);
    });  
  });
  plot = $.plot(plotarea , seriesArray, {series:{ lines: {show: true},points: {show:true}},
      xaxis: {
          mode: "time",
          timeformat: "%m/%d/%y",
          tickDecimals: 0,
          minTickSize: [2,"day"]
      },
      yaxis: {
          minTickSize: 1,
          tickDecimals: 0
      }
  });
});

Answer 1

You need to wait until all your AJAX calls to /data/tag.json are finished. You can use $.when().then() to do that.

var plotarea = $("#placeholder");
var data;
var plot;
var tagsList=[];
var seriesArray = [];
$.getJSON("/items/getTags.json", function(tagsJSON) {
    var deferreds = [];
    $.each(tagsJSON, function(key, val) {
        tagsList.push(val.name);
        deferreds.push($.getJSON("/data/"+val.name+".json", function(json) {
            data = [{label:val.name, data:format(json)}];
            seriesArray.push(data);
        }));
    });
    $.when(deferreds).then(function(){
        plot = $.plot(plotarea , seriesArray, {series:{ lines: {show: true},points: {show:true}},
            xaxis: {
                mode: "time",
                timeformat: "%m/%d/%y",
                tickDecimals: 0,
                minTickSize: [2,"day"]
            },
            yaxis: {
                minTickSize: 1,
                tickDecimals: 0
            }
        });
    });
});