Continuous Error Bars in JavaScript
How to add D3.js-based continuous error bars to a line, scatter, or bar chart.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.
var trace1 = {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
y: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
fill: "tozerox",
fillcolor: "rgba(0,100,80,0.2)",
line: {color: "transparent"},
name: "Fair",
showlegend: false,
type: "scatter"
};
var trace2 = {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
y: [5.5, 3, 5.5, 8, 6, 3, 8, 5, 6, 5.5, 4.75, 5, 4, 7, 2, 4, 7, 4.4, 2, 4.5],
fill: "tozerox",
fillcolor: "rgba(0,176,246,0.2)",
line: {color: "transparent"},
name: "Premium",
showlegend: false,
type: "scatter"
};
var trace3 = {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
y: [11, 9, 7, 5, 3, 1, 3, 5, 3, 1, -1, 1, 3, 1, -0.5, 1, 3, 5, 7, 9],
fill: "tozerox",
fillcolor: "rgba(231,107,243,0.2)",
line: {color: "transparent"},
name: "Ideal",
showlegend: false,
type: "scatter"
};
var trace4 = {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
line: {color: "rgb(0,100,80)"},
mode: "lines",
name: "Fair",
type: "scatter"
};
var trace5 = {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [5, 2.5, 5, 7.5, 5, 2.5, 7.5, 4.5, 5.5, 5],
line: {color: "rgb(0,176,246)"},
mode: "lines",
name: "Premium",
type: "scatter"
};
var trace6 = {
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [10, 8, 6, 4, 2, 0, 2, 4, 2, 0],
line: {color: "rgb(231,107,243)"},
mode: "lines",
name: "Ideal",
type: "scatter"
};
var data = [trace1, trace2, trace3, trace4, trace5, trace6];
var layout = {
paper_bgcolor: "rgb(255,255,255)",
plot_bgcolor: "rgb(229,229,229)",
xaxis: {
gridcolor: "rgb(255,255,255)",
range: [1, 10],
showgrid: true,
showline: false,
showticklabels: true,
tickcolor: "rgb(127,127,127)",
ticks: "outside",
zeroline: false
},
yaxis: {
gridcolor: "rgb(255,255,255)",
showgrid: true,
showline: false,
showticklabels: true,
tickcolor: "rgb(127,127,127)",
ticks: "outside",
zeroline: false
}
};
Plotly.newPlot('myDiv', data, layout);
function random_date(start, end, mul)
{
return new Date(start.getTime() + mul * (end.getTime() - start.getTime()));
}
function date_list(y1,m1,d1,y2,m2,d2,count)
{
var a =[];
for(i=0;i<count;i++)
{
a.push(random_date(new Date(y1, m1, d1), new Date(y2,m2,d2),i));
}
return a;
}
function random_number(num , mul)
{
var value = [ ];
for(i=0;i<=num;i++)
{
var rand = Math.random() * mul;
value.push(rand);
}
return value;
}
var trace1 = {
x: date_list(2001,01,01,2001,02,01,50),
y: random_number(50,20),
line: {width: 0},
marker: {color: "444"},
mode: "lines",
name: "Lower Bound",
type: "scatter"
};
var trace2 = {
x: date_list(2001,01,01,2001,02,01,50),
y: random_number(50,21),
fill: "tonexty",
fillcolor: "rgba(68, 68, 68, 0.3)",
line: {color: "rgb(31, 119, 180)"},
mode: "lines",
name: "Measurement",
type: "scatter"
};
var trace3 = {
x: date_list(2001,01,01,2001,02,01,50),
y: random_number(50,22),
fill: "tonexty",
fillcolor: "rgba(68, 68, 68, 0.3)",
line: {width: 0},
marker: {color: "444"},
mode: "lines",
name: "Upper Bound",
type: "scatter"
}
var data = [trace1, trace2, trace3];
var layout = {
showlegend: false,
title: {
text: "Continuous, variable value error bars<br>Notice the hover text!"
},
yaxis: {
title: {
text: "Wind speed (m/s)"
}
}
};
Plotly.newPlot('myDiv', data, layout);