Jojivijay

JQuery  plug-in for Pi Charts:

data[] =

[{"name":"Koramangala","y":4,"sliced":true,"selected":true},

{"name":"Old Madras Road","y":16,"sliced":true,"selected":true}]

----------------------------------------------------------------- 

(function( $ ){
  $.fn.pieChartWidget = function(o) {
      var cfg={
        data : [],
        renderTo:'body',          
        sliceColors: ['#E69D01', '#BE0101', '#36AE01', '#FFCC49', '#FFF390', '#64676A']
      };
     
      jQuery.extend(cfg, o);   
     
      jQuery.extend({
            pieChart : function(params){
                Highcharts.setOptions({
                    colors: cfg.sliceColors
                  });
               
                var options = {
                        chart: {                           
                            renderTo: cfg.renderTo,
                            type: 'pie',
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false,
                            backgroundColor:'',
                            cursor:'normal'
                        },
                        title: {
                            text: ''
                        },
                     tooltip: {
                         formatter: function() {
                             var s = '';
                             if(this.point.projectName != undefined){
                              s += '<b>' + this.point.projectName  + '</b><br>';
                             }
                             if(this.point.startDate != undefined){
                                 s += 'Start Date :<b> ' + this.point.startDate + '</b><br>';
                                 s += 'End Date :<b> ' + this.point.endDate + '</b><br>';
                                 s += 'Total Assign hours :<b> ' + this.point.assignHours + '</b><br>';
                                 s += 'Total Spend hours :<b> '+ this.point.spendHours +'/' + this.point.actualHours + '</b><br>';
                             }                            
                             return s;
                         }
                     },
                        legend: {
                            enabled: true
                        },
                        credits : {
                            enabled:false
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                shadow: false,
                                size:'100%',
                                borderWidth: 1,
                                dataLabels: {
                                enabled: true,
                                color:'#FFFFFF',
                                padding:1,
                                style: {
                                    fontWeight:'bold'
                                }, 
                                formatter: function () {
                                  return '<b>'+this.y+'%</b>';
                                },
                                distance: -40
                              },
                              showInLegend: false,
                              states: {
                                    hover: {
                                        enabled: false
                                    }
                                },
                                animation: true,
                            }
                          },
                        exporting: {
                            enabled: false
                        },
                        series: [{
                            data: [],
                           
                        }]
                    };
                    jQuery.extend(options, o);
                    options.series[0].data = cfg.data;                   
                    chart = new Highcharts.Chart(options);
            }
        });
       
        return this.each(function(){
            jQuery.pieChart(cfg.data);
        }).extend({
            cfg : cfg,
            jQuery : jQuery
        });
  };
})( jQuery );

------------------------------------------------------------------------------------------------------------------------------------

Plug-in calling: 

     $.post(path,{
         selectedtab:selected_tab
     },function(pieData){
         if(jQuery.isEmptyObject(pieData) != true){
                 $('#widget_content').pieChartWidget({                
                     renderTo: 'widget_content',
                     data: pieData,          
                 });
         }else{
             $('#widget_content').pieChartWidget({                
                  renderTo: 'widget_content',
                  sliceColors: ['#ccc'],
                  data:[{name: 'No data',y: 100,sliced: true,selected: true}],          
              });
         }
    },'json');