+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>crosshairs</title>
- <!--[if IE]>
- <script type="text/javascript" src="../excanvas.js"></script>
- <![endif]-->
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <script type="text/javascript" src="../dygraph-dev.js"></script>
-
- <script type="text/javascript" src="data.js"></script>
- </head>
- <body>
- <p>Hover, click and zoom to test the callbacks:</p>
- <div id="div_g" style="width:600px; height:300px; position:relative;">
- </div>
-
- <script type="text/javascript">
- var lines = [];
- var xline;
- g = new Dygraph(
- document.getElementById("div_g"),
- NoisyData, {
- rollPeriod: 7,
- showRoller: true,
- errorBars: true,
-
- highlightCallback: function(e, x, pts) {
- for (var i = 0; i < pts.length; i++) {
- var y = pts[i].canvasy;
- lines[i].style.display = "";
- lines[i].style.top = y + "px";
- if (i == 0) xline.style.left = pts[i].canvasx + "px";
- }
- xline.style.display = "";
- },
-
- unhighlightCallback: function(e) {
- for (var i = 0; i < 2; i++) {
- lines[i].style.display = "none";
- }
- xline.style.display = "none";
- }
- }
- );
-
- for (var i = 0; i < 2; i++) {
- var line = document.createElement("div");
- line.style.display = "none";
- line.style.width = "100%";
- line.style.height = "1px";
- line.style.backgroundColor = "black";
- line.style.position = "absolute";
- document.getElementById("div_g").appendChild(line);
- lines.push(line);
- }
-
- xline = document.createElement("div");
- xline.style.display = "none";
- xline.style.width = "1px";
- xline.style.height = "100%";
- xline.style.top = "0px";
- xline.style.backgroundColor = "black";
- xline.style.position = "absolute";
- document.getElementById("div_g").appendChild(xline);
- </script>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>CSV with numeric X series</title>
- <!--[if IE]>
- <script type="text/javascript" src="../excanvas.js"></script>
- <![endif]-->
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <script type="text/javascript" src="../dygraph-dev.js"></script>
-
- </head>
- <body>
- <p>CSV data with a numeric (non-date) X series.</p>
- <div id="graph"></div>
- <script type="text/javascript">
- g = new Dygraph(
- document.getElementById("graph"),
- "X,Y\n" +
- "1,0\n" +
- "2,10\n" +
- "3,0\n" +
- "4,-10\n" +
- "5,0\n"
- );
- </script>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>noise</title>
- <!--[if IE]>
- <script type="text/javascript" src="../excanvas.js"></script>
- <![endif]-->
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <script type="text/javascript" src="../dygraph-dev.js"></script>
-
- <script type="text/javascript" src="data.js"></script>
- </head>
- <body>
- <div id="div_g" style="width:600px; height:300px;"></div>
- <br/>
- <div id="div_g30" style="width:600px; height:300px;"></div>
-
- <script type="text/javascript">
- g = new Dygraph(
- document.getElementById("div_g"),
- NoisyData, {
- rollPeriod: 7,
- errorBars: true,
- legend: 'always',
- ylabel: 'Percent Error',
- title: 'Error Rates over Time (7-day rollup)'
- }
- );
- g30 = new Dygraph(
- document.getElementById("div_g30"),
- NoisyData().replace(/,/g, "\t"), {
- rollPeriod: 14,
- errorBars: true,
- legend: 'always',
- labelsDivStyles: {
- 'textAlign': 'right',
- },
- labelsDivWidth: 170,
- ylabel: 'Percent Error',
- title: 'Error Rates over Time (14-day rollup)'
- }
- );
- </script>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>dygraphs number display</title>
- <!--[if IE]>
- <script type="text/javascript" src="../excanvas.js"></script>
- <![endif]-->
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <script type="text/javascript" src="../dygraph-dev.js"></script>
-
- <style type="text/css">
- .thinborder {
- border: 1px solid black;
- border-spacing: 0px;
- border-collapse: collapse;
- }
- .thinborder td,
- .thinborder th {
- border: 1px solid black;
- padding: 5px;
- }
- </style>
- </head>
- <body>
- <h2>dygraphs number display</h2>
- <p>Dygraphs can display numbers in either scientific mode (fixed number of significant figures) or fixed-point mode (fixed number of digits after the decimal point). It is in fixed-point mode by default.</p>
- <p>To switch to scientific mode, set the <i>sigFigs</i> option to the number of significant figures in your data.</p>
- <p>In fixed-point mode, you can control the number of digits after the decimal using the <i>digitsAfterDecimal</i> option. For particularly large numbers, this format can get unwieldy (i.e. '100000000' for 100M is a bit lengthy). Once the numbers get to a certain length, dygraphs will switch over to scientific notation. This is controlled by the <i>maxNumberWidth</i> option.</p>
-
- <div id='blah'></div>
-
- <script type="text/javascript">
- var nums = [
- -1.234e10,
- -1e10,
- -1.23e4,
- -123.456789,
- -123,
- -1,
- -0.123456,
- -0.1,
- -0.001234567,
- -0.001,
- -0.0000000001,
- 0,
- 0.0000000001,
- 0.001,
- 0.001234567,
- 0.1,
- 0.123456,
- 1,
- 3,
- 3.14,
- 3.14159,
- 3.14159265,
- 3.14159265358,
- 123,
- 123.456789,
- 1.23e4,
- 1e5,
- 1e6,
- 1e7,
- 1e8,
- 1e9,
- 1e10,
- 1.234e10
- ];
-
- var scientific = [ 1, 2, 3, 4, 5, 6 ];
- var fixed = [ [2, 6], [3, 6], [5, 6], [1, 10], [2, 10], [5, 10] ];
-
- // Helper functions for generating an HTML table for holding the test
- // results.
- createRow = function(columnType, columns) {
- var row = document.createElement('tr');
- for (var i = 0; i < columns.length; i ++) {
- var th = document.createElement(columnType);
- var text = document.createTextNode(columns[i]);
- th.appendChild(text);
- row.appendChild(th);
- };
- return row;
- };
-
- var html = '<table class=thinborder>';
- html += '<tr><th> </th><th colspan=' + scientific.length + '>Scientific (sigFigs)</th><th colspan=' + fixed.length + '>Fixed (digitsAfterDecimal, maxNumberWidth)</th></tr>\n';
- html += '<tr><th>Number</th>';
- for (var i = 0; i < scientific.length; i++) {
- html += '<th>' + scientific[i] + '</th>';
- }
- for (var i = 0; i < fixed.length; i++) {
- html += '<th>' + fixed[i] + '</th>';
- }
- html += '</tr>\n';
-
- var attr = {};
- var opts = function(x) {
- return attr[x];
- };
- for (var j = 0; j < nums.length; j++) {
- var x = nums[j];
- html += '<tr>';
- html += '<td>' + x + '</td>';
- for (var i = 0; i < scientific.length; i++) {
- attr = { sigFigs: scientific[i] };
- html += '<td>' + Dygraph.numberFormatter(x, opts) + '</td>';
- }
- for (var i = 0; i < fixed.length; i++) {
- attr = { sigFigs: null, digitsAfterDecimal: fixed[i][0], maxNumberWidth: fixed[i][1] };
- html += '<td>' + Dygraph.numberFormatter(x, opts) + '</td>';
- }
- html += '</tr>\n';
- }
-
- html += '</table>';
- document.getElementById('blah').innerHTML = html;
- </script>
-</body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>two series</title>
- <!--[if IE]>
- <script type="text/javascript" src="../excanvas.js"></script>
- <![endif]-->
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <script type="text/javascript" src="../dygraph-dev.js"></script>
-
- <script type="text/javascript" src="data.js"></script>
- </head>
- <body>
- <p>No rollup:</p>
- <div id="div_g" style="width:600px; height:300px;"></div>
- <p>30-Day Rollup:</p>
- <div id="div_g30" style="width:600px; height:300px;"></div>
-
- <script type="text/javascript">
- g = new Dygraph(
- document.getElementById("div_g"),
- data, {}
- );
- g30 = new Dygraph(
- document.getElementById("div_g30"),
- data, {
- rollPeriod: 30
- }
- );
- </script>
- </body>
-</html>
+++ /dev/null
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
- <title>dygraph</title>
- <!--[if IE]>
- <script type="text/javascript" src="../excanvas.js"></script>
- <![endif]-->
- <!--
- For production (minified) code, use:
- <script type="text/javascript" src="dygraph-combined.js"></script>
- -->
- <script type="text/javascript" src="../dygraph-dev.js"></script>
-
- </head>
- <body>
-
- <h1>Potential Y Axis formatting problems for small values</h1>
-
- <p>The problem using default y axis formatting for very small values:<br/>
- (this was more of a problem before dygraphs automatically switched to scientific notation)</p>
- <div id="graph1"></div>
- <script type="text/javascript">
- var g1 = new Dygraph(
- document.getElementById("graph1"),
- [
- [1, 0.0],
- [2, 0.0001],
- [3, 0.0002],
- [4, 0.0004],
- [5, 0.0005]
- ],
- {
- stepPlot: true,
- labels: ["X", "Data"]
- }
- );
- </script>
-
- <p>The solution using a Y axis formatting function:</p>
- <div id="graph2"></div>
- <script type="text/javascript">
- var g2 = new Dygraph(
- document.getElementById("graph2"),
- [
- [1, 0.0],
- [2, 0.0001],
- [3, 0.0002],
- [4, 0.0004],
- [5, 0.0005]
- ],
- {
- stepPlot: true,
- labels: ["X", "Data"],
- axes: {
- y: {
- valueFormatter: function(x) {
- var shift = Math.pow(10, 5)
- return Math.round(x * shift) / shift
- },
- }
- }
- }
- );
- </script>
-
- <p>Different yValueFormatter and yAxisLabelFormatter functions:</p>
- <div id="graph3"></div>
- <script type="text/javascript">
- var g3 = new Dygraph(
- document.getElementById("graph3"),
- [
- [1, 0.0],
- [2, 0.0001],
- [3, 0.0002],
- [4, 0.0004],
- [5, 0.0005]
- ],
- {
- stepPlot: true,
- labels: ["X", "Data"],
- axes: {
- y: {
- valueFormatter: function(x) {
- var shift = Math.pow(10, 5)
- return "*" + Math.round(x * shift) / shift
- },
- axisLabelFormatter: function(x) {
- var shift = Math.pow(10, 5)
- return "+" + Math.round(x * shift) / shift
- }
- }
- }
- }
- );
- </script>
-
- </body>
-</html>
projects / dygraphs.git / commitdiff