Plotting lines+markers Angular JS

plotly.js
1

I have having issues plotting 2 line+marks traces.
This is the code:

simpleChart(temp, hum, time, data) {


console.log(temp);
console.log(time);
console.log(hum);


  var trace1 = {
  x: time,
  y: hum,
  mode: 'lines+markers'

}
var trace2 = {
  x:time,
  y:temp,
  mode: 'lines+markers'

}
//const lineDiv = document.getElementById('line-chart');
  //const element = this.el.nativeElement

  const datag = [trace1, trace2]


  const style = {
    margin: { t: 0 }
  }
Plotly.plot('myDiv', datag, style);
}

55
Screen Shot 2018-02-12 at 13.23.55.png1247×780 97.5 KB

Data from X and Y match but for some reason they are categorised in different traces.
2 Lines+marks are desired, if I change the mode to Lines the graph appears empty.

2

That’s correct. Line traces with only a single point won’t show up (you can’t draw a line with a single point).

You should try to concatenate your data arrays into a coordinate arrays of more than one value.

3

any tips on how to do that considering the code I provided ?

4

Judging by the number of traces, looks like you’re calling your simpleChart more than once, correct?

If so, something like:

var x = [];
var y0 = [];
var y1 = [];

for (var i = 0; i < N; i++) {
  x = x.concat(time);
  y0 = y0.concat(hum);
  y1 = y1.concat(temp);
}

Plotly.plot(lineDiv, [{
  x: x,
  y: y0
}, {
  x: x,
  y: y1
}]);

should get you close.

5

No, its just that Data is coming from multiple documents so plotly does not join them.
Still having issues while trying your solution, cannot resolve ‘N’ .

6

That would be the number of documents in your case.