+<!DOCTYPE html>
<html>
<head>
+ <link rel="stylesheet" href="../dist/dygraph.css">
<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>
+ <script type="text/javascript" src="../dist/dygraph.js"></script>
+
</head>
<body>
<p>1: Simple line chart:</p>
"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/04,,13\n" +
"2009/12/05,15,\n" +
"2009/12/06,18,15\n" +
"2009/12/07,12,16\n",
[ 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/04"), null, 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
+ stepPlot: true,
+ series: {
+ GapSeries2: {
+ axis: 'y2'
+ }
+ }
}
);
</script>
+
+ <p>8: Stacked filled step chart:</p>
+ <div id="graphdiv8"></div>
+ <script type="text/javascript">
+ g8 = new Dygraph(document.getElementById("graphdiv8"),
+ "Date,Idle,Used\n" +
+ "2008-05-07,70,30\n" +
+ "2008-05-08,12,88\n" +
+ "2008-05-09,88,12\n" +
+ "2008-05-10,63,37\n" +
+ "2008-05-11,35,65\n",
+ {
+ stepPlot: true,
+ fillGraph: true,
+ stackedGraph: true,
+ includeZero: true
+ });
+ </script>
+
+ <p>9: Mixed mode - step and line:</p>
+ <div id="graphdiv9"></div>
+ <script type="text/javascript">
+ g8 = new Dygraph(document.getElementById("graphdiv9"),
+ "Date,Idle,Used\n" +
+ "2008-05-07,70,30\n" +
+ "2008-05-08,12,88\n" +
+ "2008-05-09,88,12\n" +
+ "2008-05-10,63,37\n" +
+ "2008-05-11,35,65\n",
+ {
+ series: {
+ Idle: {stepPlot: true},
+ Used: {stepPlot: false}
+ },
+
+ fillGraph: false,
+ stackedGraph: false,
+ includeZero: true
+ });
+ </script>
+
+
+ <p>10: Mixed mode - step and line (filled):</p>
+ <div id="graphdiv10"></div>
+ <script type="text/javascript">
+ g8 = new Dygraph(document.getElementById("graphdiv10"),
+ "Date,Idle,Used\n" +
+ "2008-05-07,70,30\n" +
+ "2008-05-08,12,88\n" +
+ "2008-05-09,88,12\n" +
+ "2008-05-10,63,37\n" +
+ "2008-05-11,35,65\n",
+ {
+ series: {
+ Idle: {stepPlot: false},
+ Used: {stepPlot: true}
+ },
+
+ fillGraph: true,
+ stackedGraph: false,
+ includeZero: true
+ });
+ </script>
+
+ <p>11: Mixed mode - step and line (stacked and filled):</p>
+ <div id="graphdiv11"></div>
+ <script type="text/javascript">
+ g8 = new Dygraph(document.getElementById("graphdiv11"),
+ "Date,Idle,Used,NotUsed,Active\n" +
+ "2008-05-07,60,30,5,5\n" +
+ "2008-05-08,12,73,5,10\n" +
+ "2008-05-09,38,12,30,20\n" +
+ "2008-05-10,50,17,23,10\n" +
+ "2008-05-11,35,25,35,5\n",
+ {
+ series: {
+ Idle: {stepPlot: false},
+ Used: {stepPlot: true},
+ NotUsed: {stepPlot: false},
+ Active: {stepPlot: true}
+ },
+ fillGraph: true,
+ stackedGraph: true,
+ includeZero: true
+ });
+ </script>
+
+ <p>12: Mixed mode - step and line (errorbars):</p>
+ <div id="graphdiv12"></div>
+ <script type="text/javascript">
+ g8 = new Dygraph(document.getElementById("graphdiv12"),
+ [
+ [1, [75, 2], [50, 3]],
+ [2, [70, 5], [90, 4]],
+ [3, [80, 7], [112, 5]],
+ [4, [55, 3], [100, 2]],
+ [5, [69, 4], [85, 6]]
+ ],
+ {
+ errorBars: true,
+ labels: ["X", "Data1", "Data2"],
+ series: {
+ Data1: {stepPlot: true},
+ Data2: {stepPlot: false}
+ }
+ }
+ );
+ </script>
+
+ <p>13: Mixed mode - step and line (custombars):</p>
+ <div id="graphdiv13"></div>
+ <script type="text/javascript">
+ g8 = new Dygraph(document.getElementById("graphdiv13"),
+ [
+ [1, [73, 75, 78], [50, 55, 70]],
+ [2, [65, 70, 75], [83, 91, 99]],
+ [3, [75, 85, 90], [98, 107, 117]],
+ [4, [55, 58, 61], [93, 102, 105]],
+ [5, [69, 73, 85], [80, 85, 87]]
+ ],
+ {
+ customBars: true,
+ labels: ["X", "Data1", "Data2"],
+ series: {
+ Data1: {stepPlot: true},
+ Data2: {stepPlot: false}
+ }
+ }
+ );
+ </script>
</body>
</html>
projects / dygraphs.git / blobdiff