I added new samples to explain behaviour and modified all samples to have consistent styling. In updating the samples,
I removed the use of jQuery and instead use standard methods.
For the custom tooltip samples, I updated the styling to show color boxes like the regular tooltips.
<head>
<title> Animation Callbacks </title>
<script src="../../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
<br>
<br>
<button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
- var $progress = $('#animationProgress');
+ var progress = document.getElementById('animationProgress');
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
- label: "My First dataset ",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false,
- borderDash: [5, 5],
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
label: "My Second dataset ",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+ fill: false,
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}]
},
options: {
title:{
display:true,
- text:"Chart.js Line Chart - Animation Progress Bar"
+ text: "Chart.js Line Chart - Animation Progress Bar"
},
animation: {
duration: 2000,
onProgress: function(animation) {
- $progress.attr({
- value: animation.animationObject.currentStep / animation.animationObject.numSteps,
- });
+ progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
},
onComplete: function(animation) {
window.setTimeout(function() {
- $progress.attr({
- value: 0
- });
+ progress.value = 0;
}, 2000);
}
- },
- tooltips: {
- mode: 'index',
- },
- scales: {
- xAxes: [{
- scaleLabel: {
- show: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- scaleLabel: {
- show: true,
- labelString: 'Value'
- },
- }]
}
}
};
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
-
- });
-
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
});
window.myLine.update();
<head>
<title>Horizontal Bar Chart</title>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};
+ var color = Chart.helpers.color;
+
var horizontalBarChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
- backgroundColor: "rgba(220,220,220,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ borderWidth: 1,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
- hidden: true,
label: 'Dataset 2',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: 'Dataset 3',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}]
};
data: horizontalBarChartData,
options: {
// Elements options apply to all of the options unless overridden in a dataset
- // In this case, we are setting the border of each horizontal bar to be 2px wide and green
+ // In this case, we are setting the border of each horizontal bar to be 2px wide
elements: {
rectangle: {
borderWidth: 2,
- borderColor: 'rgb(0, 255, 0)',
- borderSkipped: 'left'
}
},
responsive: true,
};
- $('#randomizeData').click(function() {
+ document.getElementById('randomizeData').addEventListener('click', function() {
var zero = Math.random() < 0.2 ? true : false;
- $.each(horizontalBarChartData.datasets, function(i, dataset) {
- dataset.backgroundColor = randomColor();
+ horizontalBarChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return zero ? 0.0 : randomScalingFactor();
});
window.myHorizontalBar.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[horizontalBarChartData.datasets.length % colorNames.length];;
+ var dsColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + horizontalBarChartData.datasets.length,
- backgroundColor: randomColor(),
+ backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+ borderColor: dsColor,
data: []
};
window.myHorizontalBar.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (horizontalBarChartData.datasets.length > 0) {
var month = MONTHS[horizontalBarChartData.labels.length % MONTHS.length];
horizontalBarChartData.labels.push(month);
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
horizontalBarChartData.datasets.splice(0, 1);
window.myHorizontalBar.update();
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
horizontalBarChartData.labels.splice(-1, 1); // remove the label first
horizontalBarChartData.datasets.forEach(function (dataset, datasetIndex) {
<head>
<title>Bar Chart Multi Axis</title>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function() {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- };
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
- backgroundColor: "rgba(220,220,220,0.5)",
+ backgroundColor: [
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
+ window.chartColors.purple,
+ window.chartColors.red
+ ],
yAxisID: "y-axis-1",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
label: 'Dataset 2',
- backgroundColor: "rgba(151,187,205,0.5)",
+ backgroundColor: window.chartColors.grey,
yAxisID: "y-axis-2",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: 'Dataset 3',
- backgroundColor: [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()],
- yAxisID: "y-axis-1",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
- window.myBar = Chart.Bar(ctx, {
+ window.myBar = new Chart(ctx, {
+ type: 'bar',
data: barChartData,
options: {
responsive: true,
- hoverMode: 'index',
- hoverAnimationDuration: 400,
- stacked: false,
title:{
display:true,
text:"Chart.js Bar Chart - Multi Axis"
},
+ tooltips: {
+ mode: 'index',
+ intersect: true
+ },
scales: {
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
});
};
- $('#randomizeData').click(function() {
- $.each(barChartData.datasets, function(i, dataset) {
- if (Chart.helpers.isArray(dataset.backgroundColor)) {
- dataset.backgroundColor= [randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor(), randomColor()];
- } else {
- dataset.backgroundColor= randomColor();
- }
-
- dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
-
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ barChartData.datasets.forEach(function(dataset, i) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
});
window.myBar.update();
});
<head>
<title>Stacked Bar Chart</title>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
- backgroundColor: "rgba(220,220,220,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
label: 'Dataset 2',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
label: 'Dataset 3',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}]
};
text:"Chart.js Bar Chart - Stacked"
},
tooltips: {
- mode: 'index'
+ mode: 'index',
+ intersect: false
},
responsive: true,
scales: {
});
};
- $('#randomizeData').click(function() {
- $.each(barChartData.datasets, function(i, dataset) {
- dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
-
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ barChartData.datasets.forEach(function(dataset, i) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
});
window.myBar.update();
});
<head>
<title>Bar Chart</title>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};
+ var color = Chart.helpers.color;
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
- backgroundColor: "rgba(220,220,220,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ borderWidth: 1,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
- hidden: true,
label: 'Dataset 2',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: 'Dataset 3',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.blue,
+ borderWidth: 1,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}]
};
type: 'bar',
data: barChartData,
options: {
- // Elements options apply to all of the options unless overridden in a dataset
- // In this case, we are setting the border of each bar to be 2px wide and green
- elements: {
- rectangle: {
- borderWidth: 2,
- borderColor: 'rgb(0, 255, 0)',
- borderSkipped: 'bottom'
- }
- },
responsive: true,
legend: {
position: 'top',
};
- $('#randomizeData').click(function() {
+ document.getElementById('randomizeData').addEventListener('click', function() {
var zero = Math.random() < 0.2 ? true : false;
- $.each(barChartData.datasets, function(i, dataset) {
- dataset.backgroundColor = randomColor();
+ barChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return zero ? 0.0 : randomScalingFactor();
});
window.myBar.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[barChartData.datasets.length % colorNames.length];;
+ var dsColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + barChartData.datasets.length,
- backgroundColor: randomColor(),
+ backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+ borderColor: dsColor,
+ borderWidth: 1,
data: []
};
window.myBar.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (barChartData.datasets.length > 0) {
var month = MONTHS[barChartData.labels.length % MONTHS.length];
barChartData.labels.push(month);
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
barChartData.datasets.splice(0, 1);
window.myBar.update();
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.datasets.forEach(function(dataset, datasetIndex) {
<head>
<title>Bubble Chart</title>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../dist/Chart.bundle.js"></script>
+ <script src="chartColors.js"></script>
<style type="text/css">
canvas{
-moz-user-select: none;
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function() {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- };
+ var color = Chart.helpers.color;
var bubbleChartData = {
animation: {
duration: 10000
},
datasets: [{
label: "My First dataset",
- backgroundColor: randomColor(),
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ borderWidth: 1,
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}, {
label: "My Second dataset",
- backgroundColor: randomColor(),
+ backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.orange,
+ borderWidth: 1,
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
display:true,
text:'Chart.js Bubble Chart'
},
+ tooltips: {
+ mode: 'point'
+ }
}
});
};
- $('#randomizeData').click(function() {
- var zero = Math.random() < 0.2 ? true : false;
- $.each(bubbleChartData.datasets, function(i, dataset) {
- dataset.backgroundColor = randomColor();
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ bubbleChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return {
x: randomScalingFactor(),
window.myChart.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
++addedCount;
+ var colorName = colorNames[bubbleChartData.datasets.length % colorNames.length];;
+ var dsColor = window.chartColors[colorName];
var newDataset = {
label: "My added dataset " + addedCount,
- backgroundColor: randomColor(),
+ backgroundColor: color(dsColor).alpha(0.5).rgbString(),
+ borderColor: dsColor,
+ borderWidth: 1,
data: []
};
window.myChart.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (bubbleChartData.datasets.length > 0) {
for (var index = 0; index < bubbleChartData.datasets.length; ++index) {
bubbleChartData.datasets[index].data.push({
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
bubbleChartData.datasets.splice(0, 1);
window.myChart.update();
});
- $('#removeData').click(function() {
-
+ document.getElementById('removeData').addEventListener('click', function() {
bubbleChartData.datasets.forEach(function(dataset, datasetIndex) {
dataset.data.pop();
});
--- /dev/null
+window.chartColors = {
+ red: 'rgb(255, 99, 132)',
+ orange: 'rgb(255, 159, 64)',
+ yellow: 'rgb(255, 205, 86)',
+ green: 'rgb(75, 192, 192)',
+ blue: 'rgb(54, 162, 235)',
+ purple: 'rgb(153, 102, 255)',
+ grey: 'rgb(231,233,237)'
+}
\ No newline at end of file
<head>
<title>Combo Bar-Line Chart</title>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../dist/Chart.bundle.js"></script>
+ <script src="chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
var chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
- type: 'bar',
+ type: 'line',
label: 'Dataset 1',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- borderColor: 'white',
- borderWidth: 2
+ borderColor: window.chartColors.blue,
+ borderWidth: 2,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
- type: 'line',
+ type: 'bar',
label: 'Dataset 2',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
borderColor: 'white',
borderWidth: 2
}, {
type: 'bar',
label: 'Dataset 3',
- backgroundColor: "rgba(220,220,220,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, ]
+ backgroundColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
};
window.onload = function() {
title: {
display: true,
text: 'Chart.js Combo Bar Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: true
}
}
});
};
- $('#randomizeData').click(function() {
- $.each(chartData.datasets, function(i, dataset) {
- dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
-
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ chartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
});
window.myMixedChart.update();
});
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Custom Tooltips using Data Points</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas{
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- .chartjs-tooltip {
- opacity: 1;
- position: absolute;
- background: rgba(0, 0, 0, .7);
- color: white;
- border-radius: 3px;
- -webkit-transition: all .1s ease;
- transition: all .1s ease;
- pointer-events: none;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
- padding: 4px;
- }
-
- .chartjs-tooltip-key {
- display: inline-block;
- width: 10px;
- height: 10px;
- }
- </style>
-</head>
-
-<body>
- <div id="canvas-holder1" style="width:75%;">
- <canvas id="chart1"></canvas>
- </div>
- <div class="chartjs-tooltip" id="tooltip-0"></div>
- <div class="chartjs-tooltip" id="tooltip-1"></div>
- <script>
- var customTooltips = function (tooltip) {
- $(this._chart.canvas).css("cursor", "pointer");
-
- $(".chartjs-tooltip").css({
- opacity: 0,
- });
-
- if (!tooltip || !tooltip.opacity) {
- return;
- }
-
- if (tooltip.dataPoints.length > 0) {
- tooltip.dataPoints.forEach(function (dataPoint) {
- var content = [dataPoint.xLabel, dataPoint.yLabel].join(": ");
- var $tooltip = $("#tooltip-" + dataPoint.datasetIndex);
-
- $tooltip.html(content);
- $tooltip.css({
- opacity: 1,
- top: dataPoint.y + "px",
- left: dataPoint.x + "px",
- });
- });
- }
- };
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
- var lineChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- pointHitRadius: 100,
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- pointHitRadius: 100,
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }]
- };
-
- window.onload = function() {
- var chartEl = document.getElementById("chart1");
- var chart = new Chart(chartEl, {
- type: "line",
- data: lineChartData,
- options: {
- title:{
- display: true,
- text: "Chart.js - Custom Tooltips using Data Points"
- },
- tooltips: {
- enabled: false,
- custom: customTooltips
- }
- }
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-
-<!doctype html>
-<html>
-
-<head>
- <title>Combo Bar-Line Chart</title>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../dist/Chart.bundle.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width: 75%">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
-
- var barChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- type: 'bar',
- label: 'Dataset 1',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- borderColor: 'white',
- borderWidth: 2
- }, {
- type: 'line',
- label: 'Dataset 2',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- borderColor: 'white',
- borderWidth: 2
- }, {
- type: 'bar',
- label: 'Dataset 3',
- backgroundColor: "rgba(220,220,220,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, ]
-
- };
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myBar = new Chart(ctx, {
- type: 'bar',
- data: barChartData,
- options: {
- responsive: true,
- title: {
- display: true,
- text: 'Chart.js Combo Bar Line Chart'
- },
- animation: {
- onComplete: function () {
- var chartInstance = this.chart;
- var ctx = chartInstance.ctx;
- ctx.textAlign = "center";
-
- Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
- var meta = chartInstance.controller.getDatasetMeta(i);
- Chart.helpers.each(meta.data.forEach(function (bar, index) {
- ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 10);
- }),this)
- }),this);
- }
- }
- }
- });
- };
-
- $('#randomizeData').click(function() {
- $.each(barChartData.datasets, function(i, dataset) {
- dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
- dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
-
- });
- window.myBar.update();
- });
- </script>
-</body>
-
-</html>
--- /dev/null
+
+<!doctype html>
+<html>
+
+<head>
+ <title>Labelling Data Points</title>
+ <script src="../dist/Chart.bundle.js"></script>
+ <script src="chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width: 75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+ };
+
+ var color = Chart.helpers.color;
+ var barChartData = {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ type: 'bar',
+ label: 'Dataset 1',
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ type: 'line',
+ label: 'Dataset 2',
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ type: 'bar',
+ label: 'Dataset 3',
+ backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+ };
+
+ // Define a plugin to provide data labels
+ Chart.plugins.register({
+ afterDatasetsDraw: function(chartInstance, easing) {
+ // To only draw at the end of animation, check for easing === 1
+ var ctx = chartInstance.chart.ctx;
+
+ chartInstance.data.datasets.forEach(function (dataset, i) {
+ var meta = chartInstance.getDatasetMeta(i);
+ if (!meta.hidden) {
+ meta.data.forEach(function(element, index) {
+ // Draw the text in black, with the specified font
+ ctx.fillStyle = 'rgb(0, 0, 0)';
+
+ var fontSize = 16;
+ var fontStyle = 'normal';
+ var fontFamily = 'Helvetica Neue';
+ ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
+
+ // Just naively convert to string for now
+ var dataString = dataset.data[index].toString();
+
+ // Make sure alignment settings are correct
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+
+ var padding = 5;
+ var position = element.tooltipPosition();
+ ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
+ });
+ }
+ });
+ }
+ });
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myBar = new Chart(ctx, {
+ type: 'bar',
+ data: barChartData,
+ options: {
+ responsive: true,
+ title: {
+ display: true,
+ text: 'Chart.js Combo Bar Line Chart'
+ },
+ }
+ });
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ barChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ })
+ });
+ window.myBar.update();
+ });
+ </script>
+</body>
+
+</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "dataset - big points",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- pointRadius: 15,
- pointHoverRadius: 10,
- }, {
- label: "dataset - individual point sizes",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- pointRadius: [2, 4, 6, 18, 0, 12, 20],
- }, {
- label: "dataset - large pointHoverRadius",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- pointHoverRadius: 30,
- }, {
- label: "dataset - large pointHitRadius",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- pointHitRadius: 20,
- }]
- },
- options: {
- responsive: true,
- legend: {
- position: 'bottom',
- },
- hover: {
- mode: 'index'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- },
- title: {
- display: true,
- text: 'Chart.js Line Chart - Different point sizes'
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- var background = randomColor(0.5);
- dataset.borderColor = background;
- dataset.backgroundColor = background;
- dataset.pointBorderColor = background;
- dataset.pointBackgroundColor = background;
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- if (Array.isArray(dataset.pointRadius)) {
- dataset.pointRadius.push(Math.random() * 30);
- }
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- if (Array.isArray(dataset.pointRadius)) {
- dataset.pointRadius.pop();
- }
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
<head>
<title>Doughnut Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
var config = {
type: 'doughnut',
randomScalingFactor(),
],
backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
],
label: 'Dataset 1'
- }, {
- hidden: true,
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- label: 'Dataset 2'
- }, {
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- label: 'Dataset 3'
}],
labels: [
"Red",
- "Green",
+ "Orange",
"Yellow",
- "Grey",
- "Dark Grey"
+ "Green",
+ "Blue"
]
},
options: {
window.myDoughnut = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
-
- dataset.backgroundColor = dataset.backgroundColor.map(function() {
- return randomColor(0.7);
- });
});
window.myDoughnut.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
var newDataset = {
backgroundColor: [],
data: [],
for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
- newDataset.backgroundColor.push(randomColor(0.7));
+
+ var colorName = colorNames[index % colorNames.length];;
+ var newColor = window.chartColors[colorName];
+ newDataset.backgroundColor.push(newColor);
}
config.data.datasets.push(newDataset);
window.myDoughnut.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
config.data.labels.push('data #' + config.data.labels.length);
- $.each(config.data.datasets, function(index, dataset) {
+ var colorName = colorNames[config.data.datasets[0].data.length % colorNames.length];;
+ var newColor = window.chartColors[colorName];
+
+ config.data.datasets.forEach(function(dataset) {
dataset.data.push(randomScalingFactor());
- dataset.backgroundColor.push(randomColor(0.7));
+ dataset.backgroundColor.push(newColor);
});
window.myDoughnut.update();
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myDoughnut.update();
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
- config.data.datasets.forEach(function(dataset, datasetIndex) {
+ config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
dataset.backgroundColor.pop();
});
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Suggested Min/Max Settings</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ margin-bottom: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container"></div>
+ <script>
+ function createConfig(gridlines, title) {
+ return {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 39, 20, 25, 34, 0],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [18, 33, 22, 19, 11, 39, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display: true,
+ text: title
+ },
+ scales: {
+ xAxes: [{
+ gridLines: gridlines
+ }],
+ yAxes: [{
+ gridLines: gridlines,
+ ticks: {
+ min: 0,
+ max: 100,
+ stepSize: 10
+ }
+ }]
+ }
+ }
+ };
+ }
+
+ window.onload = function() {
+ var container = document.querySelector('.container');
+
+ [{
+ title: 'Display: true',
+ gridLines: {
+ display: true
+ }
+ }, {
+ title: 'Display: false',
+ gridLines: {
+ display: false
+ }
+ }, {
+ title: 'Display: false, no border',
+ gridLines: {
+ display: false,
+ drawBorder: false
+ }
+ }, {
+ title: 'DrawOnChartArea: false',
+ gridLines: {
+ display: true,
+ drawBorder: true,
+ drawOnChartArea: false,
+ }
+ }, {
+ title: 'DrawTicks: false',
+ gridLines: {
+ display: true,
+ drawBorder: true,
+ drawOnChartArea: true,
+ drawTicks: false,
+ }
+ }].forEach(function(details) {
+ var div = document.createElement('div');
+ div.classList.add('chart-container');
+
+ var canvas = document.createElement('canvas');
+ div.appendChild(canvas);
+ container.appendChild(div);
+
+ var ctx = canvas.getContext('2d');
+ var config = createConfig(details.gridLines, details.title);
+ new Chart(ctx, config);
+ });
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Chart with xAxis Filtering</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ fill: false,
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: "My Second dataset",
+ fill: false,
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:"Chart.js Line Chart - X-Axis Filter"
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ ticks: {
+ callback: function(dataLabel, index) {
+ // Hide the label of every 2nd dataset. return null to hide the grid line too
+ return index % 2 === 0 ? dataLabel : '';
+ }
+ }
+ }],
+ yAxes: [{
+ display: true,
+ beginAtZero: false
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Suggested Min/Max Settings</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 39, 20, 25, 34, -10],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [18, 33, 22, 19, 11, 39, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display: true,
+ text: 'Grid Line Settings'
+ },
+ scales: {
+ yAxes: [{
+ gridLines: {
+ drawBorder: false,
+ color: ['pink', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']
+ },
+ ticks: {
+ min: 0,
+ max: 100,
+ stepSize: 10
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
<head>
<title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas{
-moz-user-select: none;
label: "My First dataset",
data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
fill: false,
- borderDash: [5, 5],
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red
}]
},
options: {
responsive: true,
title:{
display:true,
- text:'Chart.js Line Chart'
+ text:'Chart with Non Numeric Y Axis'
},
scales: {
xAxes: [{
}
};
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:90%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: [["June","2015"], "July", "August", "September", "October", "November", "December", ["January","2016"],"February", "March", "April", "May"],
+ datasets: [{
+ label: "My First dataset",
+ fill: false,
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: "My Second dataset",
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Chart with Multiline Labels'
+ },
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Legend Point Style</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="chart-container">
+ <canvas id="chart-legend-normal"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-pointstyle"></canvas>
+ </div>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ };
+
+ var color = Chart.helpers.color;
+ function createConfig(colorName) {
+ return {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
+ borderColor: window.chartColors[colorName],
+ borderWidth: 1,
+ pointStyle: 'rectRot',
+ pointRadius: 5,
+ pointBorderColor: 'rgb(0, 0, 0)'
+ }]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ labels: {
+ usePointStyle: false
+ }
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ },
+ title: {
+ display: true,
+ text: 'Normal Legend'
+ }
+ }
+ };
+ }
+
+ function createPointStyleConfig(colorName) {
+ var config = createConfig(colorName);
+ config.options.legend.labels.usePointStyle = true;
+ config.options.title.text = 'Point Style Legend';
+ return config;
+ }
+
+ window.onload = function() {
+ [{
+ id: 'chart-legend-normal',
+ config: createConfig('red')
+ }, {
+ id: 'chart-legend-pointstyle',
+ config: createPointStyleConfig('blue')
+ }].forEach(function(details) {
+ var ctx = document.getElementById(details.id).getContext('2d');
+ new Chart(ctx, details.config)
+ })
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Legend Positions</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="chart-container">
+ <canvas id="chart-legend-top"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-right"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-bottom"></canvas>
+ </div>
+ <div class="chart-container">
+ <canvas id="chart-legend-left"></canvas>
+ </div>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ };
+
+ var color = Chart.helpers.color;
+ function createConfig(legendPosition, colorName) {
+ return {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: color(window.chartColors[colorName]).alpha(0.5).rgbString(),
+ borderColor: window.chartColors[colorName],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ position: legendPosition,
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ },
+ title: {
+ display: true,
+ text: 'Legend Position: ' + legendPosition
+ }
+ }
+ };
+ }
+
+ window.onload = function() {
+ [{
+ id: 'chart-legend-top',
+ legendPosition: 'top',
+ color: 'red'
+ }, {
+ id: 'chart-legend-right',
+ legendPosition: 'right',
+ color: 'blue'
+ }, {
+ id: 'chart-legend-bottom',
+ legendPosition: 'bottom',
+ color: 'green'
+ }, {
+ id: 'chart-legend-left',
+ legendPosition: 'left',
+ color: 'yellow'
+ }].forEach(function(details) {
+ var ctx = document.getElementById(details.id).getContext('2d');
+ var config = createConfig(details.legendPosition, details.color);
+ new Chart(ctx, config)
+ })
+ };
+ </script>
+</body>
+
+</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart with Custom Tooltips</title>
- <script src="../dist/Chart.bundle.js"></script>
- <style>
- canvas{
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- #chartjs-tooltip {
- opacity: 1;
- position: absolute;
- background: rgba(0, 0, 0, .7);
- color: white;
- border-radius: 3px;
- -webkit-transition: all .1s ease;
- transition: all .1s ease;
- pointer-events: none;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
- }
-
- .chartjs-tooltip-key {
- display: inline-block;
- width: 10px;
- height: 10px;
- }
- </style>
-</head>
-
-<body>
- <div id="canvas-holder1" style="width:75%;">
- <canvas id="chart"/>
- </div>
- <script>
- Chart.defaults.global.pointHitDetectionRadius = 1;
-
- var customTooltips = function(tooltip) {
- // Tooltip Element
- var tooltipEl = document.getElementById('chartjs-tooltip');
-
- if (!tooltipEl) {
- var div = document.createElement('div');
- div.id = 'chartjs-tooltip';
- document.body.appendChild(div);
- tooltipEl = document.getElementById('chartjs-tooltip');
- }
-
- // Hide if no tooltip
- if (tooltip.opacity === 0) {
- tooltipEl.style.opacity = 0;
- document.querySelector('.chartjs-wrap').style.cursor = 'default';
- return;
- }
-
- this._chart.canvas.style.cursor = 'pointer';
-
- // Set caret Position
- tooltipEl.classList.remove('above', 'below', 'no-transform');
- if (tooltip.yAlign) {
- tooltipEl.classList.add(tooltip.yAlign);
- } else {
- tooltipEl.classList.add('no-transform');
- }
-
- function joinBody(bodyItem) {
- return [].concat(bodyItem.before, bodyItem.lines, bodyItem.after).join('\n')
- }
-
- // Set Text
- if (tooltip.body) {
- var innerHtml = [
- (tooltip.beforeTitle || []).join('\n'),
- (tooltip.title || []).join('\n'),
- (tooltip.afterTitle || []).join('\n'),
- (tooltip.beforeBody || []).join('\n'),
- (tooltip.body || []).map(joinBody).join('\n'),
- (tooltip.afterBody || []).join('\n'),
- (tooltip.beforeFooter || []).join('\n'),
- (tooltip.footer || []).join('\n'),
- (tooltip.afterFooter || []).join('\n')
- ];
- tooltipEl.innerHTML = innerHtml.join('\n');
- }
-
- // Find Y Location on page
- var top = 0;
- if (tooltip.yAlign) {
- if (tooltip.yAlign == 'above') {
- top = tooltip.caretY - tooltip.caretHeight - tooltip.caretPadding;
- } else {
- top = tooltip.caretY + tooltip.caretHeight + tooltip.caretPadding;
- }
- }
-
- var position = this._chart.canvas.getBoundingClientRect();
-
- // Display, position, and set styles for font
- tooltipEl.style.opacity = 1;
- tooltipEl.style.width = tooltip.width ? (tooltip.width + 'px') : 'auto';
- tooltipEl.style.left = position.left + tooltip.caretX + 'px';
- tooltipEl.style.top = position.top + top + 'px';
- tooltipEl.style.fontFamily = tooltip._fontFamily;
- tooltipEl.style.fontSize = tooltip.fontSize;
- tooltipEl.style.fontStyle = tooltip._fontStyle;
- tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
- };
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- };
- var lineChartData = {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }]
- };
-
- window.onload = function() {
- var chartEl = document.getElementById("chart");
- window.myLine = new Chart(chartEl, {
- type: 'line',
- data: lineChartData,
- options: {
- title:{
- display:true,
- text:'Chart.js Line Chart - Custom Tooltips'
- },
- tooltips: {
- enabled: false,
- custom: customTooltips
- }
- }
- });
- };
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- }, {
- label: "My Third dataset - No bezier",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- lineTension: 0,
- fill: false,
- }, {
- label: "My Fourth dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- }]
- },
- options: {
- responsive: true,
- legend: {
- position: 'bottom',
- },
- hover: {
- mode: 'index'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- },
- title: {
- display: true,
- text: 'Chart.js Line Chart - Legend'
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- var background = randomColor(0.5);
- dataset.borderColor = background;
- dataset.backgroundColor = background;
- dataset.pointBorderColor = background;
- dataset.pointBackgroundColor = background;
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var background = randomColor(0.5);
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: background,
- backgroundColor: background,
- pointBorderColor: background,
- pointBackgroundColor: background,
- pointBorderWidth: 1,
- fill: false,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart - Logarithmic'
- },
- scales: {
- xAxes: [{
- display: true,
- gridLines: {
- color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
- },
- scaleLabel: {
- display: true,
- labelString: 'x axis'
- }
- }],
- yAxes: [{
- display: true,
- type: 'logarithmic',
- scaleLabel: {
- display: true,
- labelString: 'y axis'
- }
- }]
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- for (var index = 0; index < config.data.datasets.length; ++index) {
- config.data.datasets[index].data.push(randomScalingFactor());
- }
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas{
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:90%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="changeDataObject">Change Data Object</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- //return 0;
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: [["June","2015"], "July", "August", "September", "October", "November", "December", ["January","2016"],"February", "March", "April", "May"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- }, {
- hidden: true,
- label: 'hidden dataset',
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- callbacks: {
- // beforeTitle: function() {
- // return '...beforeTitle';
- // },
- // afterTitle: function() {
- // return '...afterTitle';
- // },
- // beforeBody: function() {
- // return '...beforeBody';
- // },
- // afterBody: function() {
- // return '...afterBody';
- // },
- // beforeFooter: function() {
- // return '...beforeFooter';
- // },
- // footer: function() {
- // return 'Footer';
- // },
- // afterFooter: function() {
- // return '...afterFooter';
- // },
- }
- },
- hover: {
- mode: 'dataset'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- show: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- show: true,
- labelString: 'Value'
- },
- ticks: {
- suggestedMin: -10,
- suggestedMax: 250,
- }
- }]
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#changeDataObject').click(function() {
- config.data = {
- labels: ["July", "August", "September", "October", "November", "December"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- // Update the chart
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '1') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }, {
- label: "My Third dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }, {
- label: "My Third dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:"Chart.js Line Chart - Stacked Area"
- },
- tooltips: {
- mode: 'index',
- },
- hover: {
- mode: 'index'
- },
- scales: {
- xAxes: [{
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- stacked: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- }
- }]
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- var color = randomColor(1);
- dataset.borderColor = color;
- dataset.backgroundColor = color;
- dataset.pointBorderColor = color;
- dataset.pointBackgroundColor = color;
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas{
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="changeDataObject">Change Data Object</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? -1 : 1) * Math.round(Math.random() * 100);
- //return 0;
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- steppedLine: true,
- borderDash: [5, 5],
- }, {
- hidden: true,
- label: 'hidden dataset',
- steppedLine: true,
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }, {
- label: "My Second dataset",
- steppedLine: true,
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- callbacks: {
- // beforeTitle: function() {
- // return '...beforeTitle';
- // },
- // afterTitle: function() {
- // return '...afterTitle';
- // },
- // beforeBody: function() {
- // return '...beforeBody';
- // },
- // afterBody: function() {
- // return '...afterBody';
- // },
- // beforeFooter: function() {
- // return '...beforeFooter';
- // },
- // footer: function() {
- // return 'Footer';
- // },
- // afterFooter: function() {
- // return '...afterFooter';
- // },
- }
- },
- hover: {
- mode: 'dataset'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- },
- ticks: {
- suggestedMin: -10,
- suggestedMax: 250,
- }
- }]
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#changeDataObject').click(function() {
- config.data = {
- labels: ["July", "August", "September", "October", "November", "December"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- steppedLine: true,
- }, {
- label: "My Second dataset",
- fill: false,
- steppedLine: true,
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- // Update the chart
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- steppedLine: true,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Chart with xAxis Filtering</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:"Chart.js Line Chart - X-Axis Filter"
- },
- scales: {
- xAxes: [{
- display: true,
- ticks: {
- userCallback: function(dataLabel, index) {
- return index % 2 === 0 ? dataLabel : '';
- }
- }
- }],
- yAxes: [{
- display: true,
- beginAtZero: false
- }]
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- for (var index = 0; index < config.data.datasets.length; ++index) {
- config.data.datasets[index].data.push(randomScalingFactor());
- }
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas{
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="changeDataObject">Change Data Object</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100);
- //return 0;
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- }, {
- hidden: true,
- label: 'hidden dataset',
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:'Chart.js Line Chart'
- },
- tooltips: {
- mode: 'index',
- intersect: false,
- callbacks: {
- // beforeTitle: function() {
- // return '...beforeTitle';
- // },
- // afterTitle: function() {
- // return '...afterTitle';
- // },
- // beforeBody: function() {
- // return '...beforeBody';
- // },
- // afterBody: function() {
- // return '...afterBody';
- // },
- // beforeFooter: function() {
- // return '...beforeFooter';
- // },
- // footer: function() {
- // return 'Footer';
- // },
- // afterFooter: function() {
- // return '...afterFooter';
- // },
- }
- },
- hover: {
- mode: 'nearest',
- intersect: true
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'Value'
- },
- ticks: {
- suggestedMin: -10,
- suggestedMax: 250,
- }
- }]
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#changeDataObject').click(function() {
- config.data = {
- labels: ["July", "August", "September", "October", "November", "December"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- }, {
- label: "My Second dataset",
- fill: false,
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- // Update the chart
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Different Point Sizes</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "dataset - big points",
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ fill: false,
+ borderDash: [5, 5],
+ pointRadius: 15,
+ pointHoverRadius: 10,
+ }, {
+ label: "dataset - individual point sizes",
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ fill: false,
+ borderDash: [5, 5],
+ pointRadius: [2, 4, 6, 18, 0, 12, 20],
+ }, {
+ label: "dataset - large pointHoverRadius",
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.green,
+ borderColor: window.chartColors.green,
+ fill: false,
+ pointHoverRadius: 30,
+ }, {
+ label: "dataset - large pointHitRadius",
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ backgroundColor: window.chartColors.yellow,
+ borderColor: window.chartColors.yellow,
+ fill: false,
+ pointHitRadius: 20,
+ }]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ position: 'bottom',
+ },
+ hover: {
+ mode: 'index'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ },
+ title: {
+ display: true,
+ text: 'Chart.js Line Chart - Different point sizes'
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
<head>
<title>Line Chart - Cubic interpolation mode</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas{
-moz-user-select: none;
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
- //return 0;
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
datasets: [{
label: "Cubic interpolation (monotone)",
data: datapoints,
- borderColor: 'rgba(255, 0, 0, 0.7)',
+ borderColor: window.chartColors.red,
backgroundColor: 'rgba(0, 0, 0, 0)',
fill: false,
cubicInterpolationMode: 'monotone'
}, {
label: "Cubic interpolation (default)",
data: datapoints,
- borderColor: 'rgba(0, 0, 255, 0.3)',
+ borderColor: window.chartColors.blue,
backgroundColor: 'rgba(0, 0, 0, 0)',
fill: false,
}, {
label: "Linear interpolation",
data: datapoints,
- borderColor: 'rgba(0, 0, 0, 0.10)',
+ borderColor: window.chartColors.green,
backgroundColor: 'rgba(0, 0, 0, 0)',
fill: false,
lineTension: 0
tooltips: {
mode: 'index'
},
- hover: {
- mode: 'dataset'
- },
scales: {
xAxes: [{
display: true,
window.myLine = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
+ document.getElementById('randomizeData').addEventListener('click', function() {
for (var i = 0, len = datapoints.length; i < len; ++i) {
datapoints[i] = Math.random() < 0.05 ? NaN : randomScalingFactor();
}
<head>
<title>Line Chart Multiple Axes</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
var randomScalingFactor = function() {
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
};
- var randomColor = function(opacity) {
- return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
- };
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
yAxisID: "y-axis-1",
}, {
label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
yAxisID: "y-axis-2"
}]
};
- $.each(lineChartData.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(1);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = Chart.Line(ctx, {
hoverMode: 'index',
stacked: false,
title:{
- display:true,
+ display: true,
text:'Chart.js Line Chart - Multi Axis'
},
scales: {
- xAxes: [{
- display: true,
- gridLines: {
- offsetGridLines: false
- }
- }],
yAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
});
};
- $('#randomizeData').click(function() {
- lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
-
- lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ lineChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+ });
window.myLine.update();
});
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ fill: false,
+ // Skip a point in the middle
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+
+ }, {
+ label: "My Second dataset",
+ borderColor: window.chartColors.blue,
+ fill: false,
+ // Skip first and last points
+ data: [
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Chart.js Line Chart - Skip Points'
+ },
+ tooltips: {
+ mode: 'index',
+ },
+ hover: {
+ mode: 'index'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ },
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: "My Second dataset",
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: "My Third dataset",
+ borderColor: window.chartColors.green,
+ backgroundColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: "My Third dataset",
+ borderColor: window.chartColors.yellow,
+ backgroundColor: window.chartColors.yellow,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:"Chart.js Line Chart - Stacked Area"
+ },
+ tooltips: {
+ mode: 'index',
+ },
+ hover: {
+ mode: 'index'
+ },
+ scales: {
+ xAxes: [{
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ stacked: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ $.each(config.data.datasets, function(i, dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+
+ });
+
+ window.myLine.update();
+ });
+
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = window.chartColors[colorName];
+ var newDataset = {
+ label: 'Dataset ' + config.data.datasets.length,
+ borderColor: newColor,
+ backgroundColor: newColor,
+ data: [],
+ };
+
+ for (var index = 0; index < config.data.labels.length; ++index) {
+ newDataset.data.push(randomScalingFactor());
+ }
+
+ config.data.datasets.push(newDataset);
+ window.myLine.update();
+ });
+
+ document.getElementById('addData').addEventListener('click', function() {
+ if (config.data.datasets.length > 0) {
+ var month = MONTHS[config.data.labels.length % MONTHS.length];
+ config.data.labels.push(month);
+
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.push(randomScalingFactor());
+ });
+
+ window.myLine.update();
+ }
+ });
+
+ document.getElementById('removeDataset').addEventListener('click', function() {
+ config.data.datasets.splice(0, 1);
+ window.myLine.update();
+ });
+
+ document.getElementById('removeData').addEventListener('click', function() {
+ config.data.labels.splice(-1, 1); // remove the label first
+
+ config.data.datasets.forEach(function(dataset, datasetIndex) {
+ dataset.data.pop();
+ });
+
+ window.myLine.update();
+ });
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Stepped Line Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return (Math.random() > 0.5 ? -1 : 1) * Math.round(Math.random() * 100);
+ };
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ steppedLine: true,
+ }, {
+ label: "My Second dataset",
+ steppedLine: true,
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Chart.js Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ },
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Styles</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "Unfilled",
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: "Dashed",
+ fill: false,
+ backgroundColor: window.chartColors.green,
+ borderColor: window.chartColors.green,
+ borderDash: [5, 5],
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: "Filled",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: true,
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Chart.js Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false,
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
<head>
<title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
- canvas {
+ canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
<button id="removeData">Remove Data</button>
<script>
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
+
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
- //return 0;
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var config = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
-
- // Skip a point in the middle
- data: [randomScalingFactor(), randomScalingFactor(), NaN, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: true,
- borderDash: [5, 5],
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
}, {
label: "My Second dataset",
-
- // Skip first and last points
- data: [NaN, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), NaN],
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}]
},
options: {
responsive: true,
title:{
display:true,
- text:'Chart.js Line Chart - Skip Points'
+ text:'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
+ intersect: false,
},
hover: {
- mode: 'index'
+ mode: 'nearest',
+ intersect: true
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Value'
- },
+ }
}]
}
}
};
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
window.myLine.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
+ backgroundColor: newColor,
+ borderColor: newColor,
data: [],
+ fill: false
};
for (var index = 0; index < config.data.labels.length; ++index) {
window.myLine.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
var month = MONTHS[config.data.labels.length % MONTHS.length];
config.data.labels.push(month);
- $.each(config.data.datasets, function(i, dataset) {
+ config.data.datasets.forEach(function(dataset) {
dataset.data.push(randomScalingFactor());
});
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myLine.update();
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ margin-bottom: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ </div>
+ <script>
+ function createConfig(pointStyle) {
+ return {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 23, 5, 99, 67, 43, 0],
+ fill: false,
+ pointRadius: 10,
+ pointHoverRadius: 15,
+ showLine: false // no line shown
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Point Style: ' + pointStyle
+ },
+ elements: {
+ point: {
+ pointStyle: pointStyle
+ }
+ }
+ }
+ };
+ }
+
+ window.onload = function() {
+ var container = document.querySelector('.container');
+ [
+ 'circle',
+ 'triangle',
+ 'rect',
+ 'rectRot',
+ 'cross',
+ 'crossRot',
+ 'star',
+ 'line',
+ 'dash'
+ ].forEach(function(pointStyle) {
+ var div = document.createElement('div');
+ div.classList.add('chart-container');
+
+ var canvas = document.createElement('canvas');
+ div.appendChild(canvas);
+ container.appendChild(div);
+
+ var ctx = canvas.getContext('2d');
+ var config = createConfig(pointStyle);
+ new Chart(ctx, config);
+ });
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Min/Max Settings</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 50, 20, 25, 44, -10],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [100, 33, 22, 19, 11, 49, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Min and Max Settings'
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ min: 10,
+ max: 50
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addDataset">Add Dataset</button>
+ <button id="removeDataset">Remove Dataset</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <script>
+ var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Chart.js Line Chart'
+ },
+ tooltips: {
+ mode: 'index',
+ intersect: false,
+ },
+ hover: {
+ mode: 'nearest',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Value'
+ },
+ ticks: {
+ min: 0,
+ max: 100,
+
+ // forces step size to be 5 units
+ stepSize: 5
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Suggested Min/Max Settings</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ data: [10, 30, 39, 20, 25, 34, -10],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ fill: false,
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ data: [18, 33, 22, 19, 11, 39, 30],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Min and Max Settings'
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ // the data minimum used for determining the ticks is Math.min(dataMin, suggestedMin)
+ suggestedMin: 10,
+
+ // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
+ suggestedMax: 50
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Logarithmic Line Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.ceil(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: window.chartColors.red,
+ borderColor: window.chartColors.red,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }, {
+ label: "My Second dataset",
+ backgroundColor: window.chartColors.blue,
+ borderColor: window.chartColors.blue,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display:true,
+ text:'Chart.js Line Chart - Logarithmic'
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ }],
+ yAxes: [{
+ display: true,
+ type: 'logarithmic',
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = 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.myLine.update();
+ });
+ </script>
+</body>
+
+</html>
<head>
<title>Scatter Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
<body>
<div style="width:75%">
- <div>
- <canvas id="canvas"></canvas>
- </div>
+ <canvas id="canvas"></canvas>
</div>
<script>
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
- };
- var randomColor = function(opacity) {
- return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
- };
-
+ var color = Chart.helpers.color;
var scatterChartData = {
datasets: [{
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
label: "V(node2)",
data: [{
x: 1,
}]
};
- $.each(scatterChartData.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.1);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = Chart.Scatter(ctx, {
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Pie Chart with Custom Tooltips</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-
- <style>
- #canvas-holder {
- width: 100%;
- margin-top: 50px;
- text-align: center;
- }
- #chartjs-tooltip {
- opacity: 1;
- position: absolute;
- background: rgba(0, 0, 0, .7);
- color: white;
- border-radius: 3px;
- -webkit-transition: all .1s ease;
- transition: all .1s ease;
- pointer-events: none;
- -webkit-transform: translate(-50%, 0);
- transform: translate(-50%, 0);
- }
-
- .chartjs-tooltip-key {
- display: inline-block;
- width: 10px;
- height: 10px;
- }
- </style>
-</head>
-
-<body>
- <div id="canvas-holder" style="width: 50px;">
- <canvas id="chart-area1" width="50" height="50" />
- </div>
- <div id="canvas-holder" style="width: 300px;">
- <canvas id="chart-area2" width="300" height="300" />
- </div>
-
- <div id="chartjs-tooltip"></div>
-
-
- <script>
- Chart.defaults.global.tooltips.custom = function(tooltip) {
-
- // Tooltip Element
- var tooltipEl = $('#chartjs-tooltip');
-
- if (!tooltipEl[0]) {
- $('body').append('<div id="chartjs-tooltip"></div>');
- tooltipEl = $('#chartjs-tooltip');
- }
-
- // Hide if no tooltip
- if (!tooltip.opacity) {
- tooltipEl.css({
- opacity: 0
- });
- $('.chartjs-wrap canvas')
- .each(function(index, el) {
- $(el).css('cursor', 'default');
- });
- return;
- }
-
- $(this._chart.canvas).css('cursor', 'pointer');
-
- // Set caret Position
- tooltipEl.removeClass('above below no-transform');
- if (tooltip.yAlign) {
- tooltipEl.addClass(tooltip.yAlign);
- } else {
- tooltipEl.addClass('no-transform');
- }
-
- // Set Text
- if (tooltip.body) {
- var innerHtml = [
- (tooltip.beforeTitle || []).join('\n'), (tooltip.title || []).join('\n'), (tooltip.afterTitle || []).join('\n'), (tooltip.beforeBody || []).join('\n'), (tooltip.body || []).join('\n'), (tooltip.afterBody || []).join('\n'), (tooltip.beforeFooter || [])
- .join('\n'), (tooltip.footer || []).join('\n'), (tooltip.afterFooter || []).join('\n')
- ];
- tooltipEl.html(innerHtml.join('\n'));
- }
-
- // Find Y Location on page
- var top = 0;
- if (tooltip.yAlign) {
- if (tooltip.yAlign == 'above') {
- top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
- } else {
- top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
- }
- }
-
- var position = $(this._chart.canvas)[0].getBoundingClientRect();
-
- // Display, position, and set styles for font
- tooltipEl.css({
- opacity: 1,
- width: tooltip.width ? (tooltip.width + 'px') : 'auto',
- left: position.left + tooltip.x + 'px',
- top: position.top + top + 'px',
- fontFamily: tooltip._fontFamily,
- fontSize: tooltip.fontSize,
- fontStyle: tooltip._fontStyle,
- padding: tooltip.yPadding + 'px ' + tooltip.xPadding + 'px',
- });
- };
-
- var config = {
- type: 'pie',
- data: {
- datasets: [{
- data: [300, 50, 100, 40, 10],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- }],
- labels: [
- "Red",
- "Green",
- "Yellow",
- "Grey",
- "Dark Grey"
- ]
- },
- options: {
- responsive: true,
- legend: {
- display: false
- },
- tooltips: {
- enabled: false,
- }
- }
- };
-
- window.onload = function() {
- var ctx1 = document.getElementById("chart-area1").getContext("2d");
- window.myPie = new Chart(ctx1, config);
-
- var ctx2 = document.getElementById("chart-area2").getContext("2d");
- window.myPie = new Chart(ctx2, config);
- };
- </script>
-</body>
-
-</html>
<head>
<title>Pie Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="chartColors.js"></script>
</head>
<body>
- <div id="canvas-holder" style="width:50%">
- <canvas id="chart-area" width="300" height="300" />
+ <div id="canvas-holder" style="width:40%">
+ <canvas id="chart-area" />
</div>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
var config = {
type: 'pie',
randomScalingFactor(),
],
backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- }, {
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
- ],
- }, {
- data: [
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- randomScalingFactor(),
- ],
- backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
],
+ label: 'Dataset 1'
}],
labels: [
"Red",
- "Green",
+ "Orange",
"Yellow",
- "Grey",
- "Dark Grey"
+ "Green",
+ "Blue"
]
},
options: {
window.myPie = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, piece) {
- $.each(piece.data, function(j, value) {
- config.data.datasets[i].data[j] = randomScalingFactor();
- config.data.datasets[i].backgroundColor[j] = randomColor(0.7);
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
});
});
+
window.myPie.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('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()]
+ 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();
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myPie.update();
});
<head>
<title>Polar Area Chart</title>
<script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
</head>
<body>
- <div id="canvas-holder" style="width:40%">
+ <div id="canvas-holder" style="width:50%">
<canvas id="chart-area"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
+ var chartColors = window.chartColors;
+ var color = Chart.helpers.color;
var config = {
data: {
datasets: [{
randomScalingFactor(),
],
backgroundColor: [
- "#F7464A",
- "#46BFBD",
- "#FDB45C",
- "#949FB1",
- "#4D5360",
+ 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",
- "Green",
+ "Orange",
"Yellow",
- "Grey",
- "Dark Grey"
+ "Green",
+ "Blue"
]
},
options: {
responsive: true,
legend: {
- position: 'top',
+ position: 'right',
},
title: {
display: true,
window.myPolarArea = Chart.PolarArea(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, piece) {
- $.each(piece.data, function(j, value) {
+ 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();
- config.data.datasets[i].backgroundColor[j] = randomColor();
});
});
window.myPolarArea.update();
});
- $('#addData').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
- config.data.labels.push('dataset #' + config.data.labels.length);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.backgroundColor.push(randomColor());
+ 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();
}
});
-
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.pop(); // remove the label first
-
- $.each(config.data.datasets, function(i, dataset) {
+ config.data.datasets.forEach(function(dataset) {
dataset.backgroundColor.pop();
dataset.data.pop();
});
-
window.myPolarArea.update();
});
</script>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Radar Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:40%">
- <canvas id="canvas"></canvas>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</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(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'radar',
- data: {
- labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
- datasets: [{
- label: "Skip first dataset",
- borderColor: 'rgb(255, 0, 0)',
- backgroundColor: "rgba(255,255,0,0.5)",
- pointBackgroundColor: "rgba(220,220,220,1)",
- data: [NaN, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: "Skip mid dataset",
- borderColor: 'rgb(255, 0, 255)',
- backgroundColor: "rgba(0, 255, 0, 0.5)",
- pointBackgroundColor: "rgba(151,187,205,1)",
- pointHoverBackgroundColor: "#fff",
- data: [randomScalingFactor(), randomScalingFactor(), NaN, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- },{
- label: "Skip last dataset",
- borderColor: 'rgb(0, 255, 255)',
- backgroundColor: "rgba(0, 0, 255, 0.5)",
- pointBackgroundColor: "rgba(151,187,205,1)",
- pointHoverBackgroundColor: "#fff",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), NaN]
- }]
- },
- options: {
- title:{
- display:true,
- text:"Chart.js Radar Chart - Skip Points"
- },
- elements: {
- line: {
- tension: 0.0,
- }
- },
- scale: {
- beginAtZero: true,
- reverse: false
- }
- }
- };
-
- window.onload = function() {
- window.myRadar = new Chart(document.getElementById("canvas"), config);
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myRadar.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myRadar.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push('dataset #' + config.data.labels.length);
-
- $.each(config.data.datasets, function (i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myRadar.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myRadar.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.pop(); // remove the label first
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.pop();
- });
-
- window.myRadar.update();
- });
- </script>
-</body>
-
-</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Radar Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:40%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+
+ var color = Chart.helpers.color;
+ var config = {
+ type: 'radar',
+ data: {
+ labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+ datasets: [{
+ label: "Skip first dataset",
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ pointBackgroundColor: window.chartColors.red,
+ data: [
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: "Skip mid dataset",
+ borderColor: window.chartColors.blue,
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ pointBackgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN,
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ },{
+ label: "Skip last dataset",
+ borderColor: window.chartColors.green,
+ backgroundColor: color(window.chartColors.green).alpha(0.2).rgbString(),
+ pointBackgroundColor: window.chartColors.green,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ NaN
+ ]
+ }]
+ },
+ options: {
+ title:{
+ display:true,
+ text:"Chart.js Radar Chart - Skip Points"
+ },
+ elements: {
+ line: {
+ tension: 0.0,
+ }
+ },
+ scale: {
+ beginAtZero: true,
+ }
+ }
+ };
+
+ window.onload = function() {
+ window.myRadar = new Chart(document.getElementById("canvas"), config);
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return randomScalingFactor();
+ });
+
+ });
+
+ window.myRadar.update();
+ });
+ </script>
+</body>
+
+</html>
<head>
<title>Radar Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
+ var color = Chart.helpers.color;
var config = {
type: 'radar',
data: {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [{
label: "My First dataset",
- backgroundColor: "rgba(220,220,220,0.2)",
- pointBackgroundColor: "rgba(220,220,220,1)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
- }, {
- label: 'Hidden dataset',
- hidden: true,
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.red,
+ pointBackgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
}, {
label: "My Second dataset",
- backgroundColor: "rgba(151,187,205,0.2)",
- pointBackgroundColor: "rgba(151,187,205,1)",
- pointHoverBackgroundColor: "#fff",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.blue,
+ pointBackgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
},]
},
options: {
text: 'Chart.js Radar Chart'
},
scale: {
- reverse: false,
- gridLines: {
- color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
- },
ticks: {
beginAtZero: true
}
window.myRadar = new Chart(document.getElementById("canvas"), config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
-
});
window.myRadar.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];;
+ var newColor = window.chartColors[colorName];
+
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
+ borderColor: newColor,
+ backgroundColor: color(newColor).alpha(0.2).rgbString(),
+ pointBorderColor: newColor,
data: [],
};
window.myRadar.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
config.data.labels.push('dataset #' + config.data.labels.length);
- $.each(config.data.datasets, function (i, dataset) {
+ config.data.datasets.forEach(function (dataset) {
dataset.data.push(randomScalingFactor());
});
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myRadar.update();
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.pop(); // remove the label first
- $.each(config.data.datasets, function(i, dataset) {
+ config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
});
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Scatter Chart Multi Axis</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%">
- <div>
- <canvas id="canvas"></canvas>
- </div>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
- };
-
- var scatterChartData = {
- datasets: [{
- label: "My First dataset",
- xAxisID: "x-axis-1",
- yAxisID: "y-axis-1",
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }]
- }, {
- label: "My Second dataset",
- xAxisID: "x-axis-1",
- yAxisID: "y-axis-2",
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }]
- }]
- };
-
- $.each(scatterChartData.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.1);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myScatter = Chart.Scatter(ctx, {
- data: scatterChartData,
- options: {
- responsive: true,
- hoverMode: 'nearest',
- intersect: true,
- title: {
- display: true,
- text: 'Chart.js Scatter Chart - Multi Axis'
- },
- scales: {
- xAxes: [{
- position: "bottom",
- gridLines: {
- zeroLineColor: "rgba(0,0,0,1)"
- }
- }],
- yAxes: [{
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: "left",
- id: "y-axis-1",
- }, {
- type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
- display: true,
- position: "right",
- reverse: true,
- id: "y-axis-2",
-
- // grid line settings
- gridLines: {
- drawOnChartArea: false, // only want the grid lines for one axis to show up
- },
- }],
- }
- }
- });
- };
-
- $('#randomizeData').click(function() {
- scatterChartData.datasets[0].data = [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }];
- scatterChartData.datasets[1].data = [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }];
- window.myScatter.update();
- });
- </script>
-</body>
-
-</html>
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Scatter Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%">
- <div>
- <canvas id="canvas"></canvas>
- </div>
- </div>
- <button id="randomizeData">Randomize Data</button>
- <script>
- var randomScalingFactor = function() {
- return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
- };
-
- var scatterChartData = {
- datasets: [{
- label: "My First dataset",
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }]
- }, {
- label: "My Second dataset",
- data: [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }]
- }]
- };
-
- $.each(scatterChartData.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.1);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myScatter = Chart.Scatter(ctx, {
- data: scatterChartData,
- options: {
- title: {
- display: true,
- text: 'Chart.js Scatter Chart'
- },
- scales: {
- xAxes: [{
- position: 'top',
- gridLines: {
- zeroLineColor: "rgba(0,255,0,1)"
- },
- scaleLabel: {
- display: true,
- labelString: 'x axis'
- }
- }],
- yAxes: [{
- position: 'right',
- gridLines: {
- zeroLineColor: "rgba(0,255,0,1)"
- },
- scaleLabel: {
- display: true,
- labelString: 'y axis'
- }
- }]
- }
- }
- });
- };
-
- $('#randomizeData').click(function() {
- scatterChartData.datasets[0].data = [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }];
- scatterChartData.datasets[1].data = [{
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }, {
- x: randomScalingFactor(),
- y: randomScalingFactor(),
- }]
- window.myScatter.update();
- });
- </script>
-</body>
-
-</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Scatter Chart Multi Axis</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+ };
+
+ var color = Chart.helpers.color;
+ var scatterChartData = {
+ datasets: [{
+ label: "My First dataset",
+ xAxisID: "x-axis-1",
+ yAxisID: "y-axis-1",
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }]
+ }, {
+ label: "My Second dataset",
+ xAxisID: "x-axis-1",
+ yAxisID: "y-axis-2",
+ borderColor: window.chartColors.blue,
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }]
+ }]
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myScatter = Chart.Scatter(ctx, {
+ data: scatterChartData,
+ options: {
+ responsive: true,
+ hoverMode: 'nearest',
+ intersect: true,
+ title: {
+ display: true,
+ text: 'Chart.js Scatter Chart - Multi Axis'
+ },
+ scales: {
+ xAxes: [{
+ position: "bottom",
+ gridLines: {
+ zeroLineColor: "rgba(0,0,0,1)"
+ }
+ }],
+ yAxes: [{
+ type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ display: true,
+ position: "left",
+ id: "y-axis-1",
+ }, {
+ type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+ display: true,
+ position: "right",
+ reverse: true,
+ id: "y-axis-2",
+
+ // grid line settings
+ gridLines: {
+ drawOnChartArea: false, // only want the grid lines for one axis to show up
+ },
+ }],
+ }
+ }
+ });
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ scatterChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return {
+ x: randomScalingFactor(),
+ y: randomScalingFactor()
+ };
+ });
+ });
+ window.myScatter.update();
+ });
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Scatter Chart</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%">
+ <canvas id="canvas"></canvas>
+ </div>
+ <button id="randomizeData">Randomize Data</button>
+ <script>
+ var randomScalingFactor = function() {
+ return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
+ };
+
+ var color = Chart.helpers.color;
+ var scatterChartData = {
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }]
+ }, {
+ label: "My Second dataset",
+ borderColor: window.chartColors.blue,
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ data: [{
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }, {
+ x: randomScalingFactor(),
+ y: randomScalingFactor(),
+ }]
+ }]
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myScatter = Chart.Scatter(ctx, {
+ data: scatterChartData,
+ options: {
+ title: {
+ display: true,
+ text: 'Chart.js Scatter Chart'
+ },
+ }
+ });
+ };
+
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ scatterChartData.datasets.forEach(function(dataset) {
+ dataset.data = dataset.data.map(function() {
+ return {
+ x: randomScalingFactor(),
+ y: randomScalingFactor()
+ };
+ });
+ });
+ window.myScatter.update();
+ });
+ </script>
+</body>
+
+</html>
<head>
<title>Line Chart - Combo Time Scale</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
}
- function randomColorFactor() {
- return Math.round(Math.random() * 255);
- }
-
- function randomColor(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- }
-
function newDateString(days) {
return moment().add(days, 'd').format(timeFormat);
}
+ var color = Chart.helpers.color;
var config = {
type: 'bar',
data: {
- labels: [newDateString(0), newDateString(1), newDateString(2), newDateString(3), newDateString(4), newDateString(5), newDateString(6)],
+ labels: [
+ newDateString(0),
+ newDateString(1),
+ newDateString(2),
+ newDateString(3),
+ newDateString(4),
+ newDateString(5),
+ newDateString(6)
+ ],
datasets: [{
type: 'bar',
label: 'Dataset 1',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- borderColor: 'white',
- borderWidth: 2
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, {
type: 'bar',
label: 'Dataset 2',
- backgroundColor: "rgba(151,187,205,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- borderColor: 'white',
- borderWidth: 2
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, {
type: 'line',
label: 'Dataset 3',
- backgroundColor: "rgba(220,220,220,0.5)",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
+ backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.green,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, ]
},
options: {
- showLines: true,
- responsive: true,
- title:{
- display:true,
+ title: {
text:"Chart.js Combo Time Scale"
},
scales: {
}
};
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
window.myLine.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
+ borderColor: newColor,
+ backgroundColor: color(newColor).alpha(0.5).rgbString(),
data: [],
};
window.myLine.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
config.data.labels.push(newDateString(config.data.labels.length));
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myLine.update();
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
<head>
<title>Time Scale Point Data</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
}
- function randomColorFactor() {
- return Math.round(Math.random() * 255);
- }
-
- function randomColor(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- }
-
function newDate(days) {
return moment().add(days, 'd').toDate();
}
return moment().add(days, 'd').format();
}
+ var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
datasets: [{
label: "Dataset with string point data",
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
+ fill: false,
data: [{
x: newDateString(0),
y: randomScalingFactor()
x: newDateString(5),
y: randomScalingFactor()
}],
- fill: false
}, {
label: "Dataset with date object point data",
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.blue,
+ fill: false,
data: [{
x: newDate(0),
y: randomScalingFactor()
}, {
x: newDate(5),
y: randomScalingFactor()
- }],
- fill: false
+ }]
}]
},
options: {
}
};
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- $.each(dataset.data, function(j, dataObj) {
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.forEach(function(dataObj) {
dataObj.y = randomScalingFactor();
});
});
window.myLine.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
var lastTime = myLine.scales['x-axis-0'].labelMoments[0].length ? myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1] : moment();
var newTime = lastTime
}
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset, datasetIndex) {
dataset.data.pop();
});
<head>
<title>Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../../dist/Chart.js"></script>
+ <script src="../chartColors.js"></script>
<style>
canvas {
-moz-user-select: none;
return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
}
- function randomColorFactor() {
- return Math.round(Math.random() * 255);
- }
-
- function randomColor(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- }
-
function newDate(days) {
return moment().add(days, 'd').toDate();
}
return moment().add(days, 'd').unix();
}
+ var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
- labels: [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], // Date Objects
+ labels: [ // Date Objects
+ newDate(0),
+ newDate(1),
+ newDate(2),
+ newDate(3),
+ newDate(4),
+ newDate(5),
+ newDate(6)
+ ],
datasets: [{
label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+ backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.red,
fill: false,
- borderDash: [5, 5],
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, {
label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.blue,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
}, {
label: "Dataset with point data",
+ backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
+ borderColor: window.chartColors.green,
+ fill: false,
data: [{
x: newDateString(0),
y: randomScalingFactor()
x: newDateString(15),
y: randomScalingFactor()
}],
- fill: false
}]
},
options: {
- responsive: true,
title:{
- display:true,
- text:"Chart.js Time Scale"
+ text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
}
};
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- $.each(dataset.data, function(j, dataObj) {
+ document.getElementById('randomizeData').addEventListener('click', function() {
+ config.data.datasets.forEach(function(dataset) {
+ dataset.data.forEach(function(dataObj, j) {
if (typeof dataObj === 'object') {
dataObj.y = randomScalingFactor();
} else {
window.myLine.update();
});
- $('#addDataset').click(function() {
+ var colorNames = Object.keys(window.chartColors);
+ document.getElementById('addDataset').addEventListener('click', function() {
+ var colorName = colorNames[config.data.datasets.length % colorNames.length];
+ var newColor = window.chartColors[colorName]
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
+ borderColor: newColor,
+ backgroundColor: color(newColor).alpha(0.5).rgbString(),
data: [],
};
window.myLine.update();
});
- $('#addData').click(function() {
+ document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
config.data.labels.push(newDate(config.data.labels.length));
}
});
- $('#removeDataset').click(function() {
+ document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myLine.update();
});
- $('#removeData').click(function() {
+ document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
+++ /dev/null
-<!doctype html>
-<html>
-
-<head>
- <title>Line Chart</title>
- <script src="../dist/Chart.bundle.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <style>
- canvas {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- }
- </style>
-</head>
-
-<body>
- <div style="width:75%;">
- <canvas id="canvas"></canvas>
- </div>
- <br>
- <br>
- <button id="randomizeData">Randomize Data</button>
- <button id="addDataset">Add Dataset</button>
- <button id="removeDataset">Remove Dataset</button>
- <button id="addData">Add Data</button>
- <button id="removeData">Remove Data</button>
- <script>
- var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
- var randomScalingFactor = function() {
- return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
- };
- var randomColorFactor = function() {
- return Math.round(Math.random() * 255);
- };
- var randomColor = function(opacity) {
- return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
- };
-
- var config = {
- type: 'line',
- data: {
- labels: ["January", "February", "March", "April", "May", "June", "July"],
- datasets: [{
- label: "My First dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- fill: false,
- borderDash: [5, 5],
- }, {
- label: "My Second dataset",
- data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
- }]
- },
- options: {
- responsive: true,
- title:{
- display:true,
- text:"Chart.js Line Chart - Tooltip Hooks"
- },
- tooltips: {
- mode: 'index',
- callbacks: {
- beforeTitle: function() {
- return '...beforeTitle';
- },
- afterTitle: function() {
- return '...afterTitle';
- },
- beforeBody: function() {
- return '...beforeBody';
- },
- afterBody: function() {
- return '...afterBody';
- },
- beforeLabel: function() {
- return '...beforeLabel';
- },
- afterLabel: function() {
- return '...afterLabel';
- },
- beforeFooter: function() {
- return '...beforeFooter';
- },
- footer: function() {
- return 'Footer';
- },
- afterFooter: function() {
- return '...afterFooter';
- },
- }
- },
- hover: {
- mode: 'index'
- },
- scales: {
- xAxes: [{
- display: true,
- scaleLabel: {
- show: true,
- labelString: 'Month'
- }
- }],
- yAxes: [{
- display: true,
- scaleLabel: {
- show: true,
- labelString: 'Value'
- }
- }]
- }
- }
- };
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.borderColor = randomColor(0.4);
- dataset.backgroundColor = randomColor(0.5);
- dataset.pointBorderColor = randomColor(0.7);
- dataset.pointBackgroundColor = randomColor(0.5);
- dataset.pointBorderWidth = 1;
- });
-
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
-
- };
-
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
- });
-
- });
-
- window.myLine.update();
- });
-
- $('#addDataset').click(function() {
- var newDataset = {
- label: 'Dataset ' + config.data.datasets.length,
- borderColor: randomColor(0.4),
- backgroundColor: randomColor(0.5),
- pointBorderColor: randomColor(0.7),
- pointBackgroundColor: randomColor(0.5),
- pointBorderWidth: 1,
- data: [],
- };
-
- for (var index = 0; index < config.data.labels.length; ++index) {
- newDataset.data.push(randomScalingFactor());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var month = MONTHS[config.data.labels.length % MONTHS.length];
- config.data.labels.push(month);
-
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data.push(randomScalingFactor());
- });
-
- window.myLine.update();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- });
- </script>
-</body>
-
-</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Custom Tooltips using Data Points</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chartjs-tooltip {
+ opacity: 1;
+ position: absolute;
+ background: rgba(0, 0, 0, .7);
+ color: white;
+ border-radius: 3px;
+ -webkit-transition: all .1s ease;
+ transition: all .1s ease;
+ pointer-events: none;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ padding: 4px;
+ }
+
+ .chartjs-tooltip-key {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="canvas-holder1" style="width:75%;">
+ <canvas id="chart1"></canvas>
+ </div>
+ <div class="chartjs-tooltip" id="tooltip-0"></div>
+ <div class="chartjs-tooltip" id="tooltip-1"></div>
+ <script>
+ var customTooltips = function (tooltip) {
+ $(this._chart.canvas).css("cursor", "pointer");
+
+ $(".chartjs-tooltip").css({
+ opacity: 0,
+ });
+
+ if (!tooltip || !tooltip.opacity) {
+ return;
+ }
+
+ if (tooltip.dataPoints.length > 0) {
+ tooltip.dataPoints.forEach(function (dataPoint) {
+ var content = [dataPoint.xLabel, dataPoint.yLabel].join(": ");
+ var $tooltip = $("#tooltip-" + dataPoint.datasetIndex);
+
+ $tooltip.html(content);
+ $tooltip.css({
+ opacity: 1,
+ top: dataPoint.y + "px",
+ left: dataPoint.x + "px",
+ });
+ });
+ }
+ };
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+ var color = Chart.helpers.color;
+ var lineChartData = {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.red,
+ pointBackgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: "My Second dataset",
+ backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
+ borderColor: window.chartColors.blue,
+ pointBackgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+ };
+
+ window.onload = function() {
+ var chartEl = document.getElementById("chart1");
+ var chart = new Chart(chartEl, {
+ type: "line",
+ data: lineChartData,
+ options: {
+ title:{
+ display: true,
+ text: "Chart.js - Custom Tooltips using Data Points"
+ },
+ tooltips: {
+ enabled: false,
+ mode: 'index',
+ intersect: false,
+ custom: customTooltips
+ }
+ }
+ });
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Tooltip Interaction Modes</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ margin-bottom: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ </div>
+ <script>
+ function createConfig(mode, intersect) {
+ return {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [10, 30, 46, 2, 8, 50, 0],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [7, 49, 46, 13, 25, 30, 22],
+ fill: false,
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display: true,
+ text: 'Mode: ' + mode + ', intersect = ' + intersect
+ },
+ tooltips: {
+ mode: mode,
+ intersect: intersect,
+ },
+ hover: {
+ mode: mode,
+ intersect: intersect
+ },
+ }
+ };
+ }
+
+ window.onload = function() {
+ var container = document.querySelector('.container');
+
+ [{
+ mode: 'index',
+ intersect: true,
+ }, {
+ mode: 'index',
+ intersect: false,
+ }, {
+ mode: 'dataset',
+ intersect: true,
+ }, {
+ mode: 'dataset',
+ intersect: false,
+ }, {
+ mode: 'point',
+ intersect: true,
+ }, {
+ mode: 'point',
+ intersect: false,
+ }, {
+ mode: 'nearest',
+ intersect: true,
+ }, {
+ mode: 'nearest',
+ intersect: false,
+ }, {
+ mode: 'x',
+ intersect: false
+ }, {
+ mode: 'y',
+ intersect: false
+ }].forEach(function(details) {
+ var div = document.createElement('div');
+ div.classList.add('chart-container');
+
+ var canvas = document.createElement('canvas');
+ div.appendChild(canvas);
+ container.appendChild(div);
+
+ var ctx = canvas.getContext('2d');
+ var config = createConfig(details.mode, details.intersect);
+ new Chart(ctx, config);
+ })
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Line Chart with Custom Tooltips</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas{
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ #chartjs-tooltip {
+ opacity: 1;
+ position: absolute;
+ background: rgba(0, 0, 0, .7);
+ color: white;
+ border-radius: 3px;
+ -webkit-transition: all .1s ease;
+ transition: all .1s ease;
+ pointer-events: none;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ }
+
+ .chartjs-tooltip-key {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin-right: 10px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="canvas-holder1" style="width:75%;">
+ <canvas id="chart"/>
+ </div>
+ <script>
+ Chart.defaults.global.pointHitDetectionRadius = 1;
+
+ var customTooltips = function(tooltip) {
+ // Tooltip Element
+ var tooltipEl = document.getElementById('chartjs-tooltip');
+
+ if (!tooltipEl) {
+ tooltipEl = document.createElement('div');
+ tooltipEl.id = 'chartjs-tooltip';
+ tooltipEl.innerHTML = "<table></table>"
+ document.body.appendChild(tooltipEl);
+ }
+
+ // Hide if no tooltip
+ if (tooltip.opacity === 0) {
+ tooltipEl.style.opacity = 0;
+ return;
+ }
+
+ // Set caret Position
+ tooltipEl.classList.remove('above', 'below', 'no-transform');
+ if (tooltip.yAlign) {
+ tooltipEl.classList.add(tooltip.yAlign);
+ } else {
+ tooltipEl.classList.add('no-transform');
+ }
+
+ function getBody(bodyItem) {
+ return bodyItem.lines;
+ }
+
+ // Set Text
+ if (tooltip.body) {
+ var titleLines = tooltip.title || [];
+ var bodyLines = tooltip.body.map(getBody);
+
+ var innerHtml = '<thead>';
+
+ titleLines.forEach(function(title) {
+ innerHtml += '<tr><th>' + title + '</th></tr>';
+ });
+ innerHtml += '</thead><tbody>';
+
+ bodyLines.forEach(function(body, i) {
+ var colors = tooltip.labelColors[i];
+ var style = 'background:' + colors.backgroundColor;
+ style += '; border-color:' + colors.borderColor;
+ style += '; border-width: 2px';
+ var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+ innerHtml += '<tr><td>' + span + body + '</td></tr>';
+ });
+ innerHtml += '</tbody>';
+
+ var tableRoot = tooltipEl.querySelector('table');
+ tableRoot.innerHTML = innerHtml;
+ }
+
+ var position = this._chart.canvas.getBoundingClientRect();
+
+ // Display, position, and set styles for font
+ tooltipEl.style.opacity = 1;
+ tooltipEl.style.left = position.left + tooltip.caretX + 'px';
+ tooltipEl.style.top = position.top + tooltip.caretY + 'px';
+ tooltipEl.style.fontFamily = tooltip._fontFamily;
+ tooltipEl.style.fontSize = tooltip.fontSize;
+ tooltipEl.style.fontStyle = tooltip._fontStyle;
+ tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+ };
+
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100);
+ };
+ var lineChartData = {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ pointBackgroundColor: window.chartColors.red,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }, {
+ label: "My Second dataset",
+ borderColor: window.chartColors.blue,
+ pointBackgroundColor: window.chartColors.blue,
+ fill: false,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ]
+ }]
+ };
+
+ window.onload = function() {
+ var chartEl = document.getElementById("chart");
+ window.myLine = new Chart(chartEl, {
+ type: 'line',
+ data: lineChartData,
+ options: {
+ title:{
+ display:true,
+ text:'Chart.js Line Chart - Custom Tooltips'
+ },
+ tooltips: {
+ enabled: false,
+ mode: 'index',
+ position: 'nearest',
+ custom: customTooltips
+ }
+ }
+ });
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Pie Chart with Custom Tooltips</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+
+ <style>
+ #canvas-holder {
+ width: 100%;
+ margin-top: 50px;
+ text-align: center;
+ }
+ #chartjs-tooltip {
+ opacity: 1;
+ position: absolute;
+ background: rgba(0, 0, 0, .7);
+ color: white;
+ border-radius: 3px;
+ -webkit-transition: all .1s ease;
+ transition: all .1s ease;
+ pointer-events: none;
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ }
+
+ .chartjs-tooltip-key {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin-right: 10px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="canvas-holder" style="width: 300px;">
+ <canvas id="chart-area" width="300" height="300" />
+ </div>
+
+ <div id="chartjs-tooltip">
+ <table></table>
+ </div>
+
+ <script>
+ Chart.defaults.global.tooltips.custom = function(tooltip) {
+ // Tooltip Element
+ var tooltipEl = document.getElementById('chartjs-tooltip');
+
+ // Hide if no tooltip
+ if (tooltip.opacity === 0) {
+ tooltipEl.style.opacity = 0;
+ return;
+ }
+
+ // Set caret Position
+ tooltipEl.classList.remove('above', 'below', 'no-transform');
+ if (tooltip.yAlign) {
+ tooltipEl.classList.add(tooltip.yAlign);
+ } else {
+ tooltipEl.classList.add('no-transform');
+ }
+
+ function getBody(bodyItem) {
+ return bodyItem.lines;
+ }
+
+ // Set Text
+ if (tooltip.body) {
+ var titleLines = tooltip.title || [];
+ var bodyLines = tooltip.body.map(getBody);
+
+ var innerHtml = '<thead>';
+
+ titleLines.forEach(function(title) {
+ innerHtml += '<tr><th>' + title + '</th></tr>';
+ });
+ innerHtml += '</thead><tbody>';
+
+ bodyLines.forEach(function(body, i) {
+ var colors = tooltip.labelColors[i];
+ var style = 'background:' + colors.backgroundColor;
+ style += '; border-color:' + colors.borderColor;
+ style += '; border-width: 2px';
+ var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
+ innerHtml += '<tr><td>' + span + body + '</td></tr>';
+ });
+ innerHtml += '</tbody>';
+
+ var tableRoot = tooltipEl.querySelector('table');
+ tableRoot.innerHTML = innerHtml;
+ }
+
+ var position = this._chart.canvas.getBoundingClientRect();
+
+ // Display, position, and set styles for font
+ tooltipEl.style.opacity = 1;
+ tooltipEl.style.left = position.left + tooltip.caretX + 'px';
+ tooltipEl.style.top = position.top + tooltip.caretY + 'px';
+ tooltipEl.style.fontFamily = tooltip._fontFamily;
+ tooltipEl.style.fontSize = tooltip.fontSize;
+ tooltipEl.style.fontStyle = tooltip._fontStyle;
+ tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+ };
+
+ var config = {
+ type: 'pie',
+ data: {
+ datasets: [{
+ data: [300, 50, 100, 40, 10],
+ backgroundColor: [
+ window.chartColors.red,
+ window.chartColors.orange,
+ window.chartColors.yellow,
+ window.chartColors.green,
+ window.chartColors.blue,
+ ],
+ }],
+ labels: [
+ "Red",
+ "Orange",
+ "Yellow",
+ "Green",
+ "Blue"
+ ]
+ },
+ options: {
+ responsive: true,
+ legend: {
+ display: false
+ },
+ tooltips: {
+ enabled: false,
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("chart-area").getContext("2d");
+ window.myPie = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Tooltip Interaction Modes</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ .chart-container {
+ width: 500px;
+ margin-left: 40px;
+ margin-right: 40px;
+ margin-bottom: 40px;
+ }
+ .container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ </div>
+ <script>
+ function createConfig(position) {
+ return {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [10, 30, 46, 2, 8, 50, 0],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [7, 49, 46, 13, 25, 30, 22],
+ fill: false,
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display: true,
+ text: 'Tooltip Positio: ' + position
+ },
+ tooltips: {
+ position: position,
+ mode: 'index',
+ intersect: false,
+ },
+ }
+ };
+ }
+
+ window.onload = function() {
+ var container = document.querySelector('.container');
+
+ ['average', 'nearest'].forEach(function(position) {
+ var div = document.createElement('div');
+ div.classList.add('chart-container');
+
+ var canvas = document.createElement('canvas');
+ div.appendChild(canvas);
+ container.appendChild(div);
+
+ var ctx = canvas.getContext('2d');
+ var config = createConfig(position);
+ new Chart(ctx, config);
+ })
+ };
+ </script>
+</body>
+
+</html>
--- /dev/null
+<!doctype html>
+<html>
+
+<head>
+ <title>Tooltip Hooks</title>
+ <script src="../../dist/Chart.bundle.js"></script>
+ <script src="../chartColors.js"></script>
+ <style>
+ canvas {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ }
+ </style>
+</head>
+
+<body>
+ <div style="width:75%;">
+ <canvas id="canvas"></canvas>
+ </div>
+ <script>
+ var randomScalingFactor = function() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ };
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: ["January", "February", "March", "April", "May", "June", "July"],
+ datasets: [{
+ label: "My First dataset",
+ borderColor: window.chartColors.red,
+ backgroundColor: window.chartColors.red,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }, {
+ label: "My Second dataset",
+ borderColor: window.chartColors.blue,
+ backgroundColor: window.chartColors.blue,
+ data: [
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor(),
+ randomScalingFactor()
+ ],
+ fill: false,
+ }]
+ },
+ options: {
+ responsive: true,
+ title:{
+ display: true,
+ text: "Chart.js Line Chart - Custom Information in Tooltip"
+ },
+ tooltips: {
+ mode: 'index',
+ callbacks: {
+ // Use the footer callback to display the sum of the items showing in the tooltip
+ footer: function(tooltipItems, data) {
+ var sum = 0;
+
+ tooltipItems.forEach(function(tooltipItem) {
+ sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+ });
+ return 'Sum: ' + sum;
+ },
+ },
+ footerFontStyle: 'normal'
+ },
+ hover: {
+ mode: 'index',
+ intersect: true
+ },
+ scales: {
+ xAxes: [{
+ display: true,
+ scaleLabel: {
+ show: true,
+ labelString: 'Month'
+ }
+ }],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ show: true,
+ labelString: 'Value'
+ }
+ }]
+ }
+ }
+ };
+
+ window.onload = function() {
+ var ctx = document.getElementById("canvas").getContext("2d");
+ window.myLine = new Chart(ctx, config);
+ };
+ </script>
+</body>
+
+</html>
projects / thirdparty / Chart.js.git / commitdiff
