JSFiddle - React, Tailwind, and code Playground
by hfrntt
HTML
<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>
<div id="gasverbrauch" style="height: 500px; min-width: 600px"></div>
<div id="csv">#--------------------------------------------------------------
# Logfile: /data/hvac/hvac.log
# Erstellt: 08.06.2010 00:00
# OPT_HVAC: V. 1.0.0
#----------------------------------------------------------------
# Datum Zeit Gas(mÂł) Kond.(L) qA(%) Cnt-Gas Cnt-Kon
#----------------------------------------------------------------
08.06.10 00:00 00.00
09.06.10 00:00 01.30
10.06.10 00:00 02.50
11.06.10 00:00 03.70
12.06.10 00:00 04.80
13.06.10 00:00 06.00
14.06.10 00:00 07.10
15.06.10 00:00 08.30
16.06.10 00:00 09.60
17.06.10 00:00 10.70
18.06.10 00:00 12.00
19.06.10 00:00 13.20
20.06.10 00:00 14.50
21.06.10 00:00 16.90
22.06.10 00:00 18.90
23.06.10 00:00 20.80
24.06.10 00:00 22.40
25.06.10 00:00 24.20
26.06.10 00:00 25.60
27.06.10 00:00 26.80
28.06.10 00:00 27.90
29.06.10 00:00 29.40
30.06.10 00:00 30.50
01.07.10 00:00 31.50
02.07.10 00:00 32.80
03.07.10 00:00 33.90
04.07.10 00:00 34.80
05.07.10 00:00 35.80
06.07.10 00:00 36.80
07.07.10 00:00 37.90
08.07.10 00:00 38.80
09.07.10 00:00 39.70
10.07.10 00:00 40.90
11.07.10 00:00 42.10
12.07.10 00:00 43.00
13.07.10 00:00 44.20
14.07.10 00:00 45.40
15.07.10 00:00 46.50
16.07.10 00:00 47.48
17.07.10 00:00 48.41
18.07.10 00:00 49.64
19.07.10 00:00 50.41
20.07.10 00:00 50.97
21.07.10 00:00 52.40
22.07.10 00:00 53.41
23.07.10 00:00 54.58
24.07.10 00:00 55.44
25.07.10 00:00 56.54
26.07.10 00:00 56.96
27.07.10 00:00 57.49
28.07.10 00:00 58.28
29.07.10 00:00 59.01
30.07.10 00:00 59.86
31.07.10 00:00 60.39
01.08.10 00:00 61.14
02.08.10 00:00 61.92
03.08.10 00:00 62.74
04.08.10 00:00 63.60
05.08.10 00:00 64.43
06.08.10 00:00 65.46
07.08.10 00:00 66.69
08.08.10 00:00 67.75
09.08.10 00:00 68.65
10.08.10 00:00 ...CSS
#csv {
display: none;
}JavaScript
$(function() {
(function(log) {
var lines = [],
dates = [],
gas = [],
gpd = [],
data = [],
date, listen = false;
// split the data return into lines and parse them
var log = log.split(/\n/g);
jQuery.each(log, function(i, line) {
if (line == '' || line.charAt(0) == '#') {
listen = false;
} else listen = true;
// read date lines, create useable data format
if (listen) {
line = line.split(/\s/);
date = line[0].split(".");
date = 20 + date[2] + "-" + date[1] + "-" + date[0];
// fill arrays
dates.push([
date
]);
gas.push([
parseFloat(line[4])
]);
}
});
//make array with gas used per day
var len = gas.length - 1;
for (var i = 0; i < len; i++) {
gpd.push(
parseFloat( (gas[i + 1] - gas[i]).toFixed(2) )
);
}
//[date, gas]
for (var i = 0; i < len; i++) {
data.push([
Date.parse(dates[i]),
gpd[i]
]);
}
//create chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'gasverbrauch',
},
subtitle: {
text: '[Kubikmeter pro Tag]'
},
rangeSelector: {
buttons: [{
type: 'month',
count: 3,
text: '3M'},
{
type: 'month',
count: 6,
text: '6M'},
{
type: 'year',
count: 1,
text: '1J'},
{
type:...