[dygraphs.git] / tests / plotters.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Plotters demo</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
      body {
        max-width: 750px;
      }
      div.chart {
        width: 640px;
        height: 320px;
      }
    </style>
  </head>
  <body>
    <p>This page demonstrates how to build custom plotters with dygraphs.
    The <a href="http://dygraphs.com/options.html#plotter">plotter</a> option
    allows you to write your own drawing logic. This can be used to achieve
    powerful customization. View source to see how the examples work.</p>

    <h2>Bar Chart</h2>
    <p>Here a specialized <a
    href="http://dygraphs.com/options.html#plotter">plotter</a> is used to draw
    a bar plot rather than a line plot:</p>
    <div id="demodiv" class=chart></div>

    <h2>Candle Chart</h2>
    <p>Here a specialized <a
    href="http://dygraphs.com/options.html#plotter">plotter</a> is used to
    combined four series into a unified "Candle" plot:</p>
    <div id="candlechart" class=chart></div>

    <h2>Bar &amp; Line Chart</h2>
    <p>The <a href="http://dygraphs.com/options.html#plotter">plotter</a>
    option may be set on a per-series basis to create mixed charts:</p>
    <div id="barlinechart" class="chart"></div>

    <h2>Multi-column Bar Chart</h2>
    <div id="multibar" class="chart"></div>

    <h2>Mixed Error Bars and Lines</h2>
    <p>You can tweak the standard plotters list to achieve effects which would
    be difficult otherwise, e.g. drawing series with only confidence intervals
    and showing error bars only for some series.</p>
    <div id="mixed-error" class="chart"></div>

    <h2>Smooth Lines</h2>
    <p>See the <a href="smooth-plots.html">smooth-plots demo</a> for an example of a custom plotter which connects points using bezier curves instead of straight lines.</p>

    <script type="text/javascript">
      // Darken a color
      function darkenColor(colorStr) {
        // Defined in dygraph-utils.js
        var color = Dygraph.toRGB_(colorStr);
        color.r = Math.floor((255 + color.r) / 2);
        color.g = Math.floor((255 + color.g) / 2);
        color.b = Math.floor((255 + color.b) / 2);
        return 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
      }

      // This function draws bars for a single series. See
      // multiColumnBarPlotter below for a plotter which can draw multi-series
      // bar charts.
      function barChartPlotter(e) {
        var ctx = e.drawingContext;
        var points = e.points;
        var y_bottom = e.dygraph.toDomYCoord(0);

        ctx.fillStyle = darkenColor(e.color);

        // Find the minimum separation between x-values.
        // This determines the bar width.
        var min_sep = Infinity;
        for (var i = 1; i < points.length; i++) {
          var sep = points[i].canvasx - points[i - 1].canvasx;
          if (sep < min_sep) min_sep = sep;
        }
        var bar_width = Math.floor(2.0 / 3 * min_sep);

        // Do the actual plotting.
        for (var i = 0; i < points.length; i++) {
          var p = points[i];
          var center_x = p.canvasx;

          ctx.fillRect(center_x - bar_width / 2, p.canvasy,
              bar_width, y_bottom - p.canvasy);

          ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
              bar_width, y_bottom - p.canvasy);
        }
      }

      g = new Dygraph(
              document.getElementById("demodiv"),
              "Date,Widgets Sold\n" +
              "2012/07/21,10\n" +
              "2012/07/22,12\n" +
              "2012/07/23,9\n"  +
              "2012/07/24,16\n" +
              "2012/07/25,10\n",
              {
                legend: 'always',
                title: 'Daily Widget Sales',
                includeZero: true,
                dateWindow: [ Date.parse("2012/07/20"), Date.parse("2012/07/26") ],
                animatedZooms: true,
                drawXGrid: false,
                plotter: barChartPlotter
              }
          );

      // The Candle chart plotter is adapted from code written by
      // Zhenlei Cai (jpenguin@gmail.com)
      // https://github.com/danvk/dygraphs/pull/141/files
      
      var BAR_WIDTH = 8;
      function candlePlotter(e) {
        // This is the officially endorsed way to plot all the series at once.
        if (e.seriesIndex !== 0) return;

        var setCount = e.seriesCount;
        if (setCount != 4) {
          throw "Exactly 4 prices each point must be provided for candle chart (open close high low)";
        }

        var prices = [];
        var price;
        var sets = e.allSeriesPoints;
        for (var p = 0 ; p < sets[0].length; p++) {
          price = {
            open : sets[0][p].yval,
            close : sets[1][p].yval,
            high : sets[2][p].yval,
            low : sets[3][p].yval,
            openY : sets[0][p].y,
            closeY : sets[1][p].y,
            highY : sets[2][p].y,
            lowY : sets[3][p].y
          };
          prices.push(price);
        }

        var area = e.plotArea;
        var ctx = e.drawingContext;
        ctx.strokeStyle = '#202020';
        ctx.lineWidth = 0.6;

        for (p = 0 ; p < prices.length; p++) {
          ctx.beginPath();

          price = prices[p];
          var topY = area.h * price.highY + area.y;
          var bottomY = area.h * price.lowY + area.y;
          var centerX = area.x + sets[0][p].x * area.w;
          ctx.moveTo(centerX, topY);
          ctx.lineTo(centerX, bottomY);
          ctx.closePath();
          ctx.stroke();
          var bodyY;
          if (price.open > price.close) {
            ctx.fillStyle ='rgba(244,44,44,1.0)';
            bodyY = area.h * price.openY + area.y;
          }
          else {
            ctx.fillStyle ='rgba(44,244,44,1.0)';
            bodyY = area.h * price.closeY  + area.y;
          }
          var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
          ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH,  bodyHeight);
        }

      }

var candleData = "Date,Open,Close,High,Low\n" +
  "2011-12-06,392.54,390.95,394.63,389.38\n" + 
  "2011-12-07,389.93,389.09,390.94,386.76\n" + 
  "2011-12-08,391.45,390.66,395.50,390.23\n" + 
  "2011-12-09,392.85,393.62,394.04,391.03\n" + 
  "2011-12-12,391.68,391.84,393.90,389.45\n" + 
  "2011-12-13,393.00,388.81,395.40,387.10\n" + 
  "2011-12-14,386.70,380.19,387.38,377.68\n" + 
  "2011-12-15,383.33,378.94,383.74,378.31\n" + 
  "2011-12-16,380.36,381.02,384.15,379.57\n" + 
  "2011-12-19,382.47,382.21,384.85,380.48\n" + 
  "2011-12-20,387.76,395.95,396.10,387.26\n" + 
  "2011-12-21,396.69,396.45,397.30,392.01\n" + 
  "2011-12-22,397.00,398.55,399.13,396.10\n" + 
  "2011-12-23,399.69,403.33,403.59,399.49\n" + 
  "2011-12-27,403.10,406.53,409.09,403.02\n" + 
  "2011-12-28,406.89,402.64,408.25,401.34\n" + 
  "2011-12-29,403.40,405.12,405.65,400.51\n" + 
  "2011-12-30,403.51,405.00,406.28,403.49\n" + 
  "2012-01-03,409.50,411.23,412.50,409.00\n" + 
  "2012-01-04,410.21,413.44,414.68,409.28\n" + 
  "2012-01-05,414.95,418.03,418.55,412.67\n" + 
  "2012-01-06,419.77,422.40,422.75,419.22\n" + 
  "2012-01-09,425.52,421.73,427.75,421.35\n" + 
  "2012-01-10,425.91,423.24,426.00,421.50\n" + 
  "2012-01-11,422.59,422.55,422.85,419.31\n" + 
  "2012-01-12,422.41,421.39,422.90,418.75\n" + 
  "2012-01-13,419.53,419.81,420.45,418.66\n" + 
  "2012-01-17,424.20,424.70,425.99,422.96\n" + 
  "2012-01-18,426.87,429.11,429.47,426.30\n" + 
  "2012-01-19,430.03,427.75,431.37,426.51\n" + 
  "2012-01-20,427.49,420.30,427.50,419.75\n" + 
  "2012-01-23,422.67,427.41,428.45,422.30\n" + 
  "2012-01-24,425.10,420.41,425.10,419.55\n" + 
  "2012-01-25,454.26,446.66,454.45,443.73\n" + 
  "2012-01-26,448.45,444.63,448.79,443.14\n" + 
  "2012-01-27,444.37,447.28,448.48,443.77\n" + 
  "2012-01-30,445.71,453.01,453.90,445.39\n" + 
  "2012-01-31,455.85,456.48,458.24,453.07\n" + 
  "2012-02-01,458.49,456.19,458.99,455.55\n" + 
  "2012-02-02,455.90,455.12,457.17,453.98\n" + 
  "2012-02-03,457.30,459.68,460.00,455.56\n" + 
  "2012-02-06,458.38,463.97,464.98,458.20\n" + 
  "2012-02-07,465.25,468.83,469.75,464.58\n" + 
  "2012-02-08,470.50,476.68,476.79,469.70\n" + 
  "2012-02-09,480.95,493.17,496.75,480.56\n" + 
  "2012-02-10,491.17,493.42,497.62,488.55\n" + 
  "2012-02-13,499.74,502.60,503.83,497.09\n" + 
  "2012-02-14,504.70,509.46,509.56,502.00\n" ;

    g2 = new Dygraph(
            document.getElementById("candlechart"),
            candleData,
            {
              plotter: candlePlotter
            });


    // Bar and Line chart
    var short_data = data_nolabel();
    short_data = short_data.split('\n').slice(0, 20).join('\n');

    g3 = new Dygraph(
            document.getElementById("barlinechart"),
            short_data,
            {
              labels: ['Date', 'A', 'B'],
              includeZero: true,
              series: {
                "A": {
                  strokeWidth: 2
                },
                "B": {
                  plotter: barChartPlotter
                }
              }
            });


    // Multiple column bar chart
    function multiColumnBarPlotter(e) {
      // We need to handle all the series simultaneously.
      if (e.seriesIndex !== 0) return;

      var g = e.dygraph;
      var ctx = e.drawingContext;
      var sets = e.allSeriesPoints;
      var y_bottom = e.dygraph.toDomYCoord(0);

      // Find the minimum separation between x-values.
      // This determines the bar width.
      var min_sep = Infinity;
      for (var j = 0; j < sets.length; j++) {
        var points = sets[j];
        for (var i = 1; i < points.length; i++) {
          var sep = points[i].canvasx - points[i - 1].canvasx;
          if (sep < min_sep) min_sep = sep;
        }
      }
      var bar_width = Math.floor(2.0 / 3 * min_sep);

      var fillColors = [];
      var strokeColors = g.getColors();
      for (var i = 0; i < strokeColors.length; i++) {
        fillColors.push(darkenColor(strokeColors[i]));
      }

      for (var j = 0; j < sets.length; j++) {
        ctx.fillStyle = fillColors[j];
        ctx.strokeStyle = strokeColors[j];
        for (var i = 0; i < sets[j].length; i++) {
          var p = sets[j][i];
          var center_x = p.canvasx;
          var x_left = center_x - (bar_width / 2) * (1 - j/(sets.length-1));

          ctx.fillRect(x_left, p.canvasy,
              bar_width/sets.length, y_bottom - p.canvasy);

          ctx.strokeRect(x_left, p.canvasy,
              bar_width/sets.length, y_bottom - p.canvasy);
        }
      }
    }

    g4 = new Dygraph(
            document.getElementById("multibar"),
            short_data,
            {
              includeZero: true,
              plotter: multiColumnBarPlotter
            });

    // Mixed Error Bars and Lines
    g5 = new Dygraph(
            document.getElementById("mixed-error"),
            NoisyData(),
            {
              errorBars: true,
              series: {
                'A': {
                  plotter: Dygraph.Plotters.errorPlotter
                },
                'B': {
                  plotter: Dygraph.Plotters.linePlotter,
                  strokePattern: Dygraph.DASHED_LINE
                }
              }
            });

    </script>
</body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	5	<title>Plotters demo</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	9	<script type="text/javascript" src="../dygraph-dev.js"></script>
	10
	11	<script type="text/javascript" src="data.js"></script>
	12	<style type="text/css">
	13	body {
	14	max-width: 750px;
	15	}
	16	div.chart {
	17	width: 640px;
	18	height: 320px;
	19	}
	20	</style>
	21	</head>
	22	<body>
	23	<p>This page demonstrates how to build custom plotters with dygraphs.
	24	The <a href="http://dygraphs.com/options.html#plotter">plotter</a> option
	25	allows you to write your own drawing logic. This can be used to achieve
	26	powerful customization. View source to see how the examples work.</p>
	27
	28	<h2>Bar Chart</h2>
	29	<p>Here a specialized <a
	30	href="http://dygraphs.com/options.html#plotter">plotter</a> is used to draw
	31	a bar plot rather than a line plot:</p>
	32	<div id="demodiv" class=chart></div>
	33
	34	<h2>Candle Chart</h2>
	35	<p>Here a specialized <a
	36	href="http://dygraphs.com/options.html#plotter">plotter</a> is used to
	37	combined four series into a unified "Candle" plot:</p>
	38	<div id="candlechart" class=chart></div>
	39
	40	<h2>Bar & Line Chart</h2>
	41	<p>The <a href="http://dygraphs.com/options.html#plotter">plotter</a>
	42	option may be set on a per-series basis to create mixed charts:</p>
	43	<div id="barlinechart" class="chart"></div>
	44
	45	<h2>Multi-column Bar Chart</h2>
	46	<div id="multibar" class="chart"></div>
	47
	48	<h2>Mixed Error Bars and Lines</h2>
	49	<p>You can tweak the standard plotters list to achieve effects which would
	50	be difficult otherwise, e.g. drawing series with only confidence intervals
	51	and showing error bars only for some series.</p>
	52	<div id="mixed-error" class="chart"></div>
	53
	54	<h2>Smooth Lines</h2>
	55	<p>See the <a href="smooth-plots.html">smooth-plots demo</a> for an example of a custom plotter which connects points using bezier curves instead of straight lines.</p>
	56
	57	<script type="text/javascript">
	58	// Darken a color
	59	function darkenColor(colorStr) {
	60	// Defined in dygraph-utils.js
	61	var color = Dygraph.toRGB_(colorStr);
	62	color.r = Math.floor((255 + color.r) / 2);
	63	color.g = Math.floor((255 + color.g) / 2);
	64	color.b = Math.floor((255 + color.b) / 2);
	65	return 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
	66	}
	67
	68	// This function draws bars for a single series. See
	69	// multiColumnBarPlotter below for a plotter which can draw multi-series
	70	// bar charts.
	71	function barChartPlotter(e) {
	72	var ctx = e.drawingContext;
	73	var points = e.points;
	74	var y_bottom = e.dygraph.toDomYCoord(0);
	75
	76	ctx.fillStyle = darkenColor(e.color);
	77
	78	// Find the minimum separation between x-values.
	79	// This determines the bar width.
	80	var min_sep = Infinity;
	81	for (var i = 1; i < points.length; i++) {
	82	var sep = points[i].canvasx - points[i - 1].canvasx;
	83	if (sep < min_sep) min_sep = sep;
	84	}
	85	var bar_width = Math.floor(2.0 / 3 * min_sep);
	86
	87	// Do the actual plotting.
	88	for (var i = 0; i < points.length; i++) {
	89	var p = points[i];
	90	var center_x = p.canvasx;
	91
	92	ctx.fillRect(center_x - bar_width / 2, p.canvasy,
	93	bar_width, y_bottom - p.canvasy);
	94
	95	ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
	96	bar_width, y_bottom - p.canvasy);
	97	}
	98	}
	99
	100	g = new Dygraph(
	101	document.getElementById("demodiv"),
	102	"Date,Widgets Sold\n" +
	103	"2012/07/21,10\n" +
	104	"2012/07/22,12\n" +
	105	"2012/07/23,9\n" +
	106	"2012/07/24,16\n" +
	107	"2012/07/25,10\n",
	108	{
	109	legend: 'always',
	110	title: 'Daily Widget Sales',
	111	includeZero: true,
	112	dateWindow: [ Date.parse("2012/07/20"), Date.parse("2012/07/26") ],
	113	animatedZooms: true,
	114	drawXGrid: false,
	115	plotter: barChartPlotter
	116	}
	117	);
	118
	119	// The Candle chart plotter is adapted from code written by
	120	// Zhenlei Cai (jpenguin@gmail.com)
	121	// https://github.com/danvk/dygraphs/pull/141/files
	122
	123	var BAR_WIDTH = 8;
	124	function candlePlotter(e) {
	125	// This is the officially endorsed way to plot all the series at once.
	126	if (e.seriesIndex !== 0) return;
	127
	128	var setCount = e.seriesCount;
	129	if (setCount != 4) {
	130	throw "Exactly 4 prices each point must be provided for candle chart (open close high low)";
	131	}
	132
	133	var prices = [];
	134	var price;
	135	var sets = e.allSeriesPoints;
	136	for (var p = 0 ; p < sets[0].length; p++) {
	137	price = {
	138	open : sets[0][p].yval,
	139	close : sets[1][p].yval,
	140	high : sets[2][p].yval,
	141	low : sets[3][p].yval,
	142	openY : sets[0][p].y,
	143	closeY : sets[1][p].y,
	144	highY : sets[2][p].y,
	145	lowY : sets[3][p].y
	146	};
	147	prices.push(price);
	148	}
	149
	150	var area = e.plotArea;
	151	var ctx = e.drawingContext;
	152	ctx.strokeStyle = '#202020';
	153	ctx.lineWidth = 0.6;
	154
	155	for (p = 0 ; p < prices.length; p++) {
	156	ctx.beginPath();
	157
	158	price = prices[p];
	159	var topY = area.h * price.highY + area.y;
	160	var bottomY = area.h * price.lowY + area.y;
	161	var centerX = area.x + sets[0][p].x * area.w;
	162	ctx.moveTo(centerX, topY);
	163	ctx.lineTo(centerX, bottomY);
	164	ctx.closePath();
	165	ctx.stroke();
	166	var bodyY;
	167	if (price.open > price.close) {
	168	ctx.fillStyle ='rgba(244,44,44,1.0)';
	169	bodyY = area.h * price.openY + area.y;
	170	}
	171	else {
	172	ctx.fillStyle ='rgba(44,244,44,1.0)';
	173	bodyY = area.h * price.closeY + area.y;
	174	}
	175	var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
	176	ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH, bodyHeight);
	177	}
	178
	179	}
	180
	181	var candleData = "Date,Open,Close,High,Low\n" +
	182	"2011-12-06,392.54,390.95,394.63,389.38\n" +
	183	"2011-12-07,389.93,389.09,390.94,386.76\n" +
	184	"2011-12-08,391.45,390.66,395.50,390.23\n" +
	185	"2011-12-09,392.85,393.62,394.04,391.03\n" +
	186	"2011-12-12,391.68,391.84,393.90,389.45\n" +
	187	"2011-12-13,393.00,388.81,395.40,387.10\n" +
	188	"2011-12-14,386.70,380.19,387.38,377.68\n" +
	189	"2011-12-15,383.33,378.94,383.74,378.31\n" +
	190	"2011-12-16,380.36,381.02,384.15,379.57\n" +
	191	"2011-12-19,382.47,382.21,384.85,380.48\n" +
	192	"2011-12-20,387.76,395.95,396.10,387.26\n" +
	193	"2011-12-21,396.69,396.45,397.30,392.01\n" +
	194	"2011-12-22,397.00,398.55,399.13,396.10\n" +
	195	"2011-12-23,399.69,403.33,403.59,399.49\n" +
	196	"2011-12-27,403.10,406.53,409.09,403.02\n" +
	197	"2011-12-28,406.89,402.64,408.25,401.34\n" +
	198	"2011-12-29,403.40,405.12,405.65,400.51\n" +
	199	"2011-12-30,403.51,405.00,406.28,403.49\n" +
	200	"2012-01-03,409.50,411.23,412.50,409.00\n" +
	201	"2012-01-04,410.21,413.44,414.68,409.28\n" +
	202	"2012-01-05,414.95,418.03,418.55,412.67\n" +
	203	"2012-01-06,419.77,422.40,422.75,419.22\n" +
	204	"2012-01-09,425.52,421.73,427.75,421.35\n" +
	205	"2012-01-10,425.91,423.24,426.00,421.50\n" +
	206	"2012-01-11,422.59,422.55,422.85,419.31\n" +
	207	"2012-01-12,422.41,421.39,422.90,418.75\n" +
	208	"2012-01-13,419.53,419.81,420.45,418.66\n" +
	209	"2012-01-17,424.20,424.70,425.99,422.96\n" +
	210	"2012-01-18,426.87,429.11,429.47,426.30\n" +
	211	"2012-01-19,430.03,427.75,431.37,426.51\n" +
	212	"2012-01-20,427.49,420.30,427.50,419.75\n" +
	213	"2012-01-23,422.67,427.41,428.45,422.30\n" +
	214	"2012-01-24,425.10,420.41,425.10,419.55\n" +
	215	"2012-01-25,454.26,446.66,454.45,443.73\n" +
	216	"2012-01-26,448.45,444.63,448.79,443.14\n" +
	217	"2012-01-27,444.37,447.28,448.48,443.77\n" +
	218	"2012-01-30,445.71,453.01,453.90,445.39\n" +
	219	"2012-01-31,455.85,456.48,458.24,453.07\n" +
	220	"2012-02-01,458.49,456.19,458.99,455.55\n" +
	221	"2012-02-02,455.90,455.12,457.17,453.98\n" +
	222	"2012-02-03,457.30,459.68,460.00,455.56\n" +
	223	"2012-02-06,458.38,463.97,464.98,458.20\n" +
	224	"2012-02-07,465.25,468.83,469.75,464.58\n" +
	225	"2012-02-08,470.50,476.68,476.79,469.70\n" +
	226	"2012-02-09,480.95,493.17,496.75,480.56\n" +
	227	"2012-02-10,491.17,493.42,497.62,488.55\n" +
	228	"2012-02-13,499.74,502.60,503.83,497.09\n" +
	229	"2012-02-14,504.70,509.46,509.56,502.00\n" ;
	230
	231	g2 = new Dygraph(
	232	document.getElementById("candlechart"),
	233	candleData,
	234	{
	235	plotter: candlePlotter
	236	});
	237
	238
	239	// Bar and Line chart
	240	var short_data = data_nolabel();
	241	short_data = short_data.split('\n').slice(0, 20).join('\n');
	242
	243	g3 = new Dygraph(
	244	document.getElementById("barlinechart"),
	245	short_data,
	246	{
	247	labels: ['Date', 'A', 'B'],
	248	includeZero: true,
	249	series: {
	250	"A": {
	251	strokeWidth: 2
	252	},
	253	"B": {
	254	plotter: barChartPlotter
	255	}
	256	}
	257	});
	258
	259
	260	// Multiple column bar chart
	261	function multiColumnBarPlotter(e) {
	262	// We need to handle all the series simultaneously.
	263	if (e.seriesIndex !== 0) return;
	264
	265	var g = e.dygraph;
	266	var ctx = e.drawingContext;
	267	var sets = e.allSeriesPoints;
	268	var y_bottom = e.dygraph.toDomYCoord(0);
	269
	270	// Find the minimum separation between x-values.
	271	// This determines the bar width.
	272	var min_sep = Infinity;
	273	for (var j = 0; j < sets.length; j++) {
	274	var points = sets[j];
	275	for (var i = 1; i < points.length; i++) {
	276	var sep = points[i].canvasx - points[i - 1].canvasx;
	277	if (sep < min_sep) min_sep = sep;
	278	}
	279	}
	280	var bar_width = Math.floor(2.0 / 3 * min_sep);
	281
	282	var fillColors = [];
	283	var strokeColors = g.getColors();
	284	for (var i = 0; i < strokeColors.length; i++) {
	285	fillColors.push(darkenColor(strokeColors[i]));
	286	}
	287
	288	for (var j = 0; j < sets.length; j++) {
	289	ctx.fillStyle = fillColors[j];
	290	ctx.strokeStyle = strokeColors[j];
	291	for (var i = 0; i < sets[j].length; i++) {
	292	var p = sets[j][i];
	293	var center_x = p.canvasx;
	294	var x_left = center_x - (bar_width / 2) * (1 - j/(sets.length-1));
	295
	296	ctx.fillRect(x_left, p.canvasy,
	297	bar_width/sets.length, y_bottom - p.canvasy);
	298
	299	ctx.strokeRect(x_left, p.canvasy,
	300	bar_width/sets.length, y_bottom - p.canvasy);
	301	}
	302	}
	303	}
	304
	305	g4 = new Dygraph(
	306	document.getElementById("multibar"),
	307	short_data,
	308	{
	309	includeZero: true,
	310	plotter: multiColumnBarPlotter
	311	});
	312
	313	// Mixed Error Bars and Lines
	314	g5 = new Dygraph(
	315	document.getElementById("mixed-error"),
	316	NoisyData(),
	317	{
	318	errorBars: true,
	319	series: {
	320	'A': {
	321	plotter: Dygraph.Plotters.errorPlotter
	322	},
	323	'B': {
	324	plotter: Dygraph.Plotters.linePlotter,
	325	strokePattern: Dygraph.DASHED_LINE
	326	}
	327	}
	328	});
	329
	330	</script>
	331	</body>
	332	</html>