https://wxuas.com/js/pressureChart.js

1function PressureChart(elementId) {
2    var obj = this;
3
4    this.pressure = {
5        max: 800,
6        min: 690,
7        labelCount: 10,
8        interval: 0,
9        axisColor: 'rgb(192,192,192)',
10        units: ' hPa'
11    };
12
13    this.temperature = {
14        max: 25,
15        min: -5,
16        labelCount: 10,
17        interval: 0,
18        axisColor: 'rgb(192,192,192)',
19        units: ' \u00B0C'
20    };
21
22    this.width = 900;
23    this.height = 400;
24
25    this.padding = {
26        left: 50,
27        bottom: 15
28    };
29
30    this.colors = ["rgb(255, 205, 86)", "rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(75, 192, 192)", "rgb(102, 255, 0)"];
31    this.data = []; //{ pressure: 730, temperature: 10 }, { pressure: 730, temperature: 10 }]; // ...
32
33    this.Canvas = document.getElementById(elementId);
34    this.Context = this.Canvas.getContext('2d');
35
36    this.calculate = function () {
37        obj.Canvas.width = obj.width;
38        obj.Canvas.height = obj.height;
39        obj.pressure.interval = (obj.pressure.max - obj.pressure.min) / obj.pressure.labelCount;
40        obj.temperature.interval = (obj.temperature.max - obj.temperature.min) / obj.temperature.labelCount;
41    };
42
43    this.toX = function(c) {
44        var x = ((c - obj.temperature.min) / (obj.temperature.max - obj.temperature.min)) * (obj.width - obj.padding.left);
45
46        if (x < 0) return 0;
47        else if (x > obj.width) return obj.width;
48        else return x;
49    };
50
51    this.toY = function(p) {
52        var y = ((p - obj.pressure.min) / (obj.pressure.max - obj.pressure.min)) * (obj.height - obj.padding.bottom);
53
54        if (y < 0) return 0;
55        else if (y > obj.height) return obj.height;
56        else return y;
57    };
58
59    this.drawYAxis = function (config) {
60        var context = obj.Context;
61
62        context.font = '12px serif';
63        context.fillStyle = 'rgb(0,0,0)';
64        for (var i = 0; i < config.labelCount; i++) {
65            var p = config.max - (i * config.interval);
66            var y = obj.toY(p);
67            context.fillText(Number(p.toFixed(2)) + config.units, 0, y);
68        }
69
70        context.translate(obj.padding.left, 0);
71        context.lineWidth = 1;
72        context.strokeStyle = config.axisColor;
73        for (var i = 0; i < config.labelCount; i++) {
74            var p = config.max - (i * config.interval);
75            var y = obj.toY(p);
76            context.beginPath();
77            context.moveTo(0, y);
78            context.lineTo(obj.width, y);
79            context.closePath();
80            context.stroke();
81        }
82
83        context.translate(obj.padding.left * -1, 0);
84        context.save();
85    };
86
87    this.drawXAxis = function (config) {
88        var context = obj.Context;
89
90        context.translate(obj.padding.left, 0);
91        context.font = '12px serif';
92        context.fillStyle = 'rgb(0,0,0)';
93        for (var i = 0; i < config.labelCount; i++) {
94            var t = config.min + (i * config.interval);
95            var x = obj.toX(t);
96            context.fillStyle = 'rgb(0,0,0)';
97            context.fillText(Number(t.toFixed(2)) + config.units, x, obj.height);
98            context.fillStyle = config.axisColor;
99        }
100
101        context.strokeStyle = config.axisColor;
102        for (var i = 0; i < config.labelCount; i++) {
103            var t = config.min + (i * config.interval);
104            var x = obj.toX(t);
105            context.beginPath();
106            context.moveTo(x, obj.height - obj.padding.bottom);
107            context.lineTo(x, 0);
108            context.closePath();
109            context.stroke();
110        }
111
112        context.translate(obj.padding.left * -1, 0);
113        context.save();
114    };
115
116    this.isOutsideBounds = function (data, limits) {
117        if (data < limits.min)
118            return true;
119        else if (data > limits.max)
120            return true;
121        else
122            return false;
123    };
124
125    // allows us to override. datapoint should be { temperature; pressure; color? }
126    this.getStrokeColor = function (dataPoint, index) {
127        return dataPoint.color ? dataPoint.color : obj.colors[index];
128    };
129
130    this.drawTemperatureC = function (temperatures) {
131        var context = obj.Context;
132
133        if (obj.data.length == 0)
134            obj.data = temperatures;
135

136        temperatures.forEach((a, i) => {
137            if (obj.isOutsideBounds(a.temperature, obj.temperature) || obj.isOutsideBounds(a.pressure, obj.pressure))
138                return;
139
140            context.strokeStyle = obj.getStrokeColor(a, i);
141            context.beginPath();
142            context.moveTo(obj.toX(obj.data[i].temperature), obj.toY(obj.data[i].pressure));
143            context.lineTo(obj.toX(a.temperature), obj.toY(a.pressure));
144            context.closePath();
145            context.stroke();
146        });
147        obj.data = temperatures;
148    };
149
150    this.reset = function () {
151        obj.data = [];
152        obj.Context.translate(obj.padding.left * -1, 0);
153        obj.Context.clearRect(0, 0, obj.Canvas.width, obj.Canvas.height);
154        obj.calculate();
155        obj.drawYAxis(obj.pressure);
156        obj.drawXAxis(obj.temperature);
157        obj.Context.translate(obj.padding.left, 0);
158    };
159
160    this.setSize = function(width, height) {
161        obj.width = width;
162        obj.height = height;
163    }
164
165    this.Context.translate(this.padding.left, 0);
166    this.reset();
167}