jQWidgets - Pie chart with custom tooltip

by Stéphane Cabaret

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxchart.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<div style="position: relative; left: 100px;">
    <div class='Chart' style="width: 100%; height: 220px;"></div>
</div>

JavaScript

var data = [{'share': '50', 'state': 'Maximum'}, {'share': '30', 'state': 'Minimum'}, {'share': '20', 'state': 'Average'}];
var $chartUsageState = $('.Chart');

var source = {
        datatype: "json",
        datafields: [{
          name: 'state'
        }, {
          name: 'share'
        }],
        localdata: data
      };
      var dataAdapter = new $.jqx.dataAdapter(source, {
        async: false,
        autoBind: true,
      });

      var toolTipCustomFormatPieChart = function(value, itemIndex, series, group, groupcategoryValue, categoryAxis) {
        var displayName = data[itemIndex][series['displayText']];
        if (displayName) {
          displayName = displayName.replace(/\s/g, '&nbsp;');
        }
        value = parseFloat(value).toFixed(1);
        return '<div class="pie-chart-tooltip">' + displayName + '&nbsp:&nbsp' + value + '%</div>';
      };


      var settings = {
        title: '',
        description: '',
        enableAnimations: true,
        showLegend: true,
        showBorderLine: false,
        toolTipFormatFunction: toolTipCustomFormatPieChart,
        backgroundColor: 'transparent',
        legendLayout: {
          left: 350,
          top: 70,
          width: 140,
          height: 200,
          flow: 'vertical'
        },
        legendPosition: {
          left: 0,
          top: 50,
          width: 0,
          height: 0
        },
        source: dataAdapter,
        seriesGroups: [{
          type: 'pie',
          useGradientColors: false,
          showLabels: false,
          series: [{
            dataField: 'share',
            displayText: 'state',
            labelRadius: 80,
            radius: 65,
            centerOffset: 0,
            formatSettings: {
              sufix: ' ',
              decimalPlaces: 1
            },
            legendFormatFunction: function(value, index) {
              var share = parseFloat(dataAdapter.records[index].share).toFixed(1);
              return value + ' : ' +...