I am stuck with syntax and need some help, I have simple data set that I need to plot out as timeline with 2 filled lines (Time Series with Rangeslider).

My data set format is:

[{"pm10": 12.1, "pm25": 7.0, "time": "13.08.2018 12:25:09"}, {"pm25": 6.6, "pm10": 11.1, "time": "13.08.2018 12:30:49"}, {"pm10": 12.6, "pm25": 6.2, "time": "13.08.2018 16:59:06"},   {"pm10": 9.2, "pm25": 5.8, "time": "13.08.2018 19:37:01"}, {"pm25": 5.1, "pm10": 8.7, "time": "13.08.2018 19:42:46"},   {"pm10": 7.3, "pm25": 5.5, "time": "13.08.2018 21:42:23"}, {"pm25": 5.1, "pm10": 7.1, "time": "13.08.2018 21:47:56"}, {"pm10": 8.3, "pm25": 5.5, "time": "13.08.2018 21:53:28"}]

I have done everything to make the JSON in this format, so I cant figure out how to:

• grab live data (on load) from external .JSON file
• format the array in a way that plotly can display 2 lines (pm25 and pm10)

I have spend 3 days on this already, any help appreciated.

i tried the samples from other answers and gotten so far: /

I am stuck with syntax and need some help, I have simple data set that I need to plot out as timeline with 2 filled lines (Time Series with Rangeslider).

My data set format is:

[{"pm10": 12.1, "pm25": 7.0, "time": "13.08.2018 12:25:09"}, {"pm25": 6.6, "pm10": 11.1, "time": "13.08.2018 12:30:49"}, {"pm10": 12.6, "pm25": 6.2, "time": "13.08.2018 16:59:06"},   {"pm10": 9.2, "pm25": 5.8, "time": "13.08.2018 19:37:01"}, {"pm25": 5.1, "pm10": 8.7, "time": "13.08.2018 19:42:46"},   {"pm10": 7.3, "pm25": 5.5, "time": "13.08.2018 21:42:23"}, {"pm25": 5.1, "pm10": 7.1, "time": "13.08.2018 21:47:56"}, {"pm10": 8.3, "pm25": 5.5, "time": "13.08.2018 21:53:28"}]

I have done everything to make the JSON in this format, so I cant figure out how to:

• grab live data (on load) from external .JSON file
• format the array in a way that plotly can display 2 lines (pm25 and pm10)

I have spend 3 days on this already, any help appreciated.

i tried the samples from other answers and gotten so far: https://jsfiddle/v15wmeuL/2/

• javascript
• json
• plotly

• 3 Please show what you have tried. – Scott Hunter Commented Aug 14, 2018 at 10:13
• Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. – Quentin Commented Aug 14, 2018 at 10:16
• We're happy to help you, but your question is too vague for anybody being able to do so. We have no code, no context, no information. – Jeremy Thille Commented Aug 14, 2018 at 10:23

3 Answers 3

To grab data from external JSON, look at xmlHttpRequests or an equivalent.

I made some adaptations to your code that displays the data you wanted as two curves:

let trace1 = {
  x: [],
  y: [],
  mode: "lines"
};
let trace2 = {
  x: [],
  y: [],
  mode: "lines"
};
data.forEach(function(val) {
  trace1.x.push(val["time"]);
  trace1.y.push(val["pm25"]);
  trace2.x.push(val["time"]);
  trace2.y.push(val["pm10"]);
});
Plotly.newPlot('AQI', [trace1, trace2]);

If you are using JQuery, then below syntax would be helpful:

jQuery.ajax({
type: 'GET',
async: false,
url: '/api-data',
success: function (data) {
    let trace1 = {
        x: [],
        y: [],
        mode: "lines"
    };
    let trace2 = {
        x: [],
        y: [],
        mode: "lines"
    };
    data.forEach(function(val) {
        trace1.x.push(val["time"]);
        trace1.y.push(val["pm25"]);
        trace2.x.push(val["time"]);
        trace2.y.push(val["pm10"]);
    });
    Plotly.newPlot('AQI', [trace1, trace2]);
  }
});

Awsome, the the plotting part works!

But I still cant get the data retrieval part fails.

This is what i have so far:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
     }
};

 data = xmlhttp.open("GET", 
 "http://192.168.0.170/aqi.json", true);

let trace1 = {
  x: [],
  y: [],
  mode: "lines"
  };
let trace2 = {
  x: [],
  y: [],
  mode: "lines"
  };
data.forEach(function(val) {
 trace1.x.push(val["time"]);
 trace1.y.push(val["pm25"]);
 trace2.x.push(val["time"]);
 trace2.y.push(val["pm10"]);
});
Plotly.newPlot('AQI', [trace1, trace2]);

https://jsfiddle/v15wmeuL/14/ for the plotting part. - also plotly requires specific date format - so had to amend ining data.