[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>

    <script type="text/javascript">

      // 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);

        // The RGBColor class is provided by rgbcolor.js, which is
        // packed in with dygraphs.
        var color = new RGBColor(e.color);
        color.r = Math.floor((255 + color.r) / 2);
        color.g = Math.floor((255 + color.g) / 2);
        color.b = Math.floor((255 + color.b) / 2);
        ctx.fillStyle = color.toRGB();

        // 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,
              "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++) {
        var color = new RGBColor(strokeColors[i]);
        color.r = Math.floor((255 + color.r) / 2);
        color.g = Math.floor((255 + color.g) / 2);
        color.b = Math.floor((255 + color.b) / 2);
        fillColors.push(color.toRGB());
      }

      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,
              'A': {
                plotter: Dygraph.Plotters.errorPlotter
              },
              'B': {
                plotter: Dygraph.Plotters.linePlotter,
                strokePattern: Dygraph.DASHED_LINE
              }
            });

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