dcos-dygraphs
Version:
dygraphs is a fast, flexible open source JavaScript charting library.
271 lines (253 loc) • 8.15 kB
HTML
<html>
<head>
<title>dygraph</title>
<!--
For production (minified) code, use:
<script type="text/javascript" src="dygraph-combined.js"></script>
-->
<script type="text/javascript" src="../dist/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,,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"), 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,
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>