<!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="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
<style type="text/css">
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
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();
+ ctx.fillStyle = darkenColor(e.color);
// Find the minimum separation between x-values.
// This determines the bar width.
includeZero: true,
dateWindow: [ Date.parse("2012/07/20"), Date.parse("2012/07/26") ],
animatedZooms: true,
- drawXGrid: false,
- plotter: barChartPlotter
+ plotter: barChartPlotter,
+ axes: {
+ x: {
+ drawGrid: false
+ }
+ }
}
);
{
labels: ['Date', 'A', 'B'],
includeZero: true,
- "A": {
- strokeWidth: 2
- },
- "B": {
- plotter: barChartPlotter
+ series: {
+ "A": {
+ strokeWidth: 2
+ },
+ "B": {
+ plotter: barChartPlotter
+ }
}
});
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());
+ fillColors.push(darkenColor(strokeColors[i]));
}
for (var j = 0; j < sets.length; j++) {
NoisyData(),
{
errorBars: true,
- 'A': {
- plotter: Dygraph.Plotters.errorPlotter
- },
- 'B': {
- plotter: Dygraph.Plotters.linePlotter,
- strokePattern: Dygraph.DASHED_LINE
+ series: {
+ 'A': {
+ plotter: Dygraph.Plotters.errorPlotter
+ },
+ 'B': {
+ plotter: Dygraph.Plotters.linePlotter,
+ strokePattern: Dygraph.DASHED_LINE
+ }
}
});