I'm using jQuery to post and retrieve data from my controller (codeigniter). I've no problem with retrieving data. I want to use setInterval to update the morris data and make the morris data (JSON data) dynamic. The problem is when I use the setinterval to resend the update request to controller the graph disappear! I'm using the codeigniter output:
$this->output
->set_status_header(200)
->set_content_type('application/json', 'utf-8')
->set_output(json_encode($data1['query'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES))
->_display();
exit;
And this is the JavaScript code that I'm trying to use:
var json = (function () {
var json = null;
setInterval(function() {
$.post( "/login/DailyAverageWaitingtime", function( data ) {
json = data;
});
}, 5000);
return json;
})
();
Morris.Area({
element: 'DailyAverageWaitingtime',
padding: 10,
behaveLikeLine: true,
gridEnabled: false,
gridLineColor: '#dddddd',
axes: true,
fillOpacity:.7,
data:json.result_object,
lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
xkey: 'date',
ykeys:['records','waiting'],
labels: ['Records','Waiting'],
pointSize: 0,
lineWidth: 0,
hideHover: 'auto'
});
Finally I fixed the issue!
This is a temporary function to create the graph at first place:
function DailyAverageWaitingtime(){
var DailyAverageWaitingtime;
$.post( "/login/DailyAverageWaitingtime", function( data ) {
DailyAverageWaitingtime = Morris.Area({
element: 'DailyAverageWaitingtime',
data: data.result_object,
xkey: 'date',
ykeys: ['records', 'waiting'],
labels: ['Records', 'Waiting'],
pointSize: 2,
hideHover: 'auto',
resize: true
});
Interval to call the update function:
setInterval(function() { UpdateDailyAverageWaitingtime(DailyAverageWaitingtime); }, 20000);
}, "json");
}
And this is to update the data every X second:
function UpdateDailyAverageWaitingtime(DailyAverageWaitingtime){
$.post( "/login/DailyAverageWaitingtime", function( data ) {
DailyAverageWaitingtime.setData(data.result_object);
myRecords.setData(data.result_object);
});
}
var json = null;
setInterval(function() {
$.post( "/login/DailyAverageWaitingtime", function( data ) {
json = data;
});
}, 5000);
Morris.Area({
element: 'DailyAverageWaitingtime',
padding: 10,
behaveLikeLine: true,
gridEnabled: false,
gridLineColor: '#dddddd',
axes: true,
fillOpacity:.7,
data:json.result_object,
lineColors:['#ED5D5D','#D6D23A','#32D2C9'],
xkey: 'date',
ykeys:['records','waiting'],
labels: ['Records','Waiting'],
pointSize: 0,
lineWidth: 0,
hideHover: 'auto'
});
Use different name for the variable which is containing function