</head>
<body>
- <div id="canvas-holder">
+ <div id="canvas-holder" style="width:50%">
<canvas id="chart-area" width="300" height="300" />
</div>
<button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
+ var randomColor = function(opacity) {
+ return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
var config = {
});
window.myPie.update();
});
+
+ $('#addDataset').click(function() {
+ var newDataset = {
+ backgroundColor: [randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7), randomColor(0.7)],
+ data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ };
+
+ window.myPie.addDataset(newDataset);
+ });
+
+ $('#removeDataset').click(function() {
+ window.myPie.removeDataset(0);
+ });
</script>
</body>
projects / thirdparty / Chart.js.git / commitdiff
