};
var config = {
+ type: 'doughnut',
data: {
datasets: [{
data: [
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
- window.myDoughnut = Chart.Doughnut(ctx, config);
+ window.myDoughnut = new Chart(ctx, config);
console.log(window.myDoughnut);
updateLegend();
var Chart = root.Chart;
var helpers = Chart.helpers;
- var defaultConfig = {
- aspectRatio: 1,
- legendCallback: function(chart) {
- var text = [];
- text.push('<ul class="' + chart.id + '-legend">');
-
- if (chart.data.datasets.length) {
- for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
- text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
- if (chart.data.labels[i]) {
- text.push(chart.data.labels[i]);
- }
- text.push('</span></li>');
- }
- }
-
- text.push('</ul>');
- return text.join("");
- }
- };
-
Chart.Doughnut = function(context, config) {
- config.options = helpers.configMerge(defaultConfig, config.options);
config.type = 'doughnut';
return new Chart(context, config);
var Chart = root.Chart;
var helpers = Chart.helpers;
- var defaultConfig = {
- aspectRatio: 1,
- legendCallback: function(chart) {
- var text = [];
- text.push('<ul class="' + chart.id + '-legend">');
-
- if (chart.data.datasets.length) {
- for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
- text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
- if (chart.data.labels[i]) {
- text.push(chart.data.labels[i]);
- }
- text.push('</span></li>');
- }
- }
-
- text.push('</ul>');
- return text.join("");
- }
- };
-
Chart.PolarArea = function(context, config) {
- config.options = helpers.configMerge(defaultConfig, config.options);
config.type = 'polarArea';
return new Chart(context, config);
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
},
+ aspectRatio: 1,
hover: {
mode: 'single'
},
+ legendCallback: function(chart) {
+ var text = [];
+ text.push('<ul class="' + chart.id + '-legend">');
+
+ if (chart.data.datasets.length) {
+ for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
+ text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
+ if (chart.data.labels[i]) {
+ text.push(chart.data.labels[i]);
+ }
+ text.push('</span></li>');
+ }
+ }
+
+ text.push('</ul>');
+ return text.join("");
+ },
+ legend: {
+ labels: {
+ generateLabels: function(data) {
+ return data.labels.slice();
+ }
+ }
+ },
+
//The percentage of the chart that we cut out of the middle.
cutoutPercentage: 50,
animateRotate: true,
animateScale: true,
+ aspectRatio: 1,
+ legendCallback: function(chart) {
+ var text = [];
+ text.push('<ul class="' + chart.id + '-legend">');
+
+ if (chart.data.datasets.length) {
+ for (var i = 0; i < chart.data.datasets[0].data.length; ++i) {
+ text.push('<li><span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">');
+ if (chart.data.labels[i]) {
+ text.push(chart.data.labels[i]);
+ }
+ text.push('</span></li>');
+ }
+ }
+
+ text.push('</ul>');
+ return text.join("");
+ },
+ legend: {
+ labels: {
+ generateLabels: function(data) {
+ return data.labels.slice();
+ }
+ }
+ },
+
// Need to override these to give a nice default
tooltips: {
callbacks: {
callback: function(dataset) {
return '' + dataset.label;
},
+
+ // Generates labels shown in the legend
+ generateLabels: function(data) {
+ return data.datasets.map(function(dataset) {
+ return this.options.labels.callback.call(this, dataset);
+ }, this);
+ }
},
};
initialize: function(config) {
helpers.extend(this, config);
- this.options = helpers.configMerge(Chart.defaults.global.legend, config.options);
// Contains hit boxes for each dataset (in dataset order)
this.legendHitBoxes = [];
+
+ // Are we in doughnut mode which has a different data type
+ this.doughnutMode = false;
},
// These methods are ordered by lifecyle. Utilities then follow.
beforeBuildLabels: helpers.noop,
buildLabels: function() {
- this.labels = this.chart.data.datasets.map(function(dataset) {
- return this.options.labels.callback.call(this, dataset);
- }, this);
+ this.labels = this.options.labels.generateLabels.call(this, this.chart.data);
},
afterBuildLabels: helpers.noop,
ctx.font = labelFont;
helpers.each(this.labels, function(label, i) {
-
var dataset = this.chart.data.datasets[i];
var backgroundColor = dataset.backgroundColor;
var borderColor = dataset.borderColor;