samples/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>chartjs-plugin-colorschemes sample</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="../dist/chartjs-plugin-colorschemes.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.chart {
margin: auto;
width: 75%;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="chart">
<canvas id="myChart"></canvas>
</div>
<div>
<p class="text-center">
<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>
</p>
<p class="text-center">
Color Scheme:
<select id="scheme"></select>
Background:
<select id="background">
<option value="white" selected>White</option>
<option value="black">Black</option>
</select>
</p>
</div>
<script>
function randomScalingFactor() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [1, 2, 3].map(function(i) {
return {
label: 'Dataset ' + i,
data: [0, 0, 0, 0, 0, 0, 0].map(randomScalingFactor),
fill: false
};
})
},
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'
}
}]
},
plugins: {
colorschemes: {
scheme: 'brewer.Paired12'
}
}
}
};
window.onload = function() {
var colorSchemes = Chart.colorschemes;
var options = '';
Object.keys(colorSchemes).forEach(function(category) {
Object.keys(colorSchemes[category]).forEach(function(scheme) {
var schemeName = category + '.' + scheme;
options += '<option value="' + schemeName + '"' +
(schemeName === 'brewer.Paired12' ? ' selected>' : '>') +
schemeName + '</option>';
});
});
document.getElementById('scheme').innerHTML = options;
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = 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.myChart.update();
});
document.getElementById('addDataset').addEventListener('click', function() {
var newDataset = {
label: 'Dataset ' + (config.data.datasets.length + 1),
data: [],
fill: false
};
for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
config.data.datasets.push(newDataset);
window.myChart.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.myChart.update();
}
});
document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.pop();
window.myChart.update();
});
document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
});
window.myChart.update();
});
document.getElementById('scheme').addEventListener('change', function(event) {
config.options.plugins.colorschemes.scheme = event.target.value;
window.myChart.update();
});
document.getElementById('background').addEventListener('change', function(event) {
var globalDefaults = Chart.defaults.global;
var options = config.options;
var xGridLines = options.scales.xAxes[0].gridLines;
var yGridLines = options.scales.yAxes[0].gridLines;
var tooltips = options.tooltips;
document.getElementsByTagName('body')[0].bgColor = event.target.value;
if (event.target.value === 'white') {
xGridLines.color = yGridLines.color = 'rgba(0, 0, 0, 0.1)';
xGridLines.zeroLineColor = yGridLines.zeroLineColor = 'rgba(0, 0, 0, 0.25)';
globalDefaults.defaultFontColor = '#666';
tooltips.backgroundColor = 'rgba(0, 0, 0, 0.8)';
tooltips.titleFontColor = tooltips.bodyFontColor = '#fff';
} else {
xGridLines.color = yGridLines.color = 'rgba(255, 255, 255, 0.2)';
xGridLines.zeroLineColor = yGridLines.zeroLineColor = 'rgba(255, 255, 255, 0.5)';
globalDefaults.defaultFontColor = '#ccc';
tooltips.backgroundColor = 'rgba(255, 255, 255, 0.8)';
tooltips.titleFontColor = tooltips.bodyFontColor = '#000';
}
window.myChart.update();
});
</script>
</body>
</html>