multiple ajax calls for populating graph using flot.js

Question

I'm using flot.js for creating my graph. I require data from 3 separate tables in the back end and i'm retrieving it using 3 ajax calls. But when i call the function the first time the graph doesn't get created but subsequent calls works fine.

var datasets = []; // global dataset
var option = {
    series: {
        lines: { show: true },
        points: {
            radius: 3,
            show: true
        }
    },
    legend: { 
      show: true, 
      container: '#legendholder' 
    }
};

function sendName() {
    var sel = document.getElementById('name');
    var name = sel.options[sel.selectedIndex].value;
    selName = encodeURIComponent(name);

    if(selName == "option") {
        document.getElementById("result").innerHTML="<p>Result will be displayed here. Please select drop-down</p>";
        return;
    }
    if (selName == ""){
        document.getElementById("result").innerHTML="<b>Empty string input!</b>";
        return;
    }

        $.ajax({
        url:      "demo1.php?name=" + selName,
        method:   "GET",
        dataType: "json",
        success:  function(series) {
            var json = eval(series);
            var arr = new Array();

            for (var i = 0; i < json.length; i++) { 
                arr.push( new Array(2007, json[i].y2007));
                arr.push( new Array(2008, json[i].y2008));
                arr.push( new Array(2009, json[i].y2009));
                arr.push( new Array(2010, json[i].y2010));
                arr.push( new Array(2011, json[i].y2011));
                arr.push( new Array(2012, json[i].y2012));
                arr.push( new Array(2013, json[i].y2013));
                arr.push( new Array(2014, json[i].y2014));
                arr.push( new Array(2015, json[i].y2015));
                arr.push( new Array(2016, json[i].y2016));
            }      

            datasets.push({
            label: "demo1",
            data: arr
            });

        }
    });

    $.ajax({
        url:      "demo2.php?name=" + selName,
        method:   "GET",
        dataType: "json",
        success:  function(series) {
            var json = eval(series);
            var arr1 = new Array();

            for (var i = 0; i < json.length; i++) { 
                arr1.push( new Array(2007, json[i].y2007));
                arr1.push( new Array(2008, json[i].y2008));
                arr1.push( new Array(2009, json[i].y2009));
                arr1.push( new Array(2010, json[i].y2010));
                arr1.push( new Array(2011, json[i].y2011));
                arr1.push( new Array(2012, json[i].y2012));
                arr1.push( new Array(2013, json[i].y2013));
                arr1.push( new Array(2014, json[i].y2014));
                arr1.push( new Array(2015, json[i].y2015));
                arr1.push( new Array(2016, json[i].y2016));
            }        

            datasets.push({
            label: "demo2",
            data: arr1
            }); 

        }
    });

    $.ajax({
        url:      "demo3.php?name=" + selName,
        method:   "GET",
        dataType: "json",
        success:  function(series) {
            var json = eval(series);
            var arr2 = new Array();

            for (var i = 0; i < json.length; i++) { 
                arr2.push( new Array(2007, json[i].y2007));
                arr2.push( new Array(2008, json[i].y2008));
                arr2.push( new Array(2009, json[i].y2009));
                arr2.push( new Array(2010, json[i].y2010));
                arr2.push( new Array(2011, json[i].y2011));
                arr2.push( new Array(2012, json[i].y2012));
                arr2.push( new Array(2013, json[i].y2013));
                arr2.push( new Array(2014, json[i].y2014));
                arr2.push( new Array(2015, json[i].y2015));
                arr2.push( new Array(2016, json[i].y2016));
            }        

            datasets.push({
            label: "demo3",
            data: arr2
            });  

        }
    });

  $.plot($("#result"), datasets , option);
  var div = document.getElementById( 'result' );
  div.style.backgroundColor = 'white';
  $("#chartFoo div.legend table").css({ border: "1px solid #888888", background: "#ffffee"});

  datasets = []; // empty the legend for next calls
}

Basically the sendName function is called each time a dropdown is changed. Could someone help me out why this is happening...

Answer 1

A number of problems I see, in no particular order...

1.)

document.getElementById("result").innerHTML="<p>Result will be displayed here. Please select drop-down</p>";

You already have jquery loaded use it:

$('#result').html("<p>Result will be displayed here. Please select drop-down</p>");

2.)

var json = eval(series);

Since your dataType is json, it should return a json obj, you don't need eval.

3.)

Your big problem is that your don't plot or re-plot your graphs in the success handler of your ajax calls. You

datasets.push({
        label: "demo3",
        data: arr2
 });

You then exit the success handler, no plots drawn...

This line:

$.plot($("#result"), datasets , option);

will execute before the ajax calls complete.