<!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]-->
+ <link rel="stylesheet" href="../css/dygraph.css">
+ <title>Series highlighting</title>
<!--
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="../dist/dygraph.js"></script>
<style type='text/css'>
.few .dygraph-legend > span.highlight { border: 1px solid grey; }
var makeGraph = function(className, numSeries, numRows, isStacked) {
var div = document.createElement('div');
div.className = className;
+ div.style.display = 'inline-block';
document.body.appendChild(div);
var labels = ['x'];
div,
getData(numSeries, numRows, isStacked),
{
- width: 600,
- height: 400,
- stackedGraph: isStacked,
+ width: 480,
+ height: 320,
labels: labels.slice(),
+ stackedGraph: isStacked,
+
highlightCircleSize: 2,
strokeWidth: 1,
strokeBorderWidth: isStacked ? null : 1,
- //strokeBorderColor: 'white',
- highlightSeriesBackgroundFade: 0.5,
- highlightSeriesAnimate: true,
+
highlightSeriesOpts: {
strokeWidth: 3,
strokeBorderWidth: 1,
makeGraph("few", 20, 50, false);
makeGraph("few", 10, 20, true);
-makeGraph("many", 100, 100, false);
-makeGraph("many", 100, 100, true);
+makeGraph("many", 75, 50, false);
+makeGraph("many", 40, 50, true);
</script>
</body>
</html>