--- /dev/null
+Gallery.register(
+ 'avoid-min-zero',
+ {
+ name: "Avoid Min Zero",
+ setup: function(parent) {
+ parent.innerHTML =
+ "<p>1: Line chart with axis at zero problem:</p><div id='graph1'></div> " +
+ "<p>2: Step chart with axis at zero problem:</p><div id='graphd2'></div> " +
+ "<p>3: Line chart with <code>avoidMinZero</code> option:</p><div id='graph3'></div> " +
+ "<p>4: Step chart with <code>avoidMinZero</code> option:</p><div id='graphd4'></div> ";
+ },
+ run: function() {
+ var g1 = new Dygraph(document.getElementById("graph1"),
+ "Date,Temperature\n" +
+ "2008-05-07,0\n" +
+ "2008-05-08,1\n" +
+ "2008-05-09,0\n" +
+ "2008-05-10,0\n" +
+ "2008-05-11,3\n" +
+ "2008-05-12,4\n"
+ )
+ var g2 = new Dygraph(document.getElementById("graphd2"),
+ "Date,Temperature\n" +
+ "2008-05-07,0\n" +
+ "2008-05-08,1\n" +
+ "2008-05-09,0\n" +
+ "2008-05-10,0\n" +
+ "2008-05-11,3\n" +
+ "2008-05-12,4\n",
+ {
+ stepPlot: true
+ }
+ )
+ var g3 = new Dygraph(document.getElementById("graph3"),
+ "Date,Temperature\n" +
+ "2008-05-07,0\n" +
+ "2008-05-08,1\n" +
+ "2008-05-09,0\n" +
+ "2008-05-10,0\n" +
+ "2008-05-11,3\n" +
+ "2008-05-12,4\n",
+ {
+ avoidMinZero: true
+ }
+ )
+ var g4 = new Dygraph(document.getElementById("graphd4"),
+ "Date,Temperature\n" +
+ "2008-05-07,0\n" +
+ "2008-05-08,1\n" +
+ "2008-05-09,0\n" +
+ "2008-05-10,0\n" +
+ "2008-05-11,3\n" +
+ "2008-05-12,4\n",
+ {
+ stepPlot: true,
+ avoidMinZero: true
+ }
+ )
+ }
+});
+++ /dev/null
-Gallery.register(
- 'avoid-min-zero',
- {
- name: "Avoid Min Zero",
- setup: function(parent) {
- parent.innerHTML =
- "<p>1: Line chart with axis at zero problem:</p><div id='graph1'></div> " +
- "<p>2: Step chart with axis at zero problem:</p><div id='graphd2'></div> " +
- "<p>3: Line chart with <code>avoidMinZero</code> option:</p><div id='graph3'></div> " +
- "<p>4: Step chart with <code>avoidMinZero</code> option:</p><div id='graphd4'></div> ";
- },
- run: function() {
- var g1 = new Dygraph(document.getElementById("graph1"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n"
- )
- var g2 = new Dygraph(document.getElementById("graphd2"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- stepPlot: true
- }
- )
- var g3 = new Dygraph(document.getElementById("graph3"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- avoidMinZero: true
- }
- )
- var g4 = new Dygraph(document.getElementById("graphd4"),
- "Date,Temperature\n" +
- "2008-05-07,0\n" +
- "2008-05-08,1\n" +
- "2008-05-09,0\n" +
- "2008-05-10,0\n" +
- "2008-05-11,3\n" +
- "2008-05-12,4\n",
- {
- stepPlot: true,
- avoidMinZero: true
- }
- )
- }
-});
Gallery.register(
- 'border-test',
+ 'border',
{
name: "Border test",
title: 'Graph stays within the border',
+++ /dev/null
-Gallery.register(
- 'callbacks',
- {
- name: "Callbacks",
- title: "Hover, click and zoom to test the callbacks.",
- setup: function(parent) {
- parent.innerHTML =
- "<div id='div_g' style='width:600px; height:300px;'></div>" +
- "<button id='clear'>Clear list<Button>" +
- "<input type='checkbox' id='highlight' checked><label for='highlight'> Show 'highlight' events</label>" +
- "<input type='checkbox' id='unhighlight' checked><label for='unhighlight'>Show 'unhighlight' events</label>" +
- "<input type='checkbox' id='showLabels' checked>" +
- "<label for='showLabels'> Show Labels on highlight</label>" +
- "<div id='status' style='width:100%; height:200px;'></div>";
- },
- run: function() {
- var showLabels = document.getElementById('showLabels');
- showLabels.onclick = function() {
- g.updateOptions({showLabelsOnHighlight: showLabels.checked});
- }
-
- var s = document.getElementById("status");
- var clearStatus = function() {
- s.innerHTML = '';
- }
- document.getElementById('clear').onclick = clearStatus;
-
- var g = null;
- pts_info = function(e, x, pts, row) {
- var str = "(" + x + ") ";
- for (var i = 0; i < pts.length; i++) {
- var p = pts[i];
- if (i) str += ", ";
- str += p.name + ": " + p.yval;
- }
-
- var x = e.offsetX;
- var y = e.offsetY;
- var dataXY = g.toDataCoords(x, y);
- str += ", (" + x + ", " + y + ")";
- str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
- str += ", row #"+row;
-
- return str;
- };
-
- g = new Dygraph(
- document.getElementById("div_g"),
- NoisyData, {
- rollPeriod: 7,
- showRoller: true,
- errorBars: true,
-
- highlightCallback: function(e, x, pts, row) {
- if (document.getElementById('highlight').checked) {
- s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
- }
- },
-
- unhighlightCallback: function(e) {
- if (document.getElementById('unhighlight').checked) {
- s.innerHTML += "<b>Unhighlight</b><br/>";
- }
- },
-
- clickCallback: function(e, x, pts) {
- s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
- },
-
- pointClickCallback: function(e, p) {
- s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
- },
-
- zoomCallback: function(minX, maxX, yRanges) {
- s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
- },
-
- drawCallback: function(g) {
- s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
- }
- }
- );
- }
- });
--- /dev/null
+Gallery.register(
+ 'callbacks',
+ {
+ name: "Callbacks",
+ title: "Hover, click and zoom to test the callbacks.",
+ setup: function(parent) {
+ parent.innerHTML =
+ "<div id='div_g' style='width:600px; height:300px;'></div>" +
+ "<button id='clear'>Clear list<Button>" +
+ "<input type='checkbox' id='highlight' checked><label for='highlight'> Show 'highlight' events</label>" +
+ "<input type='checkbox' id='unhighlight' checked><label for='unhighlight'>Show 'unhighlight' events</label>" +
+ "<input type='checkbox' id='showLabels' checked>" +
+ "<label for='showLabels'> Show Labels on highlight</label>" +
+ "<div id='status' style='width:100%; height:200px;'></div>";
+ },
+ run: function() {
+ var showLabels = document.getElementById('showLabels');
+ showLabels.onclick = function() {
+ g.updateOptions({showLabelsOnHighlight: showLabels.checked});
+ }
+
+ var s = document.getElementById("status");
+ var clearStatus = function() {
+ s.innerHTML = '';
+ }
+ document.getElementById('clear').onclick = clearStatus;
+
+ var g = null;
+ pts_info = function(e, x, pts, row) {
+ var str = "(" + x + ") ";
+ for (var i = 0; i < pts.length; i++) {
+ var p = pts[i];
+ if (i) str += ", ";
+ str += p.name + ": " + p.yval;
+ }
+
+ var x = e.offsetX;
+ var y = e.offsetY;
+ var dataXY = g.toDataCoords(x, y);
+ str += ", (" + x + ", " + y + ")";
+ str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
+ str += ", row #"+row;
+
+ return str;
+ };
+
+ g = new Dygraph(
+ document.getElementById("div_g"),
+ NoisyData, {
+ rollPeriod: 7,
+ showRoller: true,
+ errorBars: true,
+
+ highlightCallback: function(e, x, pts, row) {
+ if (document.getElementById('highlight').checked) {
+ s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
+ }
+ },
+
+ unhighlightCallback: function(e) {
+ if (document.getElementById('unhighlight').checked) {
+ s.innerHTML += "<b>Unhighlight</b><br/>";
+ }
+ },
+
+ clickCallback: function(e, x, pts) {
+ s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
+ },
+
+ pointClickCallback: function(e, p) {
+ s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
+ },
+
+ zoomCallback: function(minX, maxX, yRanges) {
+ s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
+ },
+
+ drawCallback: function(g) {
+ s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
+ }
+ }
+ );
+ }
+ });
-// Use this as a template for new Gallery entries.
Gallery.register(
'independent-series',
{
<script src="dygraph-simple.js"></script>
<script src="demo.js"></script>
<script src="border.js"></script>
- <script src="callback.js"></script>
- <script src="avoidMinZero.js"></script>
+ <script src="callbacks.js"></script>
+ <script src="avoid-min-zero.js"></script>
<script src="color-cycle.js"></script>
<script src="color-visibility.js"></script>
<script src="two-axes.js"></script>
-// Use this as a template for new Gallery entries.
Gallery.register(
'linear-regression',
{
-// Use this as a template for new Gallery entries.
Gallery.register(
'link-interaction',
{
document.getElementById('left').onclick = function() { pan(-1); };
document.getElementById('right').onclick = function() { pan(+1); };
}
- });
\ No newline at end of file
+ });
-// Use this as a template for new Gallery entries.
Gallery.register(
'per-series',
{
-// Use this as a template for new Gallery entries.
Gallery.register(
'plotter',
{
-// Use this as a template for new Gallery entries.
Gallery.register(
'synchronize',
{