name: 'Annotations',
title: 'Dynamic Annotations Demo',
setup: function(parent) {
- parent.innerHTML =
- "<p>Click any point to add an annotation to it or click 'Add Annotation'.</p>" +
- "<button id='add'>Add Annotation></button>" +
- "<button id='bottom'>Shove to bottom</button>" +
- "<div id='list'></div>" +
- "<div id='g_div'></div>" +
- "<div id='events'></div>";
+ parent.innerHTML = [
+ "<p>Click any point to add an annotation to it or click 'Add Annotation'.</p>",
+ "<button id='add'>Add Annotation></button>",
+ "<button id='bottom'>Shove to bottom</button>",
+ "<div id='list'></div>",
+ "<div id='g_div'></div>",
+ "<div id='events'></div>" ].join("\n");
},
run: function() {
name: 'Time Series Drawing Demo',
title: 'Time Series Drawing Demo',
setup: function(parent) {
- parent.innerHTML =
- "<div id='toolbar'>" +
- "<div id='tool_zoom'></div>" +
- "<div id='tool_pencil'></div>" +
- "<div id='tool_eraser'></div>" +
- "</div>" +
- "<div id='draw_div' style='width: 800px; height: 400px;'></div>" +
- "<p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from " +
- "<a href='http://www.fatcow.com/free-icons'>FatCow</a>.</p>";
+ parent.innerHTML = [
+ "<div id='toolbar'>",
+ "<div id='tool_zoom'></div>",
+ "<div id='tool_pencil'></div>",
+ "<div id='tool_eraser'></div>",
+ "</div>",
+ "<div id='draw_div' style='width: 800px; height: 400px;'></div>",
+ "<p style='font-size: 10pt'>Toolbar/cursor icons are CC-licensed from ",
+ "<a href='http://www.fatcow.com/free-icons'>FatCow</a>.</p>"].join("\n");
},
run: function() {
name: 'Dynamic Update',
title: 'Live random data',
setup: function(parent) {
- parent.innerHTML = "<div id='div_g' style='width:800px; height:400px;'></div>" +
- "<p>This test is modeled after a " +
- "<a href='http://www.highcharts.com/demo/?example=dynamic-update&theme=default'>highcharts" +
- "test</a>. New points should appear once per second. Try zooming and " +
- "panning over to the right edge to watch them show up.</p>";
+ parent.innerHTML = [
+ "<div id='div_g' style='width:800px; height:400px;'></div>",
+ "<p>This test is modeled after a ",
+ "<a href='http://www.highcharts.com/demo/?example=dynamic-update&theme=default'>highcharts",
+ "test</a>. New points should appear once per second. Try zooming and ",
+ "panning over to the right edge to watch them show up.</p>"].join("\n");
},
run: function() {
var data = [];
elem.onclick();
}
}
-};
\ No newline at end of file
+};
name: 'Highlighted Region',
title: 'Draws a time series with an unusual region highlighted',
setup: function(parent) {
- parent.innerHTML =
- "<div id='div_g' style='width:600px; height:300px;'></div>" +
- "<p>When you zoom and pan, the region remains highlighted.</p>";
+ parent.innerHTML = [
+ "<div id='div_g' style='width:600px; height:300px;'></div>",
+ "<p>When you zoom and pan, the region remains highlighted.</p>"].join("\n");
},
run: function() {
// A basic sinusoidal data series.
name: 'Independent Series',
title: 'Independent Series',
setup: function(parent) {
- parent.innerHTML =
- "<p>By using the <i>connectSeparated</i> attribute, it's possible to display a chart of several time series with completely independent x-values.</p> \
-\
- <p>The trick is to specify values for the series at the union of the x-values of all series. For one series' x values, specify <code>null</code> for each of the other series.</p> \
-\
- <div id='graph' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> \
- <p>For example, say you had two series:</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>6</td></tr> \
- <tr><td>6</td><td>4</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>7</td></tr> \
- <tr><td>5</td><td>5</td></tr> \
- </table> \
- </td> \
- </tr></table> \
-\
- <p>Then you would specify the following CSV or native data:</p> \
- <table><tr> \
- <td valign=top> \
- (CSV) \
- <pre id='csv1'></pre> \
- </td> \
- <td valign=top style='padding-left: 25px;'>\
- (native) \
- <pre id='native1'></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='graph2' 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> \
-\
- <table><tr> \
- <td valign=top> \
- (CSV) \
- <pre id='csv2'></pre> \
- </td> \
- <td valign=top style='padding-left: 25px;'> \
- (native) \
- <pre id='native2'></pre> \
- </td> \
- </tr></table>"
+ parent.innerHTML = [
+ "<p>By using the <i>connectSeparated</i> attribute, it's possible to display a chart of several time series with completely independent x-values.</p> ",
+ "",
+ "<p>The trick is to specify values for the series at the union of the x-values of all series. For one series' x values, specify <code>null</code> for each of the other series.</p> ",
+ "",
+ "<div id='graph' style='float: right; margin-right: 50px; width: 400px; height: 300px;'></div> ",
+ "<p>For example, say you had two series:</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>6</td></tr> ",
+ " <tr><td>6</td><td>4</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>7</td></tr> ",
+ " <tr><td>5</td><td>5</td></tr> ",
+ " </table> ",
+ "</td> ",
+ "</tr></table> ",
+ "",
+ "<p>Then you would specify the following CSV or native data:</p> ",
+ "<table><tr> ",
+ "<td valign=top> ",
+ "(CSV) ",
+ "<pre id='csv1'></pre> ",
+ "</td> ",
+ "<td valign=top style='padding-left: 25px;'>",
+ "(native) ",
+ "<pre id='native1'></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='graph2' 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> ",
+ "",
+ "<table><tr> ",
+ "<td valign=top> ",
+ "(CSV) ",
+ "<pre id='csv2'></pre> ",
+ "</td> ",
+ "<td valign=top style='padding-left: 25px;'> ",
+ "(native) ",
+ "<pre id='native2'></pre> ",
+ "</td> ",
+ "</tr></table>"].join("\n");
},
run: function() {
document.getElementById("csv1").textContent =
name: 'Custom interaction models',
title: 'title',
setup: function(parent) {
- parent.innerHTML =
- "<table border='1'>" +
- "<tr><td>" +
- "<b>Default interaction model</b>" +
- "<div id='div_g' style='width:600px; height:300px;'></div>" +
- "</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>" +
- "</td></tr>" +
- "<tr><td>" +
- "<b>No interaction model</b>" +
- "<div id='div_g2' style='width:600px; height:300px;'></div>" +
- "</td><td>Click and drag all you like, it won't do anything!" +
- "<div id='g2_console'></div>" +
- "</td></tr>" +
- "<tr><td>" +
- "<b>Custom interaction model</b>" +
- "<button id='restore3'>Restore Position</button>" +
- "<div id='div_g3' style='width:600px; height:300px;'></div>" +
- "</td><td>" +
- "Zoom in: double-click, scroll wheel<br/>" +
- "Zoom out: ctrl-double-click, scroll wheel<br/>" +
- "Standard Zoom: shift-click-drag" +
- "Standard Pan: click-drag<br/>" +
- "Restore zoom level: press button<br/>" +
- "</td></tr>" +
- "<tr><td>" +
- "<b>Fun model!</b>" +
- "<div id='div_g4' style='width:600px; height:300px;'></div>" +
- "</td><td>" +
- "Keep the mouse button pressed, and hover over all points" +
- "to mark them." +
- "</td></tr>" +
- "</table>";
+ parent.innerHTML = [
+ "<table border='1'>",
+ "<tr><td>",
+ "<b>Default interaction model</b>",
+ "<div id='div_g' style='width:600px; height:300px;'></div>",
+ "</td><td>Zoom: click-drag<br/>Pan: shift-click-drag<br/>Restore zoom level: double-click<br/>",
+ "</td></tr>",
+ "<tr><td>",
+ "<b>No interaction model</b>",
+ "<div id='div_g2' style='width:600px; height:300px;'></div>",
+ "</td><td>Click and drag all you like, it won't do anything!",
+ "<div id='g2_console'></div>",
+ "</td></tr>",
+ "<tr><td>",
+ "<b>Custom interaction model</b>",
+ "<button id='restore3'>Restore Position</button>",
+ "<div id='div_g3' style='width:600px; height:300px;'></div>",
+ "</td><td>",
+ "Zoom in: double-click, scroll wheel<br/>",
+ "Zoom out: ctrl-double-click, scroll wheel<br/>",
+ "Standard Zoom: shift-click-drag",
+ "Standard Pan: click-drag<br/>",
+ "Restore zoom level: press button<br/>",
+ "</td></tr>",
+ "<tr><td>",
+ "<b>Fun model!</b>",
+ "<div id='div_g4' style='width:600px; height:300px;'></div>",
+ "</td><td>",
+ "Keep the mouse button pressed, and hover over all points",
+ "to mark them.",
+ "</td></tr>",
+ "</table>"].join("\n");
},
run: function() {
name: 'Linear Regressions',
title: 'Linear Regression Demo',
setup: function(parent) {
- parent.innerHTML =
- "<p>Click the buttons to generate linear regressions over either data "+
- "series. If you zoom in and then click the regression button, the regression "+
- "will only be run over visible points. Zoom back out to see what the local "+
- "regression looks like over the full data.</p> "+
- "<div id='demodiv' style='width: 480px; height: 320px;'></div>" +
- "<div style='text-align:center; width: 480px'>" +
- "<button style='color: green;' id='ry1'>Regression (Y1)</button> " +
- "<button style='color: blue;' id='ry2'>Regression (Y2)</button> " +
- "<button id='clear'>Clear Lines</button>" +
- "</div>";
+ parent.innerHTML = [
+ "<p>Click the buttons to generate linear regressions over either data ",
+ "series. If you zoom in and then click the regression button, the regression ",
+ "will only be run over visible points. Zoom back out to see what the local ",
+ "regression looks like over the full data.</p> ",
+ "<div id='demodiv' style='width: 480px; height: 320px;'></div>",
+ "<div style='text-align:center; width: 480px'>",
+ "<button style='color: green;' id='ry1'>Regression (Y1)</button> ",
+ "<button style='color: blue;' id='ry2'>Regression (Y2)</button> ",
+ "<button id='clear'>Clear Lines</button>",
+ "</div>"].join("\n");
},
run: function() {
document.getElementById("ry1").onclick = function() { regression(1) };
{
name: 'Link Interaction',
setup: function(parent) {
- parent.innerHTML =
- "<div id='div_g'></div>" +
- "<b>Zoom:</b>" +
- "<a href='#' id='hour'>hour</a> " +
- "<a href='#' id='day'>day</a> " +
- "<a href='#' id='week'>week</a> " +
- "<a href='#' id='month'>month</a> " +
- "<a href='#' id='full'>full</a> " +
- "<b>Pan:</b> " +
- "<a href='#' id='left'>left</a> " +
- "<a href='#' id='right'>right</a> ";
+ parent.innerHTML = [
+ "<div id='div_g'></div>",
+ "<b>Zoom:</b>",
+ "<a href='#' id='hour'>hour</a> ",
+ "<a href='#' id='day'>day</a> ",
+ "<a href='#' id='week'>week</a> ",
+ "<a href='#' id='month'>month</a> ",
+ "<a href='#' id='full'>full</a> ",
+ "<b>Pan:</b> ",
+ "<a href='#' id='left'>left</a> ",
+ "<a href='#' id='right'>right</a> "].join("\n");
},
run: function() {
var r = [ ];
name: 'Function Plotter',
title: 'Define your data with functions',
setup: function(parent) {
- parent.innerHTML =
- "<p><b>Equation: </b><br/>\n" +
- "<textarea cols='80' rows='10' id='eq'>function(x) {\n" +
- " return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];\n" +
- "}</textarea><br/>\n" +
- "<b>Preset functions:</b> <select id='presets'>\n" +
- "<option id='custom'>(custom)</option>\n" +
- "<option id='id'>Identity</option>\n" +
- "<option id='sine'>Sine Wave</option>\n" +
- "<option id='taylor'>Taylor series</option>\n" +
- "<option selected id='sawtooth'>Sawtooth</option>\n" +
- "</select>\n" +
- "</p>\n" +
- "\n" +
- " <p><b>x range: </b> <input type='text' width='5' id='x1' value='-10' />\n" +
- " to <input type='text' width='5' id='x2' value='10' /></p>\n" +
- " <p><button id='plot'>Plot</button></p>\n" +
- "\n" +
- " <div id='graph_div' style='width:800px; height:400px;'></div>";
+ parent.innerHTML = [
+ "<p><b>Equation: </b><br/>",
+ "<textarea cols='80' rows='10' id='eq'>function(x) {",
+ " return [0.1 * x, 0.1 * x + Math.sin(x), 0.1*x + Math.cos(x)];",
+ "}</textarea><br/>",
+ "<b>Preset functions:</b> <select id='presets'>",
+ "<option id='custom'>(custom)</option>",
+ "<option id='id'>Identity</option>",
+ "<option id='sine'>Sine Wave</option>",
+ "<option id='taylor'>Taylor series</option>",
+ "<option selected id='sawtooth'>Sawtooth</option>",
+ "</select>",
+ "</p>",
+ "",
+ " <p><b>x range: </b> <input type='text' width='5' id='x1' value='-10' />",
+ " to <input type='text' width='5' id='x2' value='10' /></p>",
+ " <p><button id='plot'>Plot</button></p>",
+ "",
+ " <div id='graph_div' style='width:800px; height:400px;'></div>"].join("\n");
},
run: function() {
name: 'Range Selector',
title: 'Demo of the Range Selector',
setup: function(parent) {
- parent.innerHTML =
- "<p>No roll period.</p>" +
- "<div id='noroll' style='width:800px; height:320px;'></div>" +
- "<p>Roll period of 14 timesteps, custom range selector height and plot color.</p>" +
- "<div id='roll14' style='width:800px; height:320px;'></div>";
+ parent.innerHTML = [
+ "<p>No roll period.</p>",
+ "<div id='noroll' style='width:800px; height:320px;'></div>",
+ "",
+ "<p>Roll period of 14 timesteps, custom range selector height and plot color.</p>",
+ "<div id='roll14' style='width:800px; height:320px;'></div>"].join("\n");
},
run: function() {
g1 = new Dygraph(
name: 'Stock Chart Demo',
title: 'Stock Chart Demo',
setup: function(parent) {
- parent.innerHTML = "<div id='stock_div' style='width: 800px; height: 400px;'></div><br/>" +
- "<div style='width: 800px; text-align: center;'>" +
- "<button id='linear'>Linear Scale</button> " +
- "<button id='log' disabled='true'>Log Scale</button>" +
- "</div>";
+ parent.innerHTML = [
+ "<div id='stock_div' style='width: 800px; height: 400px;'></div><br/>",
+ "<div style='width: 800px; text-align: center;'>",
+ " <button id='linear'>Linear Scale</button> ",
+ " <button id='log' disabled='true'>Log Scale</button>",
+ "</div>"].join("\n");
},
run: function() {
var g = new Dygraph(document.getElementById("stock_div"), stockData,
name: 'CSS label styling',
title: 'Each chart label is styled independently with CSS',
setup: function(parent) {
- parent.innerHTML =
- "<p class='infotext'>This chart's labels are styled</p>" +
- "<div class='chart' id='div_g' style='width:600px; height:300px;'></div>" +
- "<p class='infotext'>This version of the chart uses the default styles:</p>" +
- "<div class='chart' id='div_g2' style='width:600px; height:300px;'></div>";
+ parent.innerHTML = [
+ "<p class='infotext'>This chart's labels are styled</p>",
+ "<div class='chart' id='div_g' style='width:600px; height:300px;'></div>",
+ "<p class='infotext'>This version of the chart uses the default styles:</p>",
+ "<div class='chart' id='div_g2' style='width:600px; height:300px;'></div>"].join("\n");
},
run: function() {
g = new Dygraph(
name: 'Synchronization',
title: 'Multiple graphs in sync',
setup: function(parent) {
- parent.innerHTML =
- "<p>Zooming and panning on any of the charts will zoom and pan all the" +
- "others.</p>" +
- "<p><aside>(zoom: Click and drag, pan: shift-click and drag, unzoom: double-click)</aside></p>" +
- "<table><tr>" +
- "<td><div id='div1' style='width:500px; height:300px;'></div></td>" +
- "<td><div id='div3' style='width:500px; height:300px;'></div></td></tr>" +
- "<tr><td><div id='div2' style='width:500px; height:300px;'></div></td>" +
- "<td><div id='div4' style='width:500px; height:300px;'></div></td></table>";
+ parent.innerHTML = [
+ "<p>Zooming and panning on any of the charts will zoom and pan all the",
+ "others.</p>",
+ "<p><aside>(zoom: Click and drag, pan: shift-click and drag, unzoom: double-click)</aside></p>",
+ "<table><tr>",
+ "<td><div id='div1' style='width:500px; height:300px;'></div></td>",
+ "<td><div id='div3' style='width:500px; height:300px;'></div></td></tr>",
+ "<tr><td><div id='div2' style='width:500px; height:300px;'></div></td>",
+ "<td><div id='div4' style='width:500px; height:300px;'></div></td></table>"].join("\n");
},
run: function() {
gs = [];
name: 'Roll Periods and Error Bars',
title: 'Demo of a graph with many data points and custom error bars.',
setup: function(parent) {
- parent.innerHTML =
- "<p>Roll period of 14 timesteps.</p>" +
- "<div id='roll14' style='width:800px; height:320px;'></div>" +
- "<p>No roll period.</p>" +
- "<div id='noroll' style='width:800px; height:320px;'></div>";
+ parent.innerHTML = [
+ "<p>Roll period of 14 timesteps.</p>",
+ "<div id='roll14' style='width:800px; height:320px;'></div>",
+ "<p>No roll period.</p>",
+ "<div id='noroll' style='width:800px; height:320px;'></div>"]
+ .join("\n");
},
run: function() {
g1 = new Dygraph(
projects / dygraphs.git / commitdiff