63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
var forEach = function (array, callback, scope) {
|
|
for (var i = 0; i < array.length; i++) {
|
|
callback.call(scope, i, array[i]);
|
|
}
|
|
};
|
|
|
|
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(201, 203, 207)'
|
|
};
|
|
|
|
var ChartLoader = function() {
|
|
var charts = document.querySelectorAll('.chart-container');
|
|
|
|
forEach(charts, function(i, chart) {
|
|
var api = chart.getAttribute('data-api');
|
|
var canvas = chart.querySelector('.chart-canvas');
|
|
var height = chart.getAttribute('data-height');
|
|
var data = {};
|
|
var config = {
|
|
type: chart.getAttribute('data-type'),
|
|
data: data,
|
|
options: {}
|
|
};
|
|
var instance = new Chart(canvas, config);
|
|
|
|
chart.addEventListener('refresh', function() {
|
|
fetch(api)
|
|
.then(function(response) {
|
|
if(response.ok) {
|
|
response.json().then(function(json) {
|
|
if (json.hasOwnProperty('data')) {
|
|
instance.data = json.data;
|
|
}
|
|
|
|
if (json.hasOwnProperty('options')) {
|
|
instance.options = json.options;
|
|
}
|
|
|
|
if (json.hasOwnProperty('type')) {
|
|
instance.type = json.type;
|
|
}
|
|
|
|
instance.update();
|
|
instance.resize();
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
chart.dispatchEvent(new Event('refresh'));
|
|
});
|
|
}
|
|
|
|
window.addEventListener('load', function() {
|
|
ChartLoader();
|
|
}, false)
|