DyGraphs is a decent Javascript library to plot time series data points.
I chose DyGraphs a long time ago mainly due to its small footprint of 123530 bytes for dygraph.2.0.0.min.js
One of the things it allows you to do now is to add a different plotter algorithm to plot data. One such example can be found on the demo page is that of a BarChart plotter. If you look at the code it is a fairly small addition.
One of the possible plots missing though is a PieChart. It happened that I needed a PieChart for my project and I did not want to switch to E.g. ChartJS [ Release 2.5.0 ] so I wrote my own little PieChart function for DyGraphs.
function pieChartPlotter ( e ) { var ctx = e.drawingContext; var self = e.dygraph.user_attrs_.myCtx; var itm, nme, data = self._pieData; if ( ! data ) { var t, i, y, all, total = 0; data = {}; all = e.allSeriesPoints; // array of array for ( t=0; t
The one thing you will see in this code is that I calculate the required PieChart data once and then check for its existance each time I enter this function. This is requried beause DyGraph does currently not call the plotter function in a context but rather in the global browser context ( I.e. the this object is the browser Window ).
So instead I ‘added’ ( read hacked ) myCtx to the dygraphs – plotter options to gain access to my local JavaScript object where I buffer the _pieData.
While this may not be the nicest pie chart around, it is a small, basic function which can be expanded on fairly easily.
Addendum: Here is how to use this code
this._options = { labels: ["Date","Count"], legend: 'always', title: " ", myCtx: this, animatedZooms: true, hideOverlayOnMouseOut: false, stackedGraph: false, clickCallback : this.onGraphClicked, showRangeSelector: true, underlayCallback : this.highlightWeekend, legendFormatter : this.legendFormatter, highlightSeriesOpts : { strokeWidth: 3, strokeBorderWidth: 1, highlightCircleSize: 5 } }; this._chart = new Dygraph ( dom, this._data.data, this._options ); ...