<!-- 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 + '%'); }); </script>