From 5400a61ff19e2ea6a39aeab7bbaff6fd9ee94782 Mon Sep 17 00:00:00 2001 From: wcatron Date: Thu, 19 Nov 2015 11:47:47 -0500 Subject: [PATCH] Update doughnut documentation for intiializer and data. --- docs/06-Pie-Doughnut-Chart.md | 54 +++++++++++++++++++++-------------- 1 file changed, 32 insertions(+), 22 deletions(-) diff --git a/docs/06-Pie-Doughnut-Chart.md b/docs/06-Pie-Doughnut-Chart.md index db2d9efd8..c1eb75469 100644 --- a/docs/06-Pie-Doughnut-Chart.md +++ b/docs/06-Pie-Doughnut-Chart.md @@ -24,35 +24,45 @@ They are also registered under two aliases in the `Chart` core. Other than their ```javascript // For a pie chart -var myPieChart = new Chart(ctx[0]).Pie(data,options); +var myPieChart = new Chart(ctx[0],{ + type:'pie', + data: data, + options: options +}); // And for a doughnut chart -var myDoughnutChart = new Chart(ctx[1]).Doughnut(data,options); +var myDoughnutChart = new Chart(ctx[1], { + type:'doughnut', + data: data, + options: options +}); ``` ### Data structure ```javascript -var data = [ - { - value: 300, - color:"#F7464A", - highlight: "#FF5A5E", - label: "Red" - }, - { - value: 50, - color: "#46BFBD", - highlight: "#5AD3D1", - label: "Green" - }, - { - value: 100, - color: "#FDB45C", - highlight: "#FFC870", - label: "Yellow" - } -] +var data = { + datasets: [ + { + data: [300, 50, 100], + backgroundColors: [ + "#F7464A", + "#46BFBD", + "#FDB45C" + ], + hoverBackgroundColor:[ + "#FF5A5E", + "#5AD3D1", + "#FFC870" + ] + }, + labels: [ + "Red", + "Green", + "Yellow" + ] + ] +} ``` For a pie chart, you must pass in an array of objects with a value and an optional color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL. -- 2.47.2