-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathchart_example.html
65 lines (56 loc) · 1.55 KB
/
chart_example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script>
var ctx = document.getElementById("myChart");
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)'
};
let raw_data = {
"aws": 37,
"python": 28,
"azure": 23,
"gdg": 21,
"react": 16,
"opensource": 14,
"developer": 13,
"google": 12,
"js": 11
};
keys = _.keys(raw_data);
values = _.values(raw_data);
pieData = {
datasets: [{
data: values,
backgroundColor: [
window.chartColors.red,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
]
}],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels:keys
};
var myPieChart = new Chart(ctx,{
type: 'pie',
data: pieData,
options: {responsive: true}
});
</script>
</html>