Black Lives Matter. Please consider donating to Black Girls Code today.

Add labels to time series read from csv

I have a chart with
x-axis: time
y-axis: values

here’s a link to it

http://pedro-vicente.net:90/js/plotly.js/plotly.chart_01.html
and an image is attached

the values are read from a CSV file, in this format

time,DJI
2018-01-26-10:00:00,26472
2018-01-26-11:00:00,26461

using this trace for “data” object

var trace1 = {
  x: x_time,
  y: y_price,
  mode: 'lines',
  type: 'scatter'
};

now I want for some selected time points to add a marker for that date,
that corresponds also to a Y value,
that displays a string;
in this case the strings are either “0” , “1”, “2”, etc

how could I accomplish this?

I am following the approaches:

have a separate CSV file with only the dates for the selected points and make this
another trace

like

var data = [trace1, trace2];

time,wave
2018-06-11-13:00:00,0
2018-06-28-10:30:00,1

that still leaves the problem that the “0” and “1” above must be interpreted as a string.
They Y value is actually the same as in trace1 , so this seems that will not do it.
another problem is that another CSV file must be read…

  1. Another solution

Add a third column , like this

time,DJI
2018-01-26-10:00:00,26472,“no_value”
2018-01-26-11:00:00,26461,“0”
2018-01-26-10:00:00,26472,“no_value”

for the time series most of the values for the label are non existent;
this could be displayed as “no_value”

not sure if this would work either
I have been using plotly.js for exactly 6 hours, so anyy help is much appreciated … thanks

complete code

Plotly.d3.csv("DJI_2018_06_minuette.3600.txt.csv", function(buf){ 
var x_time = [], y_price = [];
for (var i = 0; i < buf.length; i++) {
  row = buf[i];
  x_time.push( row['time'] );
  y_price.push( row['DJI'] );
}

var trace1 = {
  x: x_time,
  y: y_price,
  mode: 'lines',
  type: 'scatter'
};

var trace2 = {
  x: x_time,
  y: [25000],
  mode: 'markers',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  yaxis: {
     tickformat: '.0' 
  }
};

Plotly.newPlot('div_id', data, layout);
} );

If I understand correctly, you’re looking for

var trace2 = {
  x: x_time,
  y: [25000],
  text: '0',
  mode: 'markers+text',
  type: 'scatter'
};

yes, that did it
here’s the corrected version

so far I am impressed with plot.ly