161 lines
2.9 KiB
JavaScript
161 lines
2.9 KiB
JavaScript
"use strict";
|
|
|
|
var ctx = document.getElementById("myChart").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
|
datasets: [{
|
|
label: 'Statistics',
|
|
data: [460, 458, 330, 502, 430, 610, 488],
|
|
borderWidth: 2,
|
|
backgroundColor: '#6777ef',
|
|
borderColor: '#6777ef',
|
|
borderWidth: 2.5,
|
|
pointBackgroundColor: '#ffffff',
|
|
pointRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: '#f2f2f2',
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
stepSize: 150
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
display: false
|
|
},
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}]
|
|
},
|
|
}
|
|
});
|
|
|
|
var ctx = document.getElementById("myChart2").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
|
datasets: [{
|
|
label: 'Statistics',
|
|
data: [460, 458, 330, 502, 430, 610, 488],
|
|
borderWidth: 2,
|
|
backgroundColor: '#6777ef',
|
|
borderColor: '#6777ef',
|
|
borderWidth: 2.5,
|
|
pointBackgroundColor: '#ffffff',
|
|
pointRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
gridLines: {
|
|
drawBorder: false,
|
|
color: '#f2f2f2',
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
stepSize: 150
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
display: false
|
|
},
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}]
|
|
},
|
|
}
|
|
});
|
|
|
|
var ctx = document.getElementById("myChart3").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [
|
|
80,
|
|
50,
|
|
40,
|
|
30,
|
|
20,
|
|
],
|
|
backgroundColor: [
|
|
'#191d21',
|
|
'#63ed7a',
|
|
'#ffa426',
|
|
'#fc544b',
|
|
'#6777ef',
|
|
],
|
|
label: 'Dataset 1'
|
|
}],
|
|
labels: [
|
|
'Black',
|
|
'Green',
|
|
'Yellow',
|
|
'Red',
|
|
'Blue'
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'bottom',
|
|
},
|
|
}
|
|
});
|
|
|
|
var ctx = document.getElementById("myChart4").getContext('2d');
|
|
var myChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
datasets: [{
|
|
data: [
|
|
80,
|
|
50,
|
|
40,
|
|
30,
|
|
100,
|
|
],
|
|
backgroundColor: [
|
|
'#191d21',
|
|
'#63ed7a',
|
|
'#ffa426',
|
|
'#fc544b',
|
|
'#6777ef',
|
|
],
|
|
label: 'Dataset 1'
|
|
}],
|
|
labels: [
|
|
'Black',
|
|
'Green',
|
|
'Yellow',
|
|
'Red',
|
|
'Blue'
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'bottom',
|
|
},
|
|
}
|
|
}); |