Custom Pie Chart using Javascript HTML5 Canvas and json to configure

Custom Pie Chart - create a custom pie chart that measures 2 separate dimensions. Regular pies slices 1st measurement Percentage of slice 2nd measurement Tutorial: [login to view URL] Slices have a 3d look when filled. Note that the 3d is just an offset of the fill portion of the slices with darker use of fill color. Explode parameter is just an offset of the pie slice from the center along the center of the pie slice Here is a sample of json data {“2D pie chart” : {title: {x: 0, y: 5, width: 500, labels: [ {label: “Assessment”, size: 14, position: “centered”, font: “Arial”}, {label: “sub label”, size: 10, position: “centered”, font: “Arial”} ]}, canvas: {width: 500, height: 500}, data : {x: 10, y: 50, width: 300, dataPoints: [ {label: “Infrastructure”, exploded: true, x: {value: .5, label: “5%”, fill: “#E0A08C”, text: “#000000”, labelPosition: “edge”}, y: {value: .633, label: “63.3%”, fill: “#A2091A”, text: “#FFFFFF”, labelPosition: “middle”} }, {label: “Domain”, exploded: true, x: {value: .1, label: “10%”, fill: “#969CBF”, text: “#000000”, labelPosition: “edge”}, y: {value: .633, label: “63.3%”, fill: “#0A3369”, text: “#FFFFFF”, labelPosition: “middle”} }, {label: “Resource”, exploded: true, x: {value: .1, label: “10%”, fill: “#FBE7AA”, text: “#000000”, labelPosition: “edge”}, y: {value: .633, label: “63.3%”, fill: “#D2AA16”, text: “#FFFFFF”, labelPosition: “middle”} }, {label: “Requirements”, exploded: true, x: {value: .1, label: “10%”, fill: “#CFE3F4”, text: “#000000”, labelPosition: “edge”}, y: {value: .633, label: “63.3%”, fill: “#69A1C7”}, text: “#FFFFFF”, labelPosition: “inside”} }, {label: “Design”, exploded: true, x: {value: .1, label: “10%”, fill: “#F6CB9D”, text: “#000000”, labelPosition: “outside”}, y: {value: .633, label: “63.3%”, fill: “#F6CB9D”, text: “#FFFFFF”, labelPosition: “outside”} }, {label: “Code”, exploded: true, x: {value: .1, label: “10%”, fill: “#AAB3D9”, text: “#000000”, labelPosition: “outside”}, y: {value: .633, label: “63.3%”, fill: “#32508D”, text: “#FFFFFF”, “labelPosition: “middle”} }, {label: “Control”, exploded: true, x: {value: .1, label: “10%”, fill: “#A291B1”, text: “#000000”, labelPosition: “outside”}, y: {value: .633, label: “63.3%”, fill: “#381755”, text: “#FFFFFF”, labelPosition: “middle”} }, {label: “Improvement”, exploded: true, x: {value: .1, label: “10%”, fill: “#D9E4AB”, text: “#000000”, labelPosition: “outside”}, y: {value: .633, label: “63.3%”, fill: “#86A724”, text: “#FFFFFF”, labelPosition: “middle”} }], }, legend : {visible : true, framed : true, test: “#FFFFFF”, x: 350, y: 50, width: 150} } Canvas establishes the full size of the space that will be used by the graph Title is the title of the chart. Use x, y, and width parameters to setup a box and place the title labels in there Data will provide the information for the slices of the pie, including the 2 measures (x is slice, and y is percentage fill of slice) Legend creates the space for the legend, using the datapoint labels, and fill colors. Milestones all must use json values (1) Draw single pie slice 10% (2) Draw fill (3d) 10% (3) Draw all other slices 10% (4) Explode slices 20% (5) Labels 10% (6) Legend and Title 15% (7) Finish testing 25%