EDIT: I figured it out!
Hi guys.
I’m working on a school project right now and I am struggling with this task.
I am working on an arduino project, that measures temperature and humidity.
In this step of the project, I am trying to graph the data (that is already stored on a server in a CSV file) with plotly.js.
I’ve researched about this topic for a while and found a way of using “Ajax Call” to enter my data from the CSV file into my the graph.
I have managed to get the graph working with one trace (either temperature or humidity) but cannot figure out a way to get it working with two traces (with both temperature and humidty).
In advance I have to say, that I am rather new to programming and would appreciate any help very much.
This is the graph for the temperature
And Humidity
Edit: I figured it out!
This is the Code for the Graph with two traces, that I have been working on
function makeplot() {
Plotly.d3.csv("http://angebote.zembi.ch/andi/luis/ma/Messdaten.csv", function(data){ processData(data) } );
};
function processData(allRows) {
var n = [], t = [], x = [], h = [], standard_deviation = [];
for (var i=0; i<allRows.length; i++) {
row = allRows[i];
n.push( row["n"] );
t.push( row["t"] );
x.push( row["n"] );
h.push( row["h"] );
}
console.log( 'X',n, 'Y',t,'1',x, '2',h, 'SD',standard_deviation );
makePlotly( n, t, x, h, standard_deviation );
}
function makePlotly( n, t, x, h, standard_deviation ){
var plotDiv = document.getElementById("plot");
var trace1 = {
x: n,
y: t,
type: 'scatter'
};
var trace2 = {
x: n,
y: h,
type: 'scatter'
};
var data = [trace1, trace2, standard_deviation];
Plotly.newPlot('myDiv1', data);
}
makeplot();
This is an example of my CSV file
n,t,h
1,21.2,60
2,21.4,59.5
Thank you in advance, Luis