Pie Chart with Zero values- CanvasJS

Pie Chart with Zero values- CanvasJS

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<textarea id="txtMyVal">
[{"y":2169.47,"legendText":"Financial","label":"Financial"},
{"y":736.41,"legendText":"Automobile","label":"Automobile"},
{"y":529.87,"legendText":"Communication","label":"Communication"},
{"y":450.19,"legendText":"Energy","label":"Energy"},
{"y":427.84,"legendText":"Others","label":"Others"},
{"y":260.83,"legendText":"Services","label":"Services"},
{"y":237.59,"legendText":"Cons Durable","label":"Cons Durable"},
{"y":227.31,"legendText":"Engineering","label":"Engineering"},
{"y":181.83,"legendText":"Technology","label":"Technology"},
{"y":163.53,"legendText":"Construction","label":"Construction"},
{"y":5384.86,"legendText":"Total","label":"Total"}
]
</textarea>

JavaScript

var ChartVal = JSON.parse(document.getElementById("txtMyVal").value);
//alert(ChartVal);
//var objSecGraph = JSON.parse(strVal);
var chart = new CanvasJS.Chart("chartContainer",
{		
  title:{
    text: "Sector wise Asset Allocation"
  },
  animationEnabled: true,
  legend:{
    verticalAlign: "center",
    horizontalAlign: "left",
    fontSize: 12,
    fontFamily: "Helvetica"        
  },
  theme: "theme2",
  data: [
    {        
      type: "pie",       
      indexLabelFontFamily: "Garamond",       
      indexLabelFontSize: 12,
      indexLabel: "{label} {y}%",
      startAngle:-20,      
      showInLegend: true,
      toolTipContent:"{legendText} {y}%",
      dataPoints: ChartVal
    }
  ]
});
chart.render();