-
Notifications
You must be signed in to change notification settings - Fork 0
/
chart.js
41 lines (32 loc) · 815 Bytes
/
chart.js
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
var chart = document.querySelector(".chart");
// Crating canvas element
const canvas = document.createElement("canvas");
// to draw our canvas ,we need to get context of canvas
const ctx = canvas.getContext("2d");
canvas.width = 150;
canvas.height = 150;
// Append canvas to chart element
chart.appendChild(canvas);
// change line width
ctx.lineWidth = 16;
// circle radius
const R = 60;
function drawCircle(color, ratio, anticlockwise) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.arc(
canvas.width / 2,
canvas.height / 2,
R,
0,
ratio * 2 * Math.PI,
anticlockwise
);
ctx.stroke();
}
function updateChart(income, expense) {
let ratio = income / (income + expense);
drawCircle("#28B9B5", -ratio, true);
drawCircle("#e66767", 1 - ratio, false);
}
updateChart(0, 0);