Menu
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
349
The 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
