function barChartPlotter(e) { var ctx = e.drawingContext; var points = e.points; var y_bottom = e.dygraph.toDomYCoord(0); // see <a href="http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord">jsdoc</a> // This should really be based on the minimum gap var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx); ctx.fillStyle = e.color; // a lighter shade might be more aesthetically pleasing // Do the actual plotting. for (var i = 0; i < points.length; i++) { var p = points[i]; var center_x = p.canvasx; // center of the bar 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("graph"), "X,Y\n" + "1,2\n" + "2,4\n" + "3,6\n" + "4,8\n" + "5,10\n" + "6,12\n" + "7,14\n" + "8,16\n", { // options go here. See http://dygraphs.com/options.html legend: 'always', animatedZooms: true, plotter: barChartPlotter, dateWindow: [0, 9] });
<!-- You may set style: "width: ...; height: ..." to size the chart --> <div id="graph"></div>
/* Relevant CSS classes include: Labels on the X & Y axes: .dygraph-axis-label .dygraph-axis-label-x .dygraph-axis-label-y .dygraph-axis-label-y2 Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html .dygraph-title .dygraph-xlabel .dygraph-ylabel .dygraph-y2label The legend, see http://dygraphs.com/tests/series-highlight.html .dygraph-legend */ .dygraph-title { color: gray; }