This chart was drawn using Google Charts. It is used as the basis of a datalogging project using a Raspberry Pi that will be posted soon. The code is shown below.
To change the data points, substitute the values in the last two columns. The axes will automatically change their ranges to suit.
To change the dates, simply change the year, month, day, hour, minute and seconds values. Be careful to make sure that the format is exactly as shown.
The dates, time and values shown in the example are read from a database by a php script at the server.
CODE:
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
<script type=”text/javascript”>
google.charts.load(‘current’, {‘packages’:[‘line’, ‘corechart’]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById(‘change-chart’);
var chartDiv = document.getElementById(‘chart_div’);
var data = new google.visualization.DataTable();
data.addColumn(‘datetime’, ‘Time-for Date hover over data point’);
data.addColumn(‘number’, “Temperature”);
data.addColumn(‘number’, “Humidity”);
data.addRows([
[new Date(2018, 11,31,23,50), -.5, 55],
[new Date(2018, 11,31,23,55), – .4, 87],
[new Date(2019, 0,1,0,0), -.5, 72],
[new Date(2019, 0,1,0,5), -2.9, 53],
[new Date(2019, 0,1,0,10), -3.3, 86],
[new Date(2019, 0,1,0,15), -.5, 55],
[new Date(2019, 0,1,0,20), .4, 87],
[new Date(2019, 0,1,0,25), .5, 62],
[new Date(2019, 0,1,0,30), -2.9, 53],
[new Date(2019, 0,1,0,35), -6.3, 86],
[new Date(2019, 0,1,0,40), -.5, 55],
[new Date(2019, 0,1,0,45), .4, 87],
[new Date(2019, 0,1,0,50), .5, 62],
[new Date(2019, 0,1,0,55), 2.9, 53],
[new Date(2019, 0,1,1,0), 6.3, 86],
[new Date(2019, 0,1,1,5), 5.5, 55],
[new Date(2019, 0,1,1,10), 6.4, 87],
[new Date(2019, 0,1,1,15), 6.5, 62],
[new Date(2019, 0,1,1,20), 2.9, 53],
[new Date(2019, 0,1,1,25), 2.3, 86],
[new Date(2019, 0,1,1,30), 9, 80],
[new Date(2019, 0,1,1,35), 10.6, 98],
[new Date(2019, 0,1,1,40), 10.3, 66],
[new Date(2019, 0,1,1,45), 7.4, 83],
[new Date(2019, 0,1,1,50), 4.4, 75],
[new Date(2019, 0,1,1,55), 1.1, 66],
[new Date(2019, 0,1,2,0), -.2, 45]
]);
var materialOptions = {
chart: {
title: ‘Typical Greenhouse Temperatures and Humidity’
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: ‘Temperature’},
1: {axis: ‘Humidity’}
},
axes: {
// Adds labels to each axis; they don’t have to match the axis names.
y: {
Temperature: {label: ‘Temperature (C)’},
Humidity: {label: ‘Humidity (%)’}
}
}
};
var classicOptions = {
title: ‘Typical Chart: Greenhouse Temperatures and Humidity’,
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: ‘Temperature (C)’},
1: {title: ‘Humidity (%)’}
},
vAxis: {
viewWindow: {
max: 100
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = ‘Change to Classic’;
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = ‘Change to Material’;
button.onclick = drawMaterialChart;
}
//default is material chart
drawMaterialChart();
}
</script>