Below is the code snippet for an AJAX request to retrieve data and then call a function to pass the data to a graph.
function getGraphs(){
$.ajax({
type : "POST",
async: true,
url : "<?php echo base_url(); ?>" + "Graphs/get_graphs",
dataType: 'json',
data :{hotel_name_realm:$("#hotel_names").val()},
success : function(res){
obj = JSON.parse(res);
plot_graph(obj);
// console.log(obj.upload);
}
});
}
The Highchart graph plotting function is shown below. The AJAX success function calls this function passing data. The data object can be accessed as ss.download and ss.upload, but the loaded graph does not display the data properly.
function plot_graph(ss){
Highcharts.chart('container', {
chart: {
type: 'spline',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Wind speed during two days',
align: 'left'
},
subtitle: {
text: '13th & 14th of February, 2018 at two locations in Vik i Sogn, Norway',
align: 'left'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 60000, // one hour
pointStart: Date.UTC(2019, 4, 9, 14, 35, 0)
}
},
series: [{
name: 'Download',
data: [
ss.download
]
}, {
name: 'Upload',
data: [
ss.upload
]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
}