<!-- 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="donut-chart" class="h-250px"></div> <script> var data = []; var series = 3; var colorArray = [app.color.gray900, app.color.gray500, app.color.red]; var nameArray = ['Unique Visitor', 'Bounce Rate', 'Total Page Views', 'Avg Time On Site', '% New Visits']; var dataArray = [20,14,12,31,23]; for( var i = 0; i < series; i++) { data[i] = { label: nameArray[i], data: dataArray[i], color: colorArray[i] }; } $.plot($('#donut-chart'), data, { series: { pie: { innerRadius: 0.5, show: true, combine: { threshold: 0.1 }, stroke: { color: app.color.componentBg } } }, grid:{borderWidth:0, hoverable: true, clickable: true}, legend: { show: false } }); </script>