-
Notifications
You must be signed in to change notification settings - Fork 3
/
chart.html
104 lines (101 loc) · 3.24 KB
/
chart.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
<html>
<body>
<div>
<canvas id="myChart" style="width:70%; height:70%;"></canvas>
<!-- <canvas id="myChart"></canvas> -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="data/books.js"></script>
<script>
let max = 0;
let min = 0;
let labels = [];
const monthNames = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const start = new Date(Books.startDate).getTime();
// const start = new Date('30 jun 2021').getTime();
const end = new Date(Books.endDate).getTime();
// const end = new Date().getTime();
for (t = start; t < end; t += Books.step * 24 * 3600 * 1000) {
// labels.push(`${new Date(t).getDate()} ${monthNames[new Date(t).getMonth()]} '${new Date(t).getFullYear() % 100}`);
labels.push(`${monthNames[new Date(t).getMonth()]}-${new Date(t).getFullYear() % 100}`);
}
// console.log()
[ Books.seriesLiquid, Books.seriesLiquidCredit, Books.seriesLiquidCreditAssets].forEach(arr => {
arr.forEach(x => {
if (x < min) {
min = x;
}
if (x > max) {
max = x;
}
})
});
max *= 2;
min *= 2;
const DATA_COUNT = Books.seriesLiquid.length;
const NUMBER_CFG = {count: DATA_COUNT, min, max};
const data = {
labels,
datasets: [
{
label: 'Liquid',
data: Books.seriesLiquid,
borderColor: 'blue',
backgroundColor: 'lightblue',
// fill: 'origin'
},
{
label: 'Credit',
data: Books.seriesLiquidCredit,
borderColor: 'red',
backgroundColor: 'pink',
fill: 0,
},
{
label: 'Assets',
data: Books.seriesLiquidCreditAssets,
borderColor: 'green',
backgroundColor: 'lightGreen',
fill: 1,
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Ponder Source Equity'
}
}
},
plugins: [
{
id: 'custom_canvas_background_color',
beforeDraw: (chart) => {
const ctx = chart.canvas.getContext('2d');
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'lightYellow';
ctx.fillRect(0, 0, chart.width, chart.height);
ctx.restore();
}
}
]
};
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, config);
document.getElementById('myChart').style.width = '70%';
document.getElementById('myChart').style.height = '70%';
</script>
</html>