Hi I have couple of requirements which i am unable to find an answer in plotly.js
Different Date Formats: Say Graph needs to be plotted for 'Feb 21, Feb 22, Feb 23 .. for a week,Week 2, Week 3, Week 4 .. for a year in the same X Axis, will plotly be helpful. In such case, I need to display dates while loading graph and when user scrolls to the right, is it possible to show graph plotted for Weeks
Customized BG Color : I know plot_bgcolor of plotly helps in changing the background color. Is it possible to change the background color for only half of the graph based on x,y coordinates
type:'lines+markers' extra date: When 'lines+markers' is used and the x Axis is Date..Say Feb 3, Feb 4, Feb 5, then Graph is starting from Feb 1 and ending with Feb 7. When it is only 'lines' X Axis starts from Feb 3 and ends by Feb 5.
Here is the piece of code explaining all the three cases
var trace1 = {
x: ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8', 'Week 9', 'Week 10', 'Week 11', 'Week 12', 'Week 13', 'Week 14', 'Week 15', 'Week 16', 'Week 17', 'Week 18', 'Week 19'],
y: [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5, -16.9, -12, -6.1, -6.6, -7.9, -10.8, -14.8, -11, -4.4, -1.3, -1.1],
mode: 'lines+markers',
type: 'scatter',
name: '2000'
};
var data = [ trace1 ];
var layout = {
xaxis: {
type: 'date',
title: 'January Weather'
},
yaxis: {
title: 'Daily Mean Temperature'
},
title:'2000 Toronto January Weather',
plot_bgcolor: '#c7c7c7'
};
Plotly.plot('myDiv', data, layout);<head>
<script src=".min.js"></script>
</head>
<div id="myDiv" style="width:100%;height:400px;"></div>Hi I have couple of requirements which i am unable to find an answer in plotly.js
Different Date Formats: Say Graph needs to be plotted for 'Feb 21, Feb 22, Feb 23 .. for a week,Week 2, Week 3, Week 4 .. for a year in the same X Axis, will plotly be helpful. In such case, I need to display dates while loading graph and when user scrolls to the right, is it possible to show graph plotted for Weeks
Customized BG Color : I know plot_bgcolor of plotly helps in changing the background color. Is it possible to change the background color for only half of the graph based on x,y coordinates
type:'lines+markers' extra date: When 'lines+markers' is used and the x Axis is Date..Say Feb 3, Feb 4, Feb 5, then Graph is starting from Feb 1 and ending with Feb 7. When it is only 'lines' X Axis starts from Feb 3 and ends by Feb 5.
Here is the piece of code explaining all the three cases
var trace1 = {
x: ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8', 'Week 9', 'Week 10', 'Week 11', 'Week 12', 'Week 13', 'Week 14', 'Week 15', 'Week 16', 'Week 17', 'Week 18', 'Week 19'],
y: [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5, -16.9, -12, -6.1, -6.6, -7.9, -10.8, -14.8, -11, -4.4, -1.3, -1.1],
mode: 'lines+markers',
type: 'scatter',
name: '2000'
};
var data = [ trace1 ];
var layout = {
xaxis: {
type: 'date',
title: 'January Weather'
},
yaxis: {
title: 'Daily Mean Temperature'
},
title:'2000 Toronto January Weather',
plot_bgcolor: '#c7c7c7'
};
Plotly.plot('myDiv', data, layout);<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<div id="myDiv" style="width:100%;height:400px;"></div>Could someone please explain and help me in finding solution for these
Share Improve this question asked Feb 24, 2017 at 22:12 NewBieNewBie 2031 gold badge3 silver badges6 bronze badges 2- That's pretty challenging :) for question 1: do you want to the axis to be scaled correctly, i.e. week one to week two has the same distance as 01/01/2000 to 01/08/2000 or it doesn't matter? – Maximilian Peters Commented Feb 24, 2017 at 22:18
- Yes. It has to be scaled properly. On load of the graph, it should only show day level Graph. Once it is scrolled to right, graph should show up week data with weeks in X Axis – NewBie Commented Feb 24, 2017 at 22:34
1 Answer
Reset to default 4The only possible I can see is to use a subplot with two different x-axis and a shared y-axis.
First we need to convert the dates to milliseconds.
var dates = ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-21', '2000-01-28', '2000-02-04', '2000-02-11', '2000-02-18', '2000-02-25'];
for (var i = 0; i < dates.length; i += 1){
times.push(new Date(dates[i]).getTime());
}
Now define an arbitrary point until where we plot days and afterwards we show only weeks.
var limit_days = 6;
We use this limit to slice our raw data in new x and y-values and define a point on the graph where the transition happens.
var r = (times[limit_days] - times[0])/(times[times.length - 1] - times[0]);
The different x-axes get different layouts. Each axis gets its own range and domain.
layout = {
xaxis: {
title: 'Daily Mean Temperature',
type: 'date',
domain: [0, r],
tickformat: '%b %d',
range: [times[0] - half_day, times[limit_days]]
},
xaxis2: {
type: 'date',
title: 'Weakly Mean Temperature',
domain: [r, 1],
tickformat: 'Week %U',
range: [times[limit_days], times[times.length - 1] + half_day]
}}
trace1 = {
yaxis: 'y',
xaxis: 'x',
};
trace2 = {
yaxis: 'y',
xaxis: 'x2',
};
The custom background is added via shapes in the background.
shapes: [
{
type: 'rect',
layer: 'below',
x0: 0,
y0: Math.min(...temps),
x1: r,
y1: Math.max(...temps),
xref: 'paper',
yref: 'y',
fillcolor: '#c7c7c7'
},
{
type: 'rect',
layer: 'below',
x0:r,
y0:Math.min(...temps),
x1:1,
y1:Math.max(...temps),
xref:'paper',
yref:'y',
fillcolor: '#555555'
}]
var dates = ['2000-01-01', '2000-01-02', '2000-01-03', '2000-01-04', '2000-01-05', '2000-01-06', '2000-01-07', '2000-01-08', '2000-01-09', '2000-01-10', '2000-01-11', '2000-01-12', '2000-01-13', '2000-01-14', '2000-01-21', '2000-01-28', '2000-02-04', '2000-02-11', '2000-02-18', '2000-02-25'];
var temps = [4.3, 8.2, 4.1, 5.6, -3, -0.2, 0.3, 0.4, 4.1, 5, 4.6, -0.2, -8.5, -9.1, -2.7, -2.7, -17, -11.3, -5.5, -6.5]
var times = [];
var limit_days = 6;
var half_day = 12 * 60 * 60 * 1000;
for (var i = 0; i < dates.length; i += 1) {
times.push(new Date(dates[i]).getTime());
}
var r = (times[limit_days] - times[0]) / (times[times.length - 1] - times[0]);
var layout = {
xaxis: {
title: 'Daily Mean Temperature',
type: 'date',
domain: [0, r],
tickformat: '%b %d',
range: [times[0] - half_day, times[limit_days]]
},
xaxis2: {
type: 'date',
title: 'Weakly Mean Temperature',
domain: [r, 1],
tickformat: 'Week %U',
range: [times[limit_days], times[times.length - 1] + half_day]
},
yaxis: {
range: [1.1 * Math.min(...temps), 1.1 * Math.max(...temps)],
title: 'Daily Mean Temperature'
},
title: '2000 Toronto January Weather',
shapes: [{
type: 'rect',
layer: 'below',
x0: 0,
y0: Math.min(...temps),
x1: r,
y1: Math.max(...temps),
xref: 'paper',
yref: 'y',
fillcolor: '#c7c7c7'
}, {
type: 'rect',
layer: 'below',
x0: r,
y0: Math.min(...temps),
x1: 1,
y1: Math.max(...temps),
xref: 'paper',
yref: 'y',
fillcolor: '#555555'
}]
};
var trace1 = {
x: times.slice(0, limit_days + 1),
y: temps.slice(0, limit_days + 1),
mode: 'lines+markers',
type: 'scatter',
name: 'days',
marker: {
color: 'blue'
},
yaxis: 'y',
xaxis: 'x',
};
var trace2 = {
x: times.slice(limit_days, times.length),
y: temps.slice(limit_days, temps.length),
mode: 'lines',
type: 'scatter',
name: 'weeks',
marker: {
color: 'red'
},
yaxis: 'y',
xaxis: 'x2',
};
var data = [trace1, trace2]
Plotly.plot('myDiv', data, layout);<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>