Added Donut Chart support for HighChart ExtJs 4 extension

Donut Chart support is added to the latest HighChart ExtJs 4 extension. The code and an example are included in my latest github. You can also try the demo in joekuan.org. The example uses the same dataset as demonstrated in original Highchart example.

Donut chart basically contains two pie chart series that one is the subcategory of the other one, both series shares a single column of data. Based on the dataset from the Highchart example, the data model for the ExtJs Store would be:

fields: [ 'vendor', 'version', 'share' ]

So the returned Json data should look like this:

0: {version:MSIE 6.0, vendor:MSIE, share:10.85}
1: {version:MSIE 7.0, vendor:MSIE, share:7.35}
2: {version:MSIE 8.0, vendor:MSIE, share:33.06}
3: {version:MSIE 9.0, vendor:MSIE, share:2.81}

Vendor is the main category field (outer ring), whereas version (inner ring) is the drill down of each main category and share is the category data.

The following is the configuration setup for plotting a donut chart:

xtype: 'highchart',
series: [{
  type: 'pie',
  categorieField: 'vendor',
  dataField: 'share',
  name: 'Browsers',
  size: '60%',
  totalDataField: true,
  dataLabels: {
    formatter: function() {
      return this.y > 5 ? this.point.name : null;
    },
    color: 'white',
    distance: -30
  }
  }, {
  type : 'pie',
  categorieField : 'version',
  dataField: 'share',
  name: 'Versions',
  innerSize: '60%',
    dataLabels: {
      formatter: function() {
        return this.y > 1 ? '<strong>'+ this.point.name +':</strong> '+ this.y +'%'  : null;
      }
    }
}],
chartConfig: {
        ...

Most of the configuration settings are derived from the original Highchart example, except the dataField, categorieField and totalDataField. The usages of dataField and categorieField are the same as how you normally use to plot a pie chart in the extension. Because the y-data of the main category, vendor, is the total of it’s own subcategory, an extra field, totalDataField, is required to tell the Highchart extension to compute it’s data differently.

However, if your server dataset already includes the main category total data, then you don’t need to specify totalDataField. All you need to do is to include an extra total field in your store’s model and redirect dataField to that extra field in your series config.

About these ads