var datasets = [];
var extremes = {}; // series name -> [low, high]
var i, j, k;
+ var errorBars = this.attr_("errorBars");
+ var customBars = this.attr_("customBars");
+ var bars = errorBars || customBars;
+ var isValueNull = function(sample) {
+ if (!bars) {
+ return sample[1] === null;
+ } else {
+ return customBars ? sample[1][1] === null :
+ errorBars ? sample[1][0] === null : false;
+ }
+ };
// Loop over the fields (series). Go from the last to the first,
// because if they're stacked that's how we accumulate the values.
// Prune down to the desired range, if necessary (for zooming)
// Because there can be lines going to points outside of the visible area,
// we actually prune to visible points, plus one on either side.
- var errorBars = this.attr_("errorBars");
- var customBars = this.attr_("customBars");
- var bars = errorBars || customBars;
if (dateWindow) {
var low = dateWindow[0];
var high = dateWindow[1];
var pruned = [];
- var isValueNull = function(sample) {
- if (!bars) {
- return sample[1] === null;
- } else {
- return customBars ? sample[1][1] === null :
- errorBars ? sample[1][0] === null : false;
- }
- };
// TODO(danvk): do binary search instead of linear search.
// TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
);
</script>
+ <h3>Encoding a gap</h3>
+ <p>There's one extra wrinkle. What if one of the series has a missing
+ value, i.e. what if your series are something like </p>
+
+ <table><tr>
+ <td valign=top>
+ <table>
+ <table class=thinborder>
+ <tr><th>x</th><th>A</th></tr>
+ <tr><td>2</td><td>2</td></tr>
+ <tr><td>4</td><td>4</td></tr>
+ <tr><td>6</td><td>(gap)</td></tr>
+ <tr><td>8</td><td>8</td></tr>
+ <tr><td>10</td><td>10</td></tr>
+ </table>
+ </td>
+ <td valign=top style="padding-left:25px;">
+ <table class=thinborder>
+ <tr><th>x</th><th>B</th></tr>
+ <tr><td>1</td><td>3</td></tr>
+ <tr><td>3</td><td>5</td></tr>
+ <tr><td>5</td><td>7</td></tr>
+ </table>
+ </td>
+ </tr></table>
+
+ <div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
+ <p>The gap would normally be encoded as a null, or missing value. But when you use <code>connectSeparatedPoints</code>, that has a special meaning. Instead, you have to use <code>NaN</code>. This is a bit of a hack, but it gets the job done.</p>
+
+ <script type="text/javascript">
+ g2 = new Dygraph(
+ document.getElementById("graph3"),
+"x,A,B \n" +
+"1,,3 \n" +
+"2,2, \n" +
+"3,,5 \n" +
+"4,4, \n" +
+"5,,7 \n" +
+"6,NaN, \n" +
+"8,8, \n" +
+"10,10, \n"
+ , {
+ connectSeparatedPoints: true,
+ drawPoints: true
+ }
+ );
+ </script>
+
+ <table><tr>
+ <td valign=top>
+ (CSV)
+ <pre>x,A,B
+1,,3
+2,2,
+3,,5
+4,4,
+5,,7
+6,NaN,
+8,8,
+10,10,</pre>
+ </td>
+ <td valign=top style="padding-left: 25px;">
+ (native)
+ <pre>[ [1, null, 3],
+ [2, 2, null],
+ [3, null, 5],
+ [4, 4, null],
+ [5, null, 7],
+ [6, NaN, null],
+ [8, 8, null],
+ [10, 10, null] ]</pre>
+ </td>
+ </tr></table>
+
<h3>Behavior at the edges of the panel for independent series</h3>
<p> In case only a part of the whole data is visible (e.g. after zooming in) the lines are
drawn to the respective next valid point outside the visible area. </p>
[8, 4, 2] ]</pre>
</td>
</tr></table>
-
- <h3>Encoding a gap</h3>
- <p>There's one extra wrinkle. What if one of the series has a missing
- value, i.e. what if your series are something like </p>
-
- <table><tr>
- <td valign=top>
- <table>
- <table class=thinborder>
- <tr><th>x</th><th>A</th></tr>
- <tr><td>2</td><td>2</td></tr>
- <tr><td>4</td><td>4</td></tr>
- <tr><td>6</td><td>(gap)</td></tr>
- <tr><td>8</td><td>8</td></tr>
- <tr><td>10</td><td>10</td></tr>
- </table>
- </td>
- <td valign=top style="padding-left:25px;">
- <table class=thinborder>
- <tr><th>x</th><th>B</th></tr>
- <tr><td>1</td><td>3</td></tr>
- <tr><td>3</td><td>5</td></tr>
- <tr><td>5</td><td>7</td></tr>
- </table>
- </td>
- </tr></table>
-
- <div id="graph3" style="float: right; margin-right: 50px; width: 400px; height: 300px;"></div>
- <p>The gap would normally be encoded as a null, or missing value. But when you use <code>connectSeparatedPoints</code>, that has a special meaning. Instead, you have to use <code>NaN</code>. This is a bit of a hack, but it gets the job done.</p>
-
- <script type="text/javascript">
- g2 = new Dygraph(
- document.getElementById("graph3"),
-"x,A,B \n" +
-"1,,3 \n" +
-"2,2, \n" +
-"3,,5 \n" +
-"4,4, \n" +
-"5,,7 \n" +
-"6,NaN, \n" +
-"8,8, \n" +
-"10,10, \n"
- , {
- connectSeparatedPoints: true,
- drawPoints: true
- }
- );
- </script>
-
- <table><tr>
- <td valign=top>
- (CSV)
- <pre>x,A,B
-1,,3
-2,2,
-3,,5
-4,4,
-5,,7
-6,NaN,
-8,8,
-10,10,</pre>
- </td>
- <td valign=top style="padding-left: 25px;">
- (native)
- <pre>[ [1, null, 3],
- [2, 2, null],
- [3, null, 5],
- [4, 4, null],
- [5, null, 7],
- [6, NaN, null],
- [8, 8, null],
- [10, 10, null] ]</pre>
- </td>
- </tr></table>
</body>
</html>