Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 20:29:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve bubble chart sample

Browse Source 
- fix add dataset when all datasets have been removed
- set title for chart
- remove html legend
- set same size canvas as other samples
- remove user select from canvas
- set name for added datasets
This commit is contained in:
Ville Hämäläinen 2016-02-28 07:13:09 +02:00
parent 6ad533ce2b
commit 521236bd92
1 changed files with 28 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
samples/bubble.html
View File

@ -6,14 +6,16 @@
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../dist/Chart.bundle.js"></script>
<style type="text/css">
canvas {
border: 1px solid red;
}
#canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 25%;">
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
@ -21,13 +23,11 @@
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<button id="show">Show</button>
<div>
<h3>Legend</h3>
<div id="legendContainer">
</div>
</div>
<script>
var DEFAULT_DATASET_SIZE = 7;
var addedCount = 0;
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
@ -45,75 +45,23 @@
datasets: [{
label: "My First dataset",
backgroundColor: randomColor(),
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}]
data: []
}, {
label: "My Second dataset",
backgroundColor: randomColor(),
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5,
}]
data: []
}]
};
function updateLegend() {
$legendContainer = $('#legendContainer');
$legendContainer.empty();
$legendContainer.append(window.myChart.generateLegend());
// add random data to initial datasets
for(var i in bubbleChartData.datasets){
for(var j=0; j<DEFAULT_DATASET_SIZE; ++j){
bubbleChartData.datasets[i].data.push({
x: randomScalingFactor(),
y: randomScalingFactor(),
r: Math.abs(randomScalingFactor()) / 5
});
}
}
window.onload = function() {
@ -123,10 +71,12 @@
data: bubbleChartData,
options: {
responsive: true,
title:{
display:true,
text:'Chart.js Bubble Chart'
},
}
});
updateLegend();
};
$('#randomizeData').click(function() {
@ -142,16 +92,17 @@
});
});
window.myChart.update();
updateLegend();
});
$('#addDataset').click(function() {
++addedCount;
var newDataset = {
label: "My added dataset " + addedCount,
backgroundColor: randomColor(),
data: []
};
for (var index = 0; index < bubbleChartData.datasets[0].data.length; ++index) {
for (var index = 0; index < DEFAULT_DATASET_SIZE; ++index) {
newDataset.data.push({
x: randomScalingFactor(),
y: randomScalingFactor(),
@ -161,14 +112,11 @@
bubbleChartData.datasets.push(newDataset);
window.myChart.update();
updateLegend();
});
$('#addData').click(function() {
if (bubbleChartData.datasets.length > 0) {
for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
//window.myChart.addData(randomScalingFactor(), index);
bubbleChartData.datasets[index].data.push({
x: randomScalingFactor(),
y: randomScalingFactor(),
@ -177,14 +125,12 @@
}
window.myChart.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
bubbleChartData.datasets.splice(0, 1);
window.myChart.update();
updateLegend();
});
$('#removeData').click(function() {
@ -194,11 +140,6 @@
});
window.myChart.update();
updateLegend();
});
$('#show').click(function() {
document.getElementById('container').style.display = '';
});
</script>
</body>