CODEWITHSUNDEEP
javascriptcsvhighcharts
user3483203
user3483203

Reputation: 51185

HighCharts Graphs don't load half the time

I am displaying about 10 graphs on a webpage using highcharts. The problem I have having is that the graphs only load a portion of the time, usually around 50%. I am not sure if this is relevant, but the first graph, made using GDPC1.csv, loads every time.

Here is the code I am using to create all the graphs:

    var xmlhttp = new XMLHttpRequest();
    var unratexml = new XMLHttpRequest();
    var cpixml = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {

        var d = csvToArray(xmlhttp.responseText);
        var c = csvToArray(unratexml.responseText);
        var x = csvToArray(cpixml.responseText);

        createGDPChart(d);
        createUNRATEChart(c);
        createCPIChart(x);
        }
    }

    xmlhttp.open("GET","GDPC1.csv",true);
    xmlhttp.send();

    unratexml.open("GET","UNRATE.csv",true);
    unratexml.send();

    cpixml.open("GET","test.csv",true);
    cpixml.send();

The only thing I can think of is that it has something to do with my if statement, maybe it comes up false most of the time, but I don't know enough about javascript to know what to change. Thanks in advance.

Upvotes: 0

Views: 45

Answers (1)

dreyescat
dreyescat

Reputation: 13818

Every XMLHttpRequest instance is an independent request. You have to define the onreadystatechange for every request. Something like this:

var xmlhttp = new XMLHttpRequest();
var unratexml = new XMLHttpRequest();
var cpixml = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    var d = csvToArray(xmlhttp.responseText);
    createGDPChart(d);
    }
}

unratexml.onreadystatechange = function() {
  if (unratexml.readyState==4 && unratexml.status==200) {
    var c = csvToArray(unratexml.responseText);
    createUNRATEChart(c);
    }
}

cpixml.onreadystatechange = function() {
  if (cpixml.readyState==4 && cpixml.status==200) {
    var x = csvToArray(cpixml.responseText);
    createCPIChart(x);
    }
}

xmlhttp.open("GET","GDPC1.csv",true);
xmlhttp.send();

unratexml.open("GET","UNRATE.csv",true);
unratexml.send();

cpixml.open("GET","test.csv",true);
cpixml.send();

Upvotes: 1

Related Questions