-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathGraph3.html
104 lines (98 loc) · 3.65 KB
/
Graph3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie = edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<title>MyChart.js Chart</title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let drugOverdoseChart = new Chart(myChart, {
type: 'line', //bar, horizontalBar, pie, line, donut, radar, polarArea
data: {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [{
label: 'Barbabas Greir',
data: [
0, 4, 20, 19, 8, 20
],
borderColor: 'red',
backgroundColor: 'red'
},
{
label: 'Sunny MacGillespie',
data: [0, 19, 11, 20, 3, 19
],
borderColor: 'orange',
backgroundColor: 'orange'
},
{
label: 'Darlene Easun',
data: [2, 12, 19, 9, 15, 20
],
borderColor: 'yellow',
backgroundColor: 'yellow'
},
{
label: 'Reinaldos Mantle',
data: [3, 7, 20, 14, 18, 20
],
borderColor: 'green',
backgroundColor: 'green'
},
{
label: 'Ferrell Pendrid',
data: [2, 13, 11, 11, 11, 18
],
borderColor: 'blue',
backgroundColor: 'blue'
},
{
label: 'Caspar Gascar',
data: [3, 12, 20, 14, 15, 18
],
borderColor: 'purple',
backgroundColor: 'purple'
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'Future Top Targets Based on Top Performers'
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: 'black'
}
},
},
scales: {
x: {
title: {
display: true,
text: 'NRx Month'
}
},
y: {
title: {
display: true,
text: 'No. of Prescriptions'
}
}
}
},
});
</script>
</body>
</html>