I recently implemented a feature where users can input data to populate a Google graph directly on the same page.
For reference, you can view the page image here: https://ibb.co/fAm7BQ
Below is the HTML code snippet:
<form method="post">
<label>CUF PERFORMANCE</label>    
<select id="select" name="options">
<option>Select The Value</option>
<option id="hourly" value="a">Hourly</option>
<option id="daily" value="b">Daily</option>
<option id="monthly" value="c">Monthly</option>
<option id="yearly" value="d">Yearly</option>
</select><br/><br/>
<label id="from" style="display:none;">Enter starting Date and Time</label>
<input id="dateInputone" name="dateipone" type="datetime-local" step="600" onblur="validate_time(this.value)" style="display:none;">
<label id="to" style="display:none;">Enter Ending Date and Time</label>
<input id="dateInputtwo" name="dateiptwo" type="datetime-local" step="600" style="display:none;">
<br/><br/>
<label for="Inverter">Inverter</label>
<select name="ino">
<option>Select The Value</option>
<option value="1">Inverter 1</option>
<option value="2">Inverter 2 </option>
<option value="3">Inverter 3</option>
<option value="4">Inverter 4</option>
<option value="5">Inverter 5</option>
<option value="6">Inverter 6</option>
</select><br/><br/>
<input type="submit" value="submit" onclick="myFunction()">
Here's my script code for integrating Google Charts:
google.charts.load('current', {
'packages': ['line', 'bar', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var arr1 = <?php echo json_encode($narray) ?>;
var dataArray = [];
for (i = 0; i < arr1.length; i++) {
var implicitArray = [];
implicitArray.push(arr1[i].timestamp);
implicitArray.push(arr1[i].sum);
implicitArray.push(arr1[i].sum / (6 * 72 * 245));
dataArray.push(implicitArray);
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Days');
data.addColumn('number', "Grid Power Total");
data.addColumn('number', "CUF");
data.addRows(dataArray);
var linematerialOptions = {
chart: {
title: 'CUF CALCULATION'
},
width: 400,
height: 400,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'CUF'
},
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
CUF: {
label: 'CUF'
}
}
}
};
var linechart = new google.charts.Line(document.getElementById('chart_div'));
linechart.draw(data, linematerialOptions);
var barmaterialOptions = {
width: 400,
height: 400,
series: {
0: {
axis: 'CUF'
},
1: {
axis: 'Gridpowertotal'
}
},
axes: {
y: {
CUF: {
label: 'CUF'
},
Gridpowertotal: {
side: 'right',
label: 'Grid Power Total'
}
}
}
};
alert(barmaterialOptions);
var barchart = new google.visualization.BarChart(document.getElementById('chartdiv'));
barchart.draw(data, google.charts.Bar.convertOptions(barmaterialOptions));
}
If you'd like to see how the user input triggers immediate changes in the displayed graph, check out this link: https://ibb.co/cbytkk