Skip to content

Commit

Permalink
Don’t run on charts that do not have scales
Browse files Browse the repository at this point in the history 
Pie, polar area, and radar charts are not supported because they do not have two scales
  • Loading branch information
@compwright
compwright committed May 20, 2017
1 parent 91a010e commit 239ef69
Show file tree
Hide file tree
Showing 4 changed files with 427 additions and 1 deletion.
117 changes: 117 additions & 0 deletions samples/pie.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!doctype html>
<html>

<head>
<title>Pie Chart</title>
<script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
<script src="../chartjs-plugin-annotation.js"></script>
<script src="../node_modules/chart.js/samples/utils.js"></script>
</head>

<body>
<div id="canvas-holder" style="width:40%">
<canvas id="chart-area" />
</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 config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
window.chartColors.red,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
"Red",
"Orange",
"Yellow",
"Green",
"Blue"
]
},
options: {
responsive: true,
annotation: { // not supported, and should not display or error
drawTime: 'beforeDatasetsDraw',
events: ['dblclick'],
annotations: [{
type: 'box',
xScaleID: 'x-axis-1',
yScaleID: 'y-axis-1',
xMin: -120,
xMax: 20,
yMin: -120,
yMax: 20,
backgroundColor: 'rgba(101, 33, 171, 1.0)',
borderColor: 'rgb(101, 33, 171)',
borderWidth: 1,
onDblclick: function(e) {
console.log('Box', e.type, this);
}
}]
}
}
};

window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx, config);
};

document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});

window.myPie.update();
});

var colorNames = Object.keys(window.chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var newDataset = {
backgroundColor: [],
data: [],
label: 'New dataset ' + config.data.datasets.length,
};

for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());

var colorName = colorNames[index % colorNames.length];;
var newColor = window.chartColors[colorName];
newDataset.backgroundColor.push(newColor);
}

config.data.datasets.push(newDataset);
window.myPie.update();
});

document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myPie.update();
});
</script>
</body>

</html>
137 changes: 137 additions & 0 deletions samples/polar-area.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!doctype html>
<html>

<head>
<title>Polar Area Chart</title>
<script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
<script src="../chartjs-plugin-annotation.js"></script>
<script src="../node_modules/chart.js/samples/utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>

<body>
<div id="canvas-holder" style="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>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};

var chartColors = window.chartColors;
var color = Chart.helpers.color;
var config = {
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
color(chartColors.red).alpha(0.5).rgbString(),
color(chartColors.orange).alpha(0.5).rgbString(),
color(chartColors.yellow).alpha(0.5).rgbString(),
color(chartColors.green).alpha(0.5).rgbString(),
color(chartColors.blue).alpha(0.5).rgbString(),
],
label: 'My dataset' // for legend
}],
labels: [
"Red",
"Orange",
"Yellow",
"Green",
"Blue"
]
},
options: {
responsive: true,
legend: {
position: 'right',
},
title: {
display: true,
text: 'Chart.js Polar Area Chart'
},
scale: {
ticks: {
beginAtZero: true
},
reverse: false
},
animation: {
animateRotate: false,
animateScale: true
},
annotation: { // not supported, and should not display or error
drawTime: 'beforeDatasetsDraw',
events: ['dblclick'],
annotations: [{
type: 'box',
xScaleID: 'x-axis-1',
yScaleID: 'y-axis-1',
xMin: -120,
xMax: 20,
yMin: -120,
yMax: 20,
backgroundColor: 'rgba(101, 33, 171, 1.0)',
borderColor: 'rgb(101, 33, 171)',
borderWidth: 1,
onDblclick: function(e) {
console.log('Box', e.type, this);
}
}]
}
}
};

window.onload = function() {
var ctx = document.getElementById("chart-area");
window.myPolarArea = Chart.PolarArea(ctx, config);
};

document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(piece, i) {
piece.data.forEach(function(value, j) {
config.data.datasets[i].data[j] = randomScalingFactor();
});
});
window.myPolarArea.update();
});

var colorNames = Object.keys(window.chartColors);
document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
config.data.labels.push('data #' + config.data.labels.length);
config.data.datasets.forEach(function(dataset) {
var colorName = colorNames[config.data.labels.length % colorNames.length];
dataset.backgroundColor.push(window.chartColors[colorName]);
dataset.data.push(randomScalingFactor());
});
window.myPolarArea.update();
}
});
document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.pop(); // remove the label first
config.data.datasets.forEach(function(dataset) {
dataset.backgroundColor.pop();
dataset.data.pop();
});
window.myPolarArea.update();
});
</script>
</body>

</html>
Loading

0 comments on commit 239ef69

Please sign in to comment.