Doughnut Chart in chart.js

by Amir Danish

HTML

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="myCharts">
</div>

JavaScript

var jsonData = [{"cloudPixels": 14208.0, "nullPixels": 0.0, "possibleCloudPixels": 13191.0, "nonCloudPixels": 93396.0, "imageID": "LC82040212014254MTI00", "totalPixels": 120795.0},{"cloudPixels": 82408.0, "nullPixels": 0.0, "possibleCloudPixels": 5085.0, "nonCloudPixels": 30420.0, "imageID": "LC82050212014245KIS00", "totalPixels": 117913.0}]


    var options = {
        animation: false
    };
    var canvasArray = [];
var dataArray = [];

for (var i = 0; i < jsonData.length; i++) {
          var chartJSON = [{
              value:jsonData[i].nullPixels,
              color:"#000000",
           highlight: "#000000",
           label: "Null Pixels"

          },{
              value:jsonData[i].nonCloudPixels,
              color:"#1C9915",
           highlight: "#1C9915",
           label: "Non Cloud Pixels"

          },{
              value:jsonData[i].cloudPixels,
              color:"#F7464A",
           highlight: "#FF5A5E",
           label: "Cloud Pixels"

          },{
              value:jsonData[i].possibleCloudPixels,
              color:"#E8AC0C",
           highlight: "#E8AC0C",
           label: "Maybe Clear Pixels"

          }


          ]
        document.getElementById("myCharts").innerHTML =document.getElementById("myCharts").innerHTML += "<canvas id=\""+jsonData[i].imageID+"\"></canvas>"
var ctxPrep = "#" + jsonData[i].imageID;
canvasArray.push(ctxPrep);
dataArray.push(chartJSON);
        var ctx = $("#"+jsonData[i].imageID).get(0).getContext("2d");
        // This will get the first returned node in the jQuery collection.
        var myNewChart = new Chart(ctx).Pie(chartJSON);

        };