Synopsis: A graph that contains null array values displays correctly in Firefox, but not in IE or Chrome. However, a subset of the data containing null values displays correctly in all three browsers.
I've created a graph that renders correctly on Win7 in Firefox (v20.0.1), IE10 (v10.0.9200, update versions 10.0.4), and Chrome (v26.0.1410.64), where it looks like this:
Notice the diagonal line between Detector D3 on 22 Oct. and Detector D1 on 26 Dec. We have a business rule that there must always be an intermediate detection on the adjacent detector in order to display a connector; otherwise, I insert a null value as shown below to "disconnect" the detectors.
[ new Date("2012/10/22 03:26:59"), 3],
[ new Date("2012/10/22 03:27:60"), null],
[ new Date("2012/12/26 01:18:10"), 1],
This works swell in Firefox:
...but not in Chrome or IE:
Curiously, a subset of the data displays correctly in all three browsers.
The only difference between DynChartDemo and DynChartDemo2 is the addition of null records in the data array. The only difference between DynChartDemo2 and DynChartDemo_small (presented below) is that I've removed about 1500 data records from around the remaining array records.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<div style="font-family:tahoma,arial,sans-serif;text-size:120%;border:2px solid;border-radius:15px;background-color:Bisque;padding:4px;width:420px">
<B><I> Click & Drag</i></b> to select an area to magnify.<br>
<B><I> Shift-Click & Drag</i></b> to pan.<br>
<B><I> Double-Click</i></b> to restore (zoom out to) the original view.</div>
<P/>
<table><row>
<td><div id="graphdiv2" style="width:1200px; height:300px;border:2px solid;border-radius:15px;background-color:Bisque;"></div></td>
<td valign="top"><div id="chartLabelsContainer" style="padding:4px;width:140px;border:1px solid black;border-radius:10px;background-color:Bisque;box-shadow:4px 4px 4px #888;"></div></td>
</row></table>
<script>
var vGraph2 = new Dygraph(document.getElementById("graphdiv2"),
[
[ new Date("2012/10/01 00:00:00"),null ],
[ new Date("2012/10/21 14:30:32"), 1],
[ new Date("2012/10/21 14:30:43"), 1],
[ new Date("2012/10/21 14:32:31"), 1],
[ new Date("2012/10/21 14:32:51"), 1],
[ new Date("2012/10/21 14:33:09"), 1],
[ new Date("2012/10/21 18:22:16"), 1],
[ new Date("2012/10/21 18:22:20"), 1],
[ new Date("2012/10/21 18:22:58"), 1],
[ new Date("2012/10/21 22:53:51"), 1],
[ new Date("2012/10/21 22:54:31"), 1],
[ new Date("2012/10/21 22:54:32"), null],
[ new Date("2012/10/21 23:02:52"), 3],
[ new Date("2012/10/21 23:07:37"), 3],
[ new Date("2012/10/21 23:16:26"), 3],
[ new Date("2012/10/21 23:19:50"), 3],
[ new Date("2012/10/21 23:29:14"), 3],
[ new Date("2012/10/21 23:30:32"), 3],
[ new Date("2012/10/21 23:36:35"), 1],
[ new Date("2012/10/21 23:38:44"), 2],
[ new Date("2012/10/21 23:50:09"), 3],
[ new Date("2012/10/21 23:53:44"), 3],
[ new Date("2012/10/21 23:59:42"), 2],
[ new Date("2012/10/22 00:01:56"), 2],
[ new Date("2012/10/22 00:07:19"), 3],
[ new Date("2012/10/22 00:07:20"), null],
[ new Date("2012/10/22 00:31:53"), 1],
[ new Date("2012/10/22 00:33:15"), 2],
[ new Date("2012/10/22 00:42:31"), 3],
[ new Date("2012/10/22 00:42:32"), null],
[ new Date("2012/10/22 00:47:53"), 1],
[ new Date("2012/10/22 00:52:05"), 2],
[ new Date("2012/10/22 01:01:01"), 3],
[ new Date("2012/10/22 01:04:49"), 3],
[ new Date("2012/10/22 01:06:14"), 2],
[ new Date("2012/10/22 01:09:42"), 1],
[ new Date("2012/10/22 01:23:19"), 1],
[ new Date("2012/10/22 01:26:46"), 2],
[ new Date("2012/10/22 01:35:13"), 3],
[ new Date("2012/10/22 01:40:35"), 3],
[ new Date("2012/10/22 01:40:40"), 3],
[ new Date("2012/10/31 23:59:59"),null ]
],
{ //open options
labels: [ "Detection Date", "Detector"],
labelsDiv: "chartLabelsContainer",
labelsSeparateLines: true,
labelsSeparateLines: true,
title: 'Detection Events for Murray cod "Homer" at Edwards Offtake',
xlabel: 'Date',
ylabel: 'Detectors',
drawPoints: true,
pointSize: 2, //default=1
highlightCircleSize: 5, //default=3
axes: { //axes options
x: { //x-axis options
valueFormatter: function(x) {return new Date(x).strftime("%d-%b-%y %H:%M:%S");},
},
y: { //y-axis options
valueFormatter: function(y) {return ' D' + y.toPrecision(1);},
ticker: function(min, max, pixels, opts, dygraph, vals)
{return [{v:1,label:"D1"},{v:2,label:"D2"},{v:3,label:"D3"}];}
}
} //close 'axes' options
} //close options
);
</script>
</body>
</html>
Bottom Line: How can I display the entire 1500+ record data set in Chrome and IE as well as Firefox?