agdar/static/data/chart-flot/code-8.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="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
    }
  });
&lt;/script&gt;