g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
"X,Y,Z\n" + "1,0,3\n" + "2,2,6\n" + "3,4,8\n" + "4,6,9\n" + "5,8,9\n" + "6,10,8\n" + "7,12,6\n" + "8,14,3\n", {
// options go here. See http://dygraphs.com/options.html
legend: 'always',
animatedZooms: true,
title: 'Minimal custom plotter demo',
plotter: function(e) {
var ctx = e.drawingContext;
ctx.beginPath();
ctx.moveTo(e.points[0].canvasx, e.points[0].canvasy);
for (var i = 1; i < e.points.length; i++) {
ctx.lineTo(e.points[i].canvasx, e.points[i].canvasy);
}
ctx.stroke();
}
});
<!-- 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;
}