DyGraphs Pie Chart Plotter

DyGraphs is a decent Javascript library to plot time series.

I chose this library long time ago mainly due to its small footprint of 123530 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 DyGraph.


      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<all.length ; t++ )  {
            y = 0;
            itm  = all[t];
            nme  = itm[0].name;
            for ( i=0; i<itm.length; i++ )
              y += itm[i].yval;
            total += y;
            data[nme] = { color : null, y : y };
          }
          data.total = total;
          self._pieData = data;
        }
        if ( data[e.setName] )
             data[e.setName].color = e.color;
        var delta = ctx.canvas.width > ctx.canvas.height ? ctx.canvas.height : ctx.canvas.width;
        var center= parseInt ( delta / 2, 10 );
        var lastend = 0;
        ctx.clearRect ( 0, 0, ctx.canvas.width, ctx.canvas.height );
        for ( var name in data )  {
          itm = data[name];
          if ( self._highlighted === name )
            ctx.fillStyle = "#FF8844";
          else
            ctx.fillStyle = itm.color === null ? "#888888" : itm.color;
          ctx.beginPath ( );
          ctx.moveTo ( ctx.canvas.width/2, ctx.canvas.height/2 );
          ctx.arc ( ctx.canvas.width/2, ctx.canvas.height/2, center/2, lastend, lastend + ( Math.PI * 2 * ( itm.y / data.total ) ), false );
          ctx.lineTo ( ctx.canvas.width/2, ctx.canvas.height/2 );
          ctx.fill ( );
          lastend += Math.PI * 2 * ( itm.y / data.total );
        }
      }

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 dygraph – plotter options to gain accss 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.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to DyGraphs Pie Chart Plotter

  1. Leo says:

    Hi
    Can you upload a whole example?
    I don’t know how can add myCtx to user_attrs_, so I have an error on _pieData

    Thanks

  2. Varol Okan says:

    Hey, it is actually fairly simple, when you define the DyGraphs options, you add in the myCtx attribute

        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
          }
        };
    

    … and then later you can instantiate the graph like so

      this._chart = new Dygraph ( dom, this._data.data, this._options );
    

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s