I really like the errorBar feature in dygraphs but I can't seem to get it work. The graph shows normally, but if I change errorBars to true, the graph is no longer drawn.
Also the annotations are not showing at all. I was able to get this work when I was "hard coding" the data, but its seems now that I'm putting it into an array its not working any longer.
function nameAnnotation(ann) {
return "(" + ann.series + ", " + ann.x + ")";
};
var data = [];
data.push([new Date("2007/01/01"),10000,1]);
data.push([new Date("2007/01/02"),9463.777815,16]);
data.push([new Date("2007/01/03"),8748.659709,31]);
data.push([new Date("2007/01/04"),7779.545394,46]);
data.push([new Date("2007/01/05"),6846.280611,61]);
data.push([new Date("2007/01/06"),6042.265704,76]);
data.push([new Date("2007/01/07"),5052.064845,91]);
data.push([new Date("2007/01/08"),4089.830899,106]);
data.push([new Date("2007/01/09"),3195.631158,121]);
data.push([new Date("2007/01/10"),2541.901849,136]);
data.push([new Date("2007/01/11"),1805.774559,151]);
data.push([new Date("2007/01/12"),1167.31813,166]);
data.push([new Date("2007/01/13"),433.566787,181]);
data.push([new Date("2007/01/14"),-475.4670651,196]);
data.push([new Date("2007/01/15"),-1171.779711,211]);
data.push([new Date("2007/01/16"),5000,226]);
data.push([new Date("2007/01/17"),4091.462451,241]);
data.push([new Date("2007/01/18"),3386.055666,256]);
data.push([new Date("2007/01/19"),2728.37301,271]);
data.push([new Date("2007/01/20"),2167.424525,286]);
data.push([new Date("2007/01/21"),1483.230149,301]);
data.push([new Date("2007/01/22"),917.4477079,316]);
data.push([new Date("2007/01/23"),179.2235937,331]);
data.push([new Date("2007-01-24"),-625.1312787,346]);
data.push([new Date("2007/01/25"),-1209.343528,361]);
data.push([new Date("2007/01/26"),-1832.497902,376]);
data.push([new Date("2007/01/27"),-2426.93031,391]);
data.push([new Date("2007/01/28"),-2940.290957,406]);
data.push([new Date("2007/01/29"),-3745.675041,421]);
data.push([new Date("2007/01/30"),-4412.335834,436]);
data.push([new Date("2007/01/31"),-5303.819068,451]);
g = new Dygraph(
document.getElementById("graphdiv"),
data
,
{
labels: [ "Date", "Series1", "Error" ],
//errorBars: true,
axisLineColor: "red",
sigma: 2.0
}
);
g.ready(function() {
g.setAnnotations([
{
series: "Series1",
icon: 'images/Money.png',
width: 35,
height: 45,
x: "2007/01/01",
shortText: "P",
text: "Pay Day"
},
{
series: "Series1",
icon: 'images/Money.png',
width: 35,
height: 45,
x: "2007/01/16",
shortText: "P",
text: "Pay Day"
},
{
series: "Series1",
icon: 'images/dollarsign.png',
width: 18,
height: 20,
x: "2007/01/14",
shortText: "O",
text: "Possible Cash Shortage"
},
{
series: "Series1",
icon: 'images/dollarsign.png',
width: 18,
height: 20,
x: "2007/01/24",
text: "Possible Cash Shortage"
},
{
series: "Series1",
icon: 'images/bill.png',
width: 18,
height: 20,
x: "2007/01/13",
text: "Car Insurance Payment"
},
{
series: "Series1",
icon: 'images/bill.png',
width: 18,
height: 20,
x: "2007/01/23",
text: "Car Loan Payment"
}
]);
});
I am unsure whether or not this is the effect you are going for, but taking a look at the examples from the documentation (http://dygraphs.com/tests/steps.html) you can see the proper way to set up your data for errorBars
Instead of that data being formatted like so: [new Date("2007/01/01"),10000,1] it should be set up like this instead:
Data Setup
[new Date("2007/01/01"),[10000,1]]
Labels Setup
labels: [ "Date", "Series1" ]
As far as annotations are concerned... again, setting those up wrong. If you look at how they are setup, it is using the Dygraph draw callback function inside of your options. Example usage of annotations:
drawCallback: function(g) {
var ann = g.annotations();
var html = "";
for (var i = 0; i < ann.length; i++) {
var name = nameAnnotation(ann[i]);
html += name + " : " + (ann[i].shortText || '(icon)') + "<br/>";
}
document.getElementById("ann").innerHTML = html;
}
See the following documentation and example fiddles for proper usage: