How to draw a donut Chart using dojo on mobile website

Question

I am working on a mobile website (m.sitename). Client expects a donut chart to be developed using dojo, which should work fine in android phones and iPhones. But I could not find a working example of the same on internet. Could somebody please help me understand how a donut chart can be created using dojo?

Answer 1

As far as I know, there is no such type of chart in dojox.charting. You will probably have to write your own chart type. Have a look at the code in dojox/charting/plot2d/Pie.js and use it as a template.

Your should be able to add a filled-in circle in the middle of the pie to make it look like a donut...

Example :

require([
    "dojo/_base/declare",
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/themes/Claro"], function (declare, Chart, Pie, theme) {

    var Donut = declare(Pie, {
        render: function (dim, offsets) {
            // Call the Pie's render method
            this.inherited(arguments);

            // Draw a white circle in the middle
           var rx = (dim.width - offsets.l - offsets.r) / 2,
               ry = (dim.height - offsets.t - offsets.b) / 2,
                r = Math.min(rx, ry) / 2;
           var circle = {
               cx: offsets.l + rx,
               cy: offsets.t + ry,
               r: r
           };
           var s = this.group;

           s.createCircle(circle).setFill("#fff").setStroke("#fff");
       }
   });

   // Create the chart within it's "holding" node
   var pieChart = new Chart("chartNode"),
       chartData = [{
          x: 1,
          y: 19021
       }, {
          x: 1,
          y: 12837
       }, {
          x: 1,
          y: 12378
       }, {
          x: 1,
          y: 21882
       }, {
          x: 1,
          y: 17654
       }, {
          x: 1,
          y: 15833
       }, {
          x: 1,
          y: 16122
       }];

   // Set the theme
   pieChart.setTheme(theme);

   // Add the only/default plot
   pieChart.addPlot("default", {
       type: Donut, // our Donut module reference as type value
       radius: 200,
       fontColor: "black",
       labelOffset: -20
   });

   // Add the series of data
   pieChart.addSeries("January", chartData);

   // Render the chart!
   pieChart.render();

});

See it in action here : http://jsfiddle.net/psoares/XX7G9/