Displaying flot PieChart from asp.net mvc json data

Question

flot chart fails to display . There are no errors popping up when debugging. but same js display data for a sparkline chart. the data is in json format and looks like this. ..

[
  {
    "label": "Female",
    "data": 43
  },
  {
    "label": "Male",
    "data": 56
  }
]

while the actual js is like this ...

<script type="text/javascript">
    $(document).ready(function () {
        $('body').addClass('light-navbar');
            $.getJSON("../../Dashboard/getGuestGenderPieData")
            .done(function (data) {
                jQuery('#guestgenderpie').sparkline(data, {
                   type: 'pie',
                   height: '140',
                   sliceColors: ['#1ab394', '#F5F5F5']
            })
        });
    });        
</script>

Answer 1

Sparkline pie charts accepts data in the form at [24, 43, 33]. where each item in this array is a slice of the pie chart. if you must send data in the initial format, then you should use a flot pie chart and not a sparkline like this :

 $(document).ready(function () { $.plot($("#guestgenderpie"), data, { series: { pie: { show: true } }, legend: { labelBoxBorderColor: "none" } }); }); 

See more options at Flot pie charts