https://streetperfect.com/js/charts.js?v=XObSb2JDoufuErSLQeYUzutiHVODbK2WjFZWevILGXo

1
2
3
4function InitChart(elem, data, label, tt_label, unit, fTrendline, color, bg_color) {
5
6	var ctx = document.getElementById(elem);
7	//var backgroundColor = Array(31).fill('rgba(54, 162, 235, 0.2)')
8	//var borderColor = Array(31).fill('rgba(54, 162, 235, 1)')
9	Chart.defaults.elements.bar.backgroundColor = 'rgba(54, 162, 235, 0.2)';
10	Chart.defaults.elements.bar.borderColor = 'rgba(54, 162, 235, 1)';
11
12
13	datasets = [{
14		//steppedLine: true,
15		label: label,
16		data: data,
17		backgroundColor: bg_color,
18		borderColor: color,
19		borderWidth: 1
20	}];
21
22	if (fTrendline) {
23		datasets[0]['trendlineLinear'] = {
24			colorMin: "blue",
25			colorMax: "blue",
26			lineStyle: "dotted",
27			width: 1,
28			projection: true
29		}
30    }
31
32	if (unit == 'month') {
33		tooltipFormat = 'MMM yyyy';
34	}
35	else {
36		tooltipFormat = 'MMM dd yyyy';
37	}
38
39	return new Chart(ctx, {
40		type: 'bar',
41		data: {
42			//labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep','Oct', 'Dec'],
43			datasets: datasets
44		},
45
46		options: {
47			onClick: function(e) {
48				let nearest = this.getElementsAtEventForMode(e, 'nearest', { intersect: true}, true);
49				if (nearest.length && unit == 'month') {
50					let dt = nearest[0].element.$context.raw.t.substr(0, 7);
51					let href = `${window.location.origin}${window.location.pathname}?cm=${dt}`;
52					let params = new URLSearchParams(document.location.search);
53					let nm = params.get("nm")
54					if (nm) {
55						href = href + `&nm=${nm}`;
56					}
57					let ret = params.get("ret")
58					if (ret) {
59						href = href + `&ret=${ret}`;
60					}
61					window.location = href;
62				}
63			},
64			plugins: {
65				tooltip: {
66					callbacks: {
67						label: function (ctx) {
68							let multistringText = [tt_label + ctx.formattedValue];
69							if (ctx.raw.r) {
70								multistringText.push('');
71								// need to use Object.keys as Object.entries has an issue with minify
72								for (const k of Object.keys(ctx.raw.r)) {
73									multistringText.push(`${k} : ${ctx.raw.r[k]}`);
74								}
75							}
76							return multistringText;
77						}
78					}
79				}
80			},
81			maintainAspectRatio: false,
82			//aspectRatio:1.2,
83			responsive: true,
84			parsing: {
85				xAxisKey: 't',
86				yAxisKey: 'y'
87			},
88			scales: {
89				y: {
90					display: true,
91					ticks: {
92						beginAtZero: true
93					},
94				},
95				x: {
96					display: true,
97					offset: true,
98					type: 'time',
99					distribution: 'series',
100					bounds: 'data',
101					time: {
102						unit: unit,
103						tooltipFormat: tooltipFormat,
104					},
105					gridLines: {
106						offsetGridLines: true
107					},
108				}
109
110			}
111		}
112	});
113}
114