{"key":"piechart","name":"Pie Chart","instructions":"This will display a pie chart. Put the data labels and matching data into comma separated strings inside the labels and data fields.","requirecss":"","showatto":"1","requirejs":"//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js","shim":"","defaults":"width=600,height=400,datalabel=mydata,labels=\"jan,feb,march\",data=\"1,2,3\"","amd":"1","body":"<canvas id=\"@@AUTOID@@\" width=\"@@width@@\" height=\"@@height@@\"></canvas>\n<div id=\"@@AUTOID@@_legend\" class=\"chart-legend\"></div>","bodyend":"","script":"var ctx = document.getElementById(\"@@AUTOID@@\").getContext(\"2d\");\nvar cjoptions = {\n\n\n   //Boolean - Whether we should show a stroke on each segment\n    segmentShowStroke : true,\n\n    //String - The colour of each segment stroke\n    segmentStrokeColor : \"#fff\",\n\n    //Number - The width of each segment stroke\n    segmentStrokeWidth : 2,\n\n    //Number - The percentage of the chart that we cut out of the middle\n    percentageInnerCutout : 0, // This is 0 for Pie charts\n\n    //Number - Amount of animation steps\n    animationSteps : 100,\n\n    //String - Animation easing effect\n    animationEasing : \"easeOutBounce\",\n\n    //Boolean - Whether we animate the rotation of the Doughnut\n    animateRotate : true,\n\n    //Boolean - Whether we animate scaling the Doughnut from the centre\n    animateScale : false,\n\n    //String - A legend template\n    legendTemplate : \"<ul class=\\\"<%=name.toLowerCase()%>-legend\\\"><% for (var i=0; i<segments.length; i++){%><li><span style=\\\"background-color:<%=segments[i].fillColor%>\\\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>\"\n\n};\nvar colors = [\"#F7464A\",\"#46BFBD\",\"#FDA25C\",\"#F7404A\",\"#464FBD\",\"#FD445C\",\"#FDB45C\",\"#F7464A\",\"#46BFBD\",\"#FDA25C\",\"#F7404A\",\"#464FBD\",\"#FD445C\",\"#FDB45C\"];\nvar highlights=[\"#FDB45C\",\"#5AD3D1\",\"#FF5870\",\"#FD445C\",\"#5A63D1\",\"#FF5870\",\"#FFC870\",\"#FDB45C\",\"#5AD3D1\",\"#FF5870\",\"#FD445C\",\"#5A63D1\",\"#FF5870\",\"#FFC870\"];\nvar labels= \"@@labels@@\".split(\",\");\nvar values= \"@@data@@\".split(\",\");\nvar cjdata=[];\nfor(var i=0;i<labels.length;i++){\n\tcjdata.push({label: labels[i],color: colors[i],highlight: highlights[i],value: parseInt(values[i])});\n\n}\nvar myPieChart = new Chart(ctx).Pie(cjdata, cjoptions);\ndocument.getElementById(@@AUTOID@@ + '_legend').innerHTML = myPieChart.generateLegend();","style":".chart-legend li span{\n    display: inline-block;\n    width: 12px;\n    height: 12px;\n    margin-right: 5px;\n}","dataset":"","datasetvars":"","alternate":"","alternateend":"","version":"1.0.1"}