</head>
<body>
- <div id="canvas-holder" style="width:50%">
- <canvas id="chart-area" width="300" height="300" />
+ <div id="canvas-holder" style="width:50%" width="50%">
+ <canvas id="chart-area"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
+ <div>
+ <h3>Legend</h3>
+ <div id="legendContainer">
+
+ </div>
+ </div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
window.onload = function() {
var ctx = document.getElementById("chart-area");
window.myPolarArea = Chart.PolarArea(ctx, config);
+ updateLegend();
};
+ function updateLegend() {
+ $legendContainer = $('#legendContainer');
+ $legendContainer.empty();
+ $legendContainer.append(window.myPolarArea.generateLegend());
+ }
+
$('#randomizeData').click(function() {
$.each(config.data.datasets, function(i, piece) {
$.each(piece.data, function(j, value) {
});
});
window.myPolarArea.update();
+ updateLegend();
});
$('#addData').click(function() {
config.data.datasets[index].backgroundColor.push(randomColor());
window.myPolarArea.addData(randomScalingFactor(), index);
}
+
+ updateLegend();
}
});
dataset.backgroundColor.splice(-1, 1);
window.myPolarArea.removeData(datasetIndex, -1);
});
+
+ updateLegend();
});
</script>
</body>
var Chart = root.Chart;
var helpers = Chart.helpers;
+ var defaultConfig = {
+ legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i = 0; i < data.datasets[0].data.length; i++){%><li><span style=\"background-color:<%=data.datasets[0].backgroundColor[i]%>\"><%if(data.labels && i < data.labels.length){%><%=data.labels[i]%><%}%></span></li><%}%></ul>",
+ };
+
Chart.PolarArea = function(context, config) {
+ config.options = helpers.configMerge(defaultConfig, config.options);
config.type = 'polarArea';
return new Chart(context, config);
projects / thirdparty / Chart.js.git / commitdiff
