// Set new default font family and font color to mimic Bootstrap's default styling Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; Chart.defaults.global.defaultFontColor = '#858796'; function number_format(number, decimals, dec_point, thousands_sep) { // * example: number_format(1234.56, 2, ',', ' '); // * return: '1 234,56' number = (number + '').replace(',', '').replace(' ', ''); var n = !isFinite(+number) ? 0 : +number, prec = !isFinite(+decimals) ? 0 : Math.abs(decimals), sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep, dec = (typeof dec_point === 'undefined') ? '.' : dec_point, s = '', toFixedFix = function(n, prec) { var k = Math.pow(10, prec); return '' + Math.round(n * k) / k; }; // Fix for IE parseFloat(0.55).toFixed(0) = 0; s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.'); if (s[0].length > 3) { s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep); } if ((s[1] || '').length < prec) { s[1] = s[1] || ''; s[1] += new Array(prec - s[1].length + 1).join('0'); } return s.join(dec); } ["07:26", "07:21", "07:16", "07:11", "07:06", "07:01", "06:56", "06:51", "06:46", "06:41", "06:36", "06:31", "06:26", "06:21", "06:16", "06:11", "06:06", "06:01", "05:56", "05:51", "05:46", "05:41", "05:36", "05:31", "05:26", "05:21", "05:16", "05:11", "05:06", "05:01", "04:56", "04:51", "04:46", "04:41", "04:36", "04:31", "04:26", "04:21", "04:16", "04:11", "04:06", "04:01", "03:56", "03:51", "03:46", "03:41", "03:36", "03:31", "03:26", "03:21", "03:16", "03:11", "03:06", "03:01", "02:56", "02:51", "02:46", "02:41", "02:36", "02:31", "02:26", "02:21", "02:16", "02:11", "02:06", "02:01", "01:56", "01:51", "01:46", "01:41", "01:36", "01:31", "01:26", "01:21", "01:16", "01:11", "01:06", "01:01", "00:56", "00:51", "00:46", "00:41", "00:36", "00:31", "00:26", "00:21", "00:16", "00:11", "00:06", "00:01", "23:56", "23:51", "23:46", "23:41", "23:36", "23:31", "23:26", "23:21", "23:16", "23:11", "23:06", "23:01", "22:56", "22:51", "22:46", "22:41", "22:36", "22:31", "22:26", "22:21", "22:16", "22:11", "22:06", "22:01", "21:56", "21:51", "21:46", "21:41", "21:36", "21:31", "21:26", "21:21", "21:16", "21:11", "21:06", "21:01", "20:56", "20:51", "20:46", "20:41", "20:36", "20:31", "20:26", "20:21", "20:16", "20:11", "20:06", "20:01", "19:56", "19:51", "19:46", "19:41", "19:36", "19:31", "19:26", "19:21", "19:16", "19:11", "19:06", "19:01", "18:56", "18:51", "18:46", "18:41", "18:36", "18:31", "18:26", "18:21", "18:16", "18:11", "18:06", "18:01", "17:56", "17:51", "17:46", "17:41", "17:36", "17:31", "17:26", "17:21", "17:16", "17:11", "17:06", "17:01", "16:56", "16:51", "16:46", "16:41", "16:36", "16:31", "16:26", "16:21", "16:16", "16:11", "16:06", "16:01", "15:56", "15:51", "15:46", "15:41", "15:36", "15:31", "15:26", "15:21", "15:16", "15:11", "15:06", "15:01", "14:56", "14:51", "14:46", "14:41", "14:36", "14:31", "14:26", "14:21", "14:16", "14:11", "14:06", "14:01", "13:56", "13:51", "13:46", "13:41", "13:36", "13:31", "13:26", "13:21", "13:16", "13:11", "13:06", "13:01", "12:56", "12:51", "12:46", "12:41", "12:36", "12:31", "12:26", "12:21", "12:16", "12:11", "12:06", "12:01", "11:56", "11:51", "11:46", "11:41", "11:36", "11:31", "11:26", "11:21", "11:16", "11:11", "11:06", "11:01", "10:56", "10:51", "10:46", "10:41", "10:36", "10:31", "10:26", "10:21", "10:16", "10:11", "10:06", "10:01", "09:56", "09:51", "09:46", "09:41", "09:36", "09:31", "09:26", "09:21", "09:16", "09:11", "09:06", "09:01", "08:56", "08:51", "08:46", "08:41", "08:36", "08:31", "08:26", "08:21", "08:16", "08:11", "08:06", "08:01", "07:56", "07:51", "07:46", "07:41", "07:36"] [11, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 10, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 8, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 7, 7, 7, 7, 7, 8, 8, 8, 8, 9, 8, 8, 9, 9, 9, 11, 10, 9, 9, 9, 9, 9, 9, 8, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 9, 9, 11, 12, 11, 11, 12, 12, 12, 12, 11, 11, 11, 11, 9, 9, 9, 9, 9, 9, 9, 8, 8, 8, 7, 7, 8, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 7, 9, 8, 8, 9, 9, 9, 9, 9, 9, 10, 9, 9, 8, 10, 10, 10, 10, 10, 11, 11, 11, 11, 11, 10, 10, 11, 11, 13, 12, 12, 12, 12, 12, 11, 11, 11, 12, 10, 10, 10, 10, 10, 10, 10, 11, 12, 11, 11, 11, 11, 10, 10, 10, 10, 10, 10, 10, 9, 9, 8, 8, 8, 8, 9, 9, 10, 9, 9, 9, 10, 10, 10, 11, 10, 10, 11, 11, 11, 11, 11, 11, 11, 11, 11, 9, 9, 9, 9, 9, 10, 11, 10, 10, 9, 10, 9, 9, 9, 9, 8, 9, 9, 9, 8, 8, 8, 7, 7, 8, 7, 7, 8, 7, 8, 8, 7, 8, 8, 7, 7, 7, 8, 7, 7, 7, 8] // Area Chart Example var ctx = document.getElementById("myAreaChart"); var myLineChart = new Chart(ctx, { type: 'line', data: { labels: ["07:26", "07:21", "07:16", "07:11", "07:06", "07:01", "06:56", "06:51", "06:46", "06:41", "06:36", "06:31", "06:26", "06:21", "06:16", "06:11", "06:06", "06:01", "05:56", "05:51", "05:46", "05:41", "05:36", "05:31", "05:26", "05:21", "05:16", "05:11", "05:06", "05:01", "04:56", "04:51", "04:46", "04:41", "04:36", "04:31", "04:26", "04:21", "04:16", "04:11", "04:06", "04:01", "03:56", "03:51", "03:46", "03:41", "03:36", "03:31", "03:26", "03:21", "03:16", "03:11", "03:06", "03:01", "02:56", "02:51", "02:46", "02:41", "02:36", "02:31", "02:26", "02:21", "02:16", "02:11", "02:06", "02:01", "01:56", "01:51", "01:46", "01:41", "01:36", "01:31", "01:26", "01:21", "01:16", "01:11", "01:06", "01:01", "00:56", "00:51", "00:46", "00:41", "00:36", "00:31", "00:26", "00:21", "00:16", "00:11", "00:06", "00:01", "23:56", "23:51", "23:46", "23:41", "23:36", "23:31", "23:26", "23:21", "23:16", "23:11", "23:06", "23:01", "22:56", "22:51", "22:46", "22:41", "22:36", "22:31", "22:26", "22:21", "22:16", "22:11", "22:06", "22:01", "21:56", "21:51", "21:46", "21:41", "21:36", "21:31", "21:26", "21:21", "21:16", "21:11", "21:06", "21:01", "20:56", "20:51", "20:46", "20:41", "20:36", "20:31", "20:26", "20:21", "20:16", "20:11", "20:06", "20:01", "19:56", "19:51", "19:46", "19:41", "19:36", "19:31", "19:26", "19:21", "19:16", "19:11", "19:06", "19:01", "18:56", "18:51", "18:46", "18:41", "18:36", "18:31", "18:26", "18:21", "18:16", "18:11", "18:06", "18:01", "17:56", "17:51", "17:46", "17:41", "17:36", "17:31", "17:26", "17:21", "17:16", "17:11", "17:06", "17:01", "16:56", "16:51", "16:46", "16:41", "16:36", "16:31", "16:26", "16:21", "16:16", "16:11", "16:06", "16:01", "15:56", "15:51", "15:46", "15:41", "15:36", "15:31", "15:26", "15:21", "15:16", "15:11", "15:06", "15:01", "14:56", "14:51", "14:46", "14:41", "14:36", "14:31", "14:26", "14:21", "14:16", "14:11", "14:06", "14:01", "13:56", "13:51", "13:46", "13:41", "13:36", "13:31", "13:26", "13:21", "13:16", "13:11", "13:06", "13:01", "12:56", "12:51", "12:46", "12:41", "12:36", "12:31", "12:26", "12:21", "12:16", "12:11", "12:06", "12:01", "11:56", "11:51", "11:46", "11:41", "11:36", "11:31", "11:26", "11:21", "11:16", "11:11", "11:06", "11:01", "10:56", "10:51", "10:46", "10:41", "10:36", "10:31", "10:26", "10:21", "10:16", "10:11", "10:06", "10:01", "09:56", "09:51", "09:46", "09:41", "09:36", "09:31", "09:26", "09:21", "09:16", "09:11", "09:06", "09:01", "08:56", "08:51", "08:46", "08:41", "08:36", "08:31", "08:26", "08:21", "08:16", "08:11", "08:06", "08:01", "07:56", "07:51", "07:46", "07:41", "07:36"], datasets: [{ label: "H�rer", lineTension: 0.3, backgroundColor: "rgba(78, 115, 223, 0.05)", borderColor: "rgba(78, 115, 223, 1)", pointRadius: 3, pointBackgroundColor: "rgba(78, 115, 223, 1)", pointBorderColor: "rgba(78, 115, 223, 1)", pointHoverRadius: 3, pointHoverBackgroundColor: "rgba(78, 115, 223, 1)", pointHoverBorderColor: "rgba(78, 115, 223, 1)", pointHitRadius: 10, pointBorderWidth: 2, data: [11, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 10, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 8, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 7, 7, 7, 7, 7, 8, 8, 8, 8, 9, 8, 8, 9, 9, 9, 11, 10, 9, 9, 9, 9, 9, 9, 8, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 9, 9, 11, 12, 11, 11, 12, 12, 12, 12, 11, 11, 11, 11, 9, 9, 9, 9, 9, 9, 9, 8, 8, 8, 7, 7, 8, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 7, 9, 8, 8, 9, 9, 9, 9, 9, 9, 10, 9, 9, 8, 10, 10, 10, 10, 10, 11, 11, 11, 11, 11, 10, 10, 11, 11, 13, 12, 12, 12, 12, 12, 11, 11, 11, 12, 10, 10, 10, 10, 10, 10, 10, 11, 12, 11, 11, 11, 11, 10, 10, 10, 10, 10, 10, 10, 9, 9, 8, 8, 8, 8, 9, 9, 10, 9, 9, 9, 10, 10, 10, 11, 10, 10, 11, 11, 11, 11, 11, 11, 11, 11, 11, 9, 9, 9, 9, 9, 10, 11, 10, 10, 9, 10, 9, 9, 9, 9, 8, 9, 9, 9, 8, 8, 8, 7, 7, 8, 7, 7, 8, 7, 8, 8, 7, 8, 8, 7, 7, 7, 8, 7, 7, 7, 8], }], }, options: { maintainAspectRatio: false, layout: { padding: { left: 10, right: 25, top: 25, bottom: 0 } }, scales: { xAxes: [{ time: { unit: 'date' }, gridLines: { display: false, drawBorder: false }, ticks: { maxTicksLimit: 7 } }], yAxes: [{ ticks: { maxTicksLimit: 5, padding: 10, // Include a dollar sign in the ticks callback: function(value, index, values) { return ' ' + number_format(value); } }, gridLines: { color: "rgb(234, 236, 244)", zeroLineColor: "rgb(234, 236, 244)", drawBorder: false, borderDash: [2], zeroLineBorderDash: [2] } }], }, legend: { display: false }, tooltips: { backgroundColor: "rgb(255,255,255)", bodyFontColor: "#858796", titleMarginBottom: 10, titleFontColor: '#6e707e', titleFontSize: 14, borderColor: '#dddfeb', borderWidth: 1, xPadding: 15, yPadding: 15, displayColors: false, intersect: false, mode: 'index', caretPadding: 10, callbacks: { label: function(tooltipItem, chart) { var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || ''; return datasetLabel + ': ' + number_format(tooltipItem.yLabel); } } } } });