agdar/static/data/chart-flot/code-4.json

<!-- required files -->
<script src="../assets/plugins/flot/source/jquery.canvaswrapper.js"></script>
<script src="../assets/plugins/flot/source/jquery.colorhelpers.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.saturated.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.browser.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.drawSeries.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.uiConstants.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.pie.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.time.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.resize.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.touchNavigate.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.hover.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.touch.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.selection.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.symbol.js"></script>
<script src="../assets/plugins/flot/source/jquery.flot.legend.js"></script>

<div id="interactive-pie-chart" class="h-250px"></div>

<script>
  var data = [];
  var series = 3;
  var colorArray = [app.color.orane, 'rgba('+ app.color.componentColorRgb + ', .5)', 'rgba('+ app.color.componentColorRgb + ', .25)'];
  for( var i = 0; i < series; i++) {
    data[i] = { label: 'Series'+(i+1), data: Math.floor(Math.random()*100)+1, color: colorArray[i]};
  }
  $.plot($('#interactive-pie-chart'), data, {
    series: {
      pie: { 
        show: true,
        stroke: { color: app.color.componentBg }
      }
    },
    grid: {
      hoverable: true,
      clickable: true
    }
  });
  $('#interactive-pie-chart').bind('plotclick', function(event, pos, obj) {
    if (!obj) { return; }
    var percent = parseFloat(obj.series.percent).toFixed(2);
    alert(obj.series.label + ': ' + percent + '%');
  });
&lt;/script&gt;