<!DOCTYPE html>
<html>
<head>
    <title>ChartJS - Doughnut</title>
    
    <link href="css/default.css" rel="stylesheet">
    
</head>
<body>

  <div class="chart-container">
    <div class="doughnut-chart-container">
      <canvas id="doughnut-chartcanvas-1"></canvas>
    </div>

    <div class="doughnut-chart-container">
      <canvas id="doughnut-chartcanvas-2"></canvas>
    </div>
  </div>

  <!-- javascript -->
    <!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->

<!-- OPTIONAL SCRIPTS -->
<script src="plugins/chart.js/Chart.min.js"></script>
    <script>
       $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                   
                     var name = [];
                    var marks = [];

                    for (var i in data) {

                        if( data[i].NUM > 10){
                        name.push(data[i].shortname);
                        marks.push(data[i].NUM);
                    }

                        
                    }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Total Leads',
                                backgroundColor: ["#35ACF7","#018866", "#722F37", "#722F37", "#1B3808","#633E13", "#633E13","#E62277","#989928","#6F2DA8","#7CF944","#FE2416","#35ACF7","#FCDE52","#35ACF7","#63734F","#63734F","#35ACF7","#63734F","#C71E84","#35ACF7","#7CF944","#63734F","#63734F"],
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#doughnut-chartcanvas-2");

                    var barGraph = new Chart(graphTarget, {
                        type: 'doughnut',
                        data: chartdata
                    });
                });
            }
        }
    </script>
    
</body>
</html>