Extracting data from a JSON file and using a JavaScript script to visualize it through a graph.
JSON file link:
https://i.sstatic.net/1gqov.png
The JavaScript code responsible for drawing the graph is as follows:
$(document).ready(function(){
google.charts.load('current', {'packages': ['corechart']});
//alert('aa00'~
$('.error').hide();
$(".buttonSala").click(function() {
// validate and process form here
$('.error').hide();
var canal = $("#canalSala option:selected").val();
var datai = $("#datainisala").val();
var dataf = $("#datafimsala").val();
//alert(canal);
// Send the data using post
var posting = $.post( "getTop.php", { canal: canal, dataini: datai, datafim: dataf } );
// Put the results in a div
posting.done(
function(data) {
// Set a callback to run when the Google Visualization API is loaded.
var jsonData = JSON.parse(data).channels[canal].values;
google.charts.setOnLoadCallback(function() {
var dataArray = [["ts", 'values']];
for (var i = 0; i < jsonData.length; i++) {
var tempArray = [jsonData[i].ts, parseFloat(jsonData[i].value.replace(",", "."))];
dataArray.push(tempArray);
}
// Create our data table out of JSON data loaded from server.
var data = google.visualization.arrayToDataTable(
dataArray
);
var options = {
hAxis: {title: "Date/Time", titleTextStyle: {color: "#333"}},
vAxis: {title: "Temperature", titleTextStyle: {color: "#333"}}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('chart_divsala'));
chart.draw(data, options);
});
});
return false;
});
});
The correct visualization of the graph can be seen in the following link:
https://i.sstatic.net/NgJZu.jpg
Regarding this segment of the code:
var dataArray = [['ts', 'values']];
The timestamp data is used to generate the X-axis values while the "Values" label represents the Y-axis. How can I access the "chname" property from the JSON to display the relevant information on the graph, like "oxygen (%) inside wooden pipe 4"?
I've attempted various methods but have yet to achieve the desired outcome...