mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-11 10:46:52 +01:00
Reorganized sample files into sub directories. Added a helper containing colours that should be used by all samples.
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.
This commit is contained in:
etimberg
@@ -3,7 +3,7 @@
|
||||
<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;
|
||||
@@ -21,145 +21,77 @@
|
||||
<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();
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -36,21 +36,37 @@
|
||||
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()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
@@ -62,12 +78,10 @@
|
||||
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,
|
||||
@@ -83,10 +97,9 @@
|
||||
|
||||
};
|
||||
|
||||
$('#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();
|
||||
});
|
||||
@@ -95,10 +108,15 @@
|
||||
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: []
|
||||
};
|
||||
|
||||
@@ -110,7 +128,7 @@
|
||||
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);
|
||||
@@ -123,12 +141,12 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#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) {
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -23,46 +23,61 @@
|
||||
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
|
||||
@@ -83,16 +98,11 @@
|
||||
});
|
||||
};
|
||||
|
||||
$('#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();
|
||||
});
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -23,24 +23,45 @@
|
||||
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()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
@@ -55,7 +76,8 @@
|
||||
text:"Chart.js Bar Chart - Stacked"
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index'
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
@@ -70,11 +92,11 @@
|
||||
});
|
||||
};
|
||||
|
||||
$('#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();
|
||||
});
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -36,21 +36,37 @@
|
||||
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()
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
@@ -61,15 +77,6 @@
|
||||
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',
|
||||
@@ -83,10 +90,9 @@
|
||||
|
||||
};
|
||||
|
||||
$('#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();
|
||||
});
|
||||
@@ -95,10 +101,15 @@
|
||||
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: []
|
||||
};
|
||||
|
||||
@@ -110,7 +121,7 @@
|
||||
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);
|
||||
@@ -124,12 +135,12 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#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) {
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -31,20 +31,17 @@
|
||||
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(),
|
||||
@@ -76,7 +73,9 @@
|
||||
}]
|
||||
}, {
|
||||
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(),
|
||||
@@ -120,14 +119,15 @@
|
||||
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(),
|
||||
@@ -139,11 +139,16 @@
|
||||
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: []
|
||||
};
|
||||
|
||||
@@ -159,7 +164,7 @@
|
||||
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({
|
||||
@@ -173,13 +178,12 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#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();
|
||||
});
|
||||
|
||||
9
samples/chartColors.js
Normal file
9
samples/chartColors.js
Normal file
@@ -0,0 +1,9 @@
|
||||
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)'
|
||||
}
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -23,32 +23,53 @@
|
||||
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',
|
||||
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 1',
|
||||
borderColor: window.chartColors.blue,
|
||||
borderWidth: 2,
|
||||
fill: false,
|
||||
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()],
|
||||
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() {
|
||||
@@ -61,16 +82,20 @@
|
||||
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();
|
||||
});
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,95 +0,0 @@
|
||||
|
||||
<!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>
|
||||
136
samples/data_labelling.html
Normal file
136
samples/data_labelling.html
Normal file
@@ -0,0 +1,136 @@
|
||||
|
||||
<!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>
|
||||
@@ -1,154 +0,0 @@
|
||||
<!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>
|
||||
@@ -4,7 +4,7 @@
|
||||
<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;
|
||||
@@ -27,12 +27,6 @@
|
||||
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',
|
||||
@@ -46,53 +40,20 @@
|
||||
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: {
|
||||
@@ -116,21 +77,18 @@
|
||||
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: [],
|
||||
@@ -139,35 +97,41 @@
|
||||
|
||||
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();
|
||||
});
|
||||
|
||||
124
samples/generalScales/display-settings.html
Normal file
124
samples/generalScales/display-settings.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!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>
|
||||
93
samples/generalScales/filtering-labels.html
Normal file
93
samples/generalScales/filtering-labels.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!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>
|
||||
69
samples/generalScales/gridlines.html
Normal file
69
samples/generalScales/gridlines.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!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>
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -41,14 +41,15 @@
|
||||
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: [{
|
||||
@@ -74,14 +75,6 @@
|
||||
}
|
||||
};
|
||||
|
||||
$.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);
|
||||
86
samples/generalScales/multiline-labels.html
Normal file
86
samples/generalScales/multiline-labels.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!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>
|
||||
120
samples/legend/pointstyle.html
Normal file
120
samples/legend/pointstyle.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!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>
|
||||
125
samples/legend/positions.html
Normal file
125
samples/legend/positions.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!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>
|
||||
@@ -1,146 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,172 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,155 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,218 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,163 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,224 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,151 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,220 +0,0 @@
|
||||
<!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>
|
||||
134
samples/line/different-point-sizes.html
Normal file
134
samples/line/different-point-sizes.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<!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>
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -25,13 +25,6 @@
|
||||
|
||||
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];
|
||||
@@ -42,20 +35,20 @@
|
||||
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
|
||||
@@ -70,9 +63,6 @@
|
||||
tooltips: {
|
||||
mode: 'index'
|
||||
},
|
||||
hover: {
|
||||
mode: 'dataset'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
@@ -100,7 +90,7 @@
|
||||
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();
|
||||
}
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -23,31 +23,42 @@
|
||||
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, {
|
||||
@@ -57,16 +68,10 @@
|
||||
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,
|
||||
@@ -88,10 +93,12 @@
|
||||
});
|
||||
};
|
||||
|
||||
$('#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();
|
||||
});
|
||||
99
samples/line/line-skip-points.html
Normal file
99
samples/line/line-skip-points.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!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>
|
||||
188
samples/line/line-stacked-area.html
Normal file
188
samples/line/line-stacked-area.html
Normal file
@@ -0,0 +1,188 @@
|
||||
<!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>
|
||||
96
samples/line/line-stepped.html
Normal file
96
samples/line/line-stepped.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!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>
|
||||
115
samples/line/line-styles.html
Normal file
115
samples/line/line-styles.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<!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>
|
||||
@@ -3,10 +3,10 @@
|
||||
|
||||
<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;
|
||||
@@ -27,16 +27,9 @@
|
||||
<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 = {
|
||||
@@ -45,29 +38,47 @@
|
||||
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: [{
|
||||
@@ -82,27 +93,19 @@
|
||||
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();
|
||||
});
|
||||
@@ -112,15 +115,16 @@
|
||||
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) {
|
||||
@@ -131,12 +135,12 @@
|
||||
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());
|
||||
});
|
||||
|
||||
@@ -144,12 +148,12 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#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) {
|
||||
92
samples/line/point-styles.html
Normal file
92
samples/line/point-styles.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!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>
|
||||
64
samples/linearScale/min-max-settings.html
Normal file
64
samples/linearScale/min-max-settings.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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>
|
||||
116
samples/linearScale/step-size.html
Normal file
116
samples/linearScale/step-size.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<!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>
|
||||
67
samples/linearScale/suggested-min-max-settings.html
Normal file
67
samples/linearScale/suggested-min-max-settings.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!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>
|
||||
97
samples/logarithmicScale/line-logarithmic.html
Normal file
97
samples/logarithmicScale/line-logarithmic.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<!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>
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -16,20 +16,14 @@
|
||||
|
||||
<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,
|
||||
@@ -128,14 +122,6 @@
|
||||
}]
|
||||
};
|
||||
|
||||
$.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, {
|
||||
@@ -1,156 +0,0 @@
|
||||
<!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>
|
||||
@@ -4,12 +4,12 @@
|
||||
<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>
|
||||
@@ -18,12 +18,6 @@
|
||||
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',
|
||||
@@ -37,49 +31,20 @@
|
||||
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: {
|
||||
@@ -92,27 +57,37 @@
|
||||
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();
|
||||
});
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<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;
|
||||
@@ -15,7 +15,7 @@
|
||||
</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>
|
||||
@@ -25,13 +25,9 @@
|
||||
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: [{
|
||||
@@ -43,26 +39,26 @@
|
||||
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,
|
||||
@@ -86,37 +82,33 @@
|
||||
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>
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
<!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>
|
||||
109
samples/radar/radar-skip-points.html
Normal file
109
samples/radar/radar-skip-points.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!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>
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<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;
|
||||
@@ -27,32 +27,40 @@
|
||||
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: {
|
||||
@@ -64,10 +72,6 @@
|
||||
text: 'Chart.js Radar Chart'
|
||||
},
|
||||
scale: {
|
||||
reverse: false,
|
||||
gridLines: {
|
||||
color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
@@ -79,25 +83,26 @@
|
||||
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: [],
|
||||
};
|
||||
|
||||
@@ -109,11 +114,11 @@
|
||||
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());
|
||||
});
|
||||
|
||||
@@ -121,15 +126,15 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#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();
|
||||
});
|
||||
|
||||
@@ -1,187 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,177 +0,0 @@
|
||||
<!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>
|
||||
143
samples/scatter/scatter-multi-axis.html
Normal file
143
samples/scatter/scatter-multi-axis.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!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>
|
||||
111
samples/scatter/scatter.html
Normal file
111
samples/scatter/scatter.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!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>
|
||||
@@ -4,8 +4,8 @@
|
||||
<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;
|
||||
@@ -33,48 +33,70 @@
|
||||
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: {
|
||||
@@ -90,22 +112,14 @@
|
||||
}
|
||||
};
|
||||
|
||||
$.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();
|
||||
});
|
||||
@@ -114,14 +128,14 @@
|
||||
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: [],
|
||||
};
|
||||
|
||||
@@ -133,7 +147,7 @@
|
||||
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));
|
||||
|
||||
@@ -145,12 +159,12 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#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) {
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<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;
|
||||
@@ -29,14 +29,6 @@
|
||||
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();
|
||||
}
|
||||
@@ -45,11 +37,15 @@
|
||||
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()
|
||||
@@ -63,9 +59,11 @@
|
||||
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()
|
||||
@@ -78,8 +76,7 @@
|
||||
}, {
|
||||
x: newDate(5),
|
||||
y: randomScalingFactor()
|
||||
}],
|
||||
fill: false
|
||||
}]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
@@ -108,23 +105,15 @@
|
||||
}
|
||||
};
|
||||
|
||||
$.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();
|
||||
});
|
||||
});
|
||||
@@ -132,7 +121,7 @@
|
||||
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
|
||||
@@ -151,7 +140,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#removeData').click(function() {
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset, datasetIndex) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<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;
|
||||
@@ -33,14 +33,6 @@
|
||||
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();
|
||||
}
|
||||
@@ -53,20 +45,52 @@
|
||||
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()
|
||||
@@ -80,14 +104,11 @@
|
||||
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: [{
|
||||
@@ -112,23 +133,15 @@
|
||||
}
|
||||
};
|
||||
|
||||
$.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 {
|
||||
@@ -140,14 +153,14 @@
|
||||
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: [],
|
||||
};
|
||||
|
||||
@@ -159,7 +172,7 @@
|
||||
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));
|
||||
|
||||
@@ -178,12 +191,12 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('#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) {
|
||||
|
||||
@@ -1,189 +0,0 @@
|
||||
<!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>
|
||||
128
samples/tooltips/dataPoints-customTooltips.html
Normal file
128
samples/tooltips/dataPoints-customTooltips.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!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>
|
||||
119
samples/tooltips/interaction-modes.html
Normal file
119
samples/tooltips/interaction-modes.html
Normal file
@@ -0,0 +1,119 @@
|
||||
<!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>
|
||||
168
samples/tooltips/line-customTooltips.html
Normal file
168
samples/tooltips/line-customTooltips.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!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>
|
||||
146
samples/tooltips/pie-customTooltips.html
Normal file
146
samples/tooltips/pie-customTooltips.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!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>
|
||||
86
samples/tooltips/position-modes.html
Normal file
86
samples/tooltips/position-modes.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!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>
|
||||
111
samples/tooltips/tooltip-callbacks.html
Normal file
111
samples/tooltips/tooltip-callbacks.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user