--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <title>Custom Circles</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'>
+ .few .dygraph-legend > span.highlight { border: 1px solid grey; }
+ .many .dygraph-legend > span { display: none; }
+ .many .dygraph-legend > span.highlight { display: inline; }
+ </style>
+ </head>
+ <body>
+ <h2>Series highlighting demo</h2>
+<script type='text/javascript'>
+
+var getData = function(numSeries, numRows, isStacked) {
+ var data = [];
+
+ for (var j = 0; j < numRows; ++j) {
+ data[j] = [j];
+ }
+ for (var i = 0; i < numSeries; ++i) {
+ var val = 0;
+ for (var j = 0; j < numRows; ++j) {
+ if (isStacked) {
+ val = Math.random();
+ } else {
+ val += Math.random() - 0.5;
+ }
+ data[j][i + 1] = val;
+ }
+ }
+ return data;
+};
+
+var makeGraph = function(className, numSeries, numRows, isStacked) {
+ var div = document.createElement('div');
+ div.className = className;
+ document.body.appendChild(div);
+
+ var labels = ['x'];
+ for (var i = 0; i < numSeries; ++i) {
+ var label = '' + i;
+ label = 's' + '000'.substr(label.length) + label;
+ labels[i + 1] = label;
+ }
+ var g = new Dygraph(
+ div,
+ getData(numSeries, numRows, isStacked),
+ {
+ width: 600,
+ height: 400,
+ stackedGraph: isStacked,
+ labels: labels.slice(),
+ highlightCircleSize: 2,
+ strokeWidth: 1,
+ strokeBorderWidth: isStacked ? null : 1,
+ //strokeBorderColor: 'white',
+ highlightSeriesBackgroundFade: 0.5,
+ highlightSeriesAnimate: true,
+ highlightSeriesOpts: {
+ strokeWidth: 3,
+ strokeBorderWidth: 1,
+ highlightCircleSize: 5,
+ },
+ });
+ g.setSelection(false, 's005');
+ //console.log(g);
+};
+
+makeGraph("few", 20, 50, false);
+makeGraph("few", 10, 20, true);
+makeGraph("many", 100, 100, false);
+makeGraph("many", 100, 100, true);
+</script>
+</body>
+</html>
projects / dygraphs.git / commitdiff