The graph below may take up to 30 seconds to load.
It shows overlapped hot water use for a number of months for a number of systems. The data has yet to be sanitised and totalled, but has been release for interim discussion. Data is also not adjusted yet for BST time, so some times are 1 hour later than they should be (i.e. no good for analysis).
On the graph you can zoom in by dragging mouse to form a region on the graph. The resolution is to 1 second so it is possible to see individual events as they happen and see the coincidence (in blue).
function tttt(ut) { if (ut > 86400000) { ut = 86400000; } var today = new Date(ut); var dd = today.getDay(); var hours = today.getHours(); var minutes = today.getMinutes(); var seconds = today.getSeconds(); var year = today.getFullYear(); var month = (today.getMonth()+1); var day = today.getDate(); if (month < 10) {month = "0"+month;} if (day < 10) {day = "0"+day;} if (hours < 10) {hours = "0"+hours;} if (minutes < 10) {minutes = "0"+minutes;} if (seconds < 10) {seconds = "0"+seconds;} var thetime = hours + ":" + minutes + ":" + seconds; var tm = year + "-" + month + "-" + day + " " + thetime; return tm; } var vn = "public_overlay.csv"; Plotly.d3.csv('https://www.heatweb.co.uk/w/images/8/87/Public_overlay.csv', function(rows){ var trace1 = { mode: 'lines', // connect points with lines name: 'DHW Flow Rate [ltr/m]', x: rows.map(function(row){ // set the x-data var ut = 1000 * row['time[unix_sec]']; var tm = tttt(ut); return tm; }), y: rows.map(function(row){ // set the x-data return row['fC[lpm]']; //time[unix_sec],fC[lpm],tCo[C],tH[C],tHoDHW[C] }), fill: 'tozeroy', line: { // set the width of the line. color: 'rgb(0, 180, 0)', width: 1, shape: "hv" } }; var trace2 = { mode: 'lines', // connect points with lines name: 'Power [kW]', x: rows.map(function(row){ // set the x-data var ut = 1000 * row['time[unix_sec]']; var tm = tttt(ut); return tm; }), y: rows.map(function(row){ // set the x-data return row['kwC[kW]']; //time[unix_sec],fC[lpm],tCo[C],tH[C],tHoDHW[C] }), line: { // set the width of the line. color: 'rgb(255, 100, 0)', width: 1, shape: "hv" } }; var trace3 = { mode: 'lines', // connect points with lines name: 'count', x: rows.map(function(row){ // set the x-data var ut = 1000 * row['time[unix_sec]']; var tm = tttt(ut); return tm; }), y: rows.map(function(row){ // set the x-data return row['count']; //time[unix_sec],fC[lpm],tCo[C],tH[C],tHoDHW[C] }), line: { // set the width of the line. color: 'rgb(0, 100, 255)', width: 1, shape: "hv" } }; var trace4 = { mode: 'lines', // connect points with lines name: 'Primary Flow Rate [ltr/m]', x: rows.map(function(row){ // set the x-data var ut = 1000 * row['time[unix_sec]']; var tm = tttt(ut); return tm; }), y: rows.map(function(row){ // set the x-data return row['fH[lpm]']; //time[unix_sec],fC[lpm],tCo[C],tH[C],tHoDHW[C] }), fill: 'tozeroy', line: { // set the width of the line. color: 'rgb(255, 100, 255)', width: 1, shape: "hv" } }; var layout = { yaxis: {title: "DHW Load"}, // set the y axis title xaxis: { showgrid: true // remove the x-axis grid lines }, margin: { // update the left, bottom, right, top margin l: 40, b: 40, r: 20, t: 20 }, legend: {"orientation": "h"} }; var data = [trace2,trace1,trace3]; Plotly.plot(document.getElementById('wind-speed'), data, layout, {showLink: false}); });