Hot to plot datetime with on/off on y axis

plotly.js
1

Hello,
I am using plotly.js to plot in a step-chart all the time my website urls were online/offline.
This my initial code:

var chart_data_1 = {
	x: [0,1,2,3,4,5],
	y: [0, 1, 1, 0, 1, 0, 0, 0],
	type: 'scatter',
	line: {"shape": 'hv'},
	mode: 'lines',
	name: 'value'
};

var chart_total_data = [chart_data_1];

var layout = {
	yaxis: {
		tickformat: ',d'
	},
	xaxis: {
		tickformat: ',d'
	}
}

Plotly.plot(gd,  {
    data: chart_total_data,
    layout: layout
});

and this is the output I have:

plot
plot1547×373 2.25 KB

My question is: how can I plot datetime instead of static numbers on y axis with horizontal scrolling (since I have hundreds of records)?
Thanks.

2

Hi @HarryPlotter welcoem to the forums.

I’m not sure if I understand your question. Does this help?

3

Hi @AIMPED,
I am using “Basic Time Series” and it seems to work.
So, how can I enable a bar to scroll horizontally?

Furthermore,
I am trying to overlap 2 values as shown in the following image:

overlap
overlap1452×370 4.59 KB

Is there a way to color intersection of the two values?

4

I’m not sure, try searching here:

5

Hello @AIMPED,
I tried to follow examples but the first example (Filled area plots in JavaScript) fills each value, even if two values are not both “1”.
I would like to obtain something like this attached (see manually green fill):

image
image1456×344 7.32 KB

Besides, is there a way to enable an horizontal scrolling bar?

Thanks

6

Hi,

as workaround you could create an additional trace where you calculate the overlap manually.

Concerning the vertical scrollbar: are you referring to a range slider?

1 Like