From 342b09856ba5a0a42b04884d8b417be458cc6e20 Mon Sep 17 00:00:00 2001 From: Neal Nelson <neal@adrimac.makalumedia.loc> Date: Tue, 15 Jun 2010 17:38:37 +0200 Subject: [PATCH] Added stepPlot option. --- tests/steps.html | 135 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 tests/steps.html diff --git a/tests/steps.html b/tests/steps.html new file mode 100644 index 0000000..81dfbd0 --- /dev/null +++ b/tests/steps.html @@ -0,0 +1,135 @@ +<html> + <head> + <title>dygraph</title> + <!--[if IE]> + <script type="text/javascript" src="excanvas.js"></script> + <![endif]--> + <script type="text/javascript" src="../strftime/strftime-min.js"></script> + <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> + <script type="text/javascript" src="../dygraph-canvas.js"></script> + <script type="text/javascript" src="../dygraph.js"></script> + </head> + <body> + <p>1: Simple line chart:</p> + <div id="graphdiv1"></div> + <script type="text/javascript"> + g1 = new Dygraph(document.getElementById("graphdiv1"), + "Date,Temperature\n" + + "2008-05-07,75\n" + + "2008-05-08,70\n" + + "2008-05-09,80\n" + + "2008-05-10,55\n" + + "2008-05-11,69\n"); + </script> + + <p>2: Simple step chart:</p> + <div id="graphdiv2"></div> + <script type="text/javascript"> + g2 = new Dygraph(document.getElementById("graphdiv2"), + "Date,Temperature\n" + + "2008-05-07,75\n" + + "2008-05-08,70\n" + + "2008-05-09,80\n" + + "2008-05-10,55\n" + + "2008-05-11,69\n", + { + stepPlot: true + }); + </script> + + <p>3: Filled step chart:</p> + <div id="graphdiv3"></div> + <script type="text/javascript"> + g3 = new Dygraph(document.getElementById("graphdiv3"), + "Date,Temperature\n" + + "2008-05-07,75\n" + + "2008-05-08,70\n" + + "2008-05-09,80\n" + + "2008-05-10,55\n" + + "2008-05-11,69\n", + { + stepPlot: true, + fillGraph: true + }); + </script> + + <p>4: Line chart with error bars:</p> + <div id="graphdiv4"></div> + <script type="text/javascript"> + g4 = new Dygraph(document.getElementById("graphdiv4"), + [ + [1, [75, 2]], + [2, [70, 5]], + [3, [80, 7]], + [4, [55, 3]], + [5, [69, 4]] + ], + { + errorBars: true, + labels: ["X", "Data"] + } + ); + </script> + + <p>5: Step chart with error bars:</p> + <div id="graphdiv5"></div> + <script type="text/javascript"> + g5 = new Dygraph(document.getElementById("graphdiv5"), + [ + [1, [75, 2]], + [2, [70, 5]], + [3, [80, 7]], + [4, [55, 3]], + [5, [69, 4]] + ], + { + stepPlot: true, + errorBars: true, + labels: ["X", "Data"] + } + ); + </script> + + <p>6: Stepped chart with gaps from CSV:</p> + <div id="graphdiv6"></div> + <script type="text/javascript"> + g6 = new Dygraph( + document.getElementById("graphdiv6"), + "Date,GapSeries1,GapSeries2\n" + + "2009/12/01,10,10\n" + + "2009/12/02,15,11\n" + + "2009/12/03,,12\n" + + "2009/12/04,20,13\n" + + "2009/12/05,15,\n" + + "2009/12/06,18,15\n" + + "2009/12/07,12,16\n", + { + stepPlot: true + } + ); + </script> + + <p>7: Stepped chart with gaps from native data:</p> + <div id="graphdiv7"></div> + <script type="text/javascript"> + g7 = new Dygraph( + document.getElementById("graphdiv7"), + [ + [ new Date("2009/12/01"), 10, 10], + [ new Date("2009/12/02"), 15, 11], + [ new Date("2009/12/03"), null, 12], + [ new Date("2009/12/04"), 20, 13], + [ new Date("2009/12/05"), 15, null], + [ new Date("2009/12/06"), 18, 15], + [ new Date("2009/12/07"), 12, 16] + ], + { + labels: ["Date","GapSeries1","GapSeries2"], + showRoller: true, + stepPlot: true + } + ); + </script> + + </body> +</html> -- 2.7.4