update flot chart with new data from ajax

Question

I have the following output from php which I am getting from using ajax.

AVAILABILITY: "99.26"
BEARER: "3G"
SUM(UNAVAILABILITY_D): "11458800"
SUM(UNAVAILABILITY_N): "84353"
TIMESTAMP: "2015-12-08 14:00"
VENDOR: "Hua"
VF_REGION: "South"

Array contains 4325. I am trying to sum UNAVAILABILITY_D and UNAVAILABILITY_N and group them by TIMESTAMP. TIMESTAMP is always hourly.

My first function I loop array and convert date to seconds and within each timestamp array I sum up UNAVAILABILITY_D and UNAVAILABILITY_N.

function loopInitial(data){
    console.log(data);
    var n = 0;
    var d = 0;
    for(i=0;i<data.length;i++){
        //sevenDays_object[data[i].TIMESTAMP] = ( typeof sevenDays_object[data[i].TIMESTAMP] != 'undefined' && sevenDays_object[data[i].TIMESTAMP] instanceof Array ) ? sevenDays_object[data[i].TIMESTAMP] : []
        //sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_N'] = ( typeof sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_N'] != 'undefined' && sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_N'] instanceof Array ) ? sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_N'] : []
        //sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_D'] = ( typeof sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_D'] != 'undefined' && sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_D'] instanceof Array ) ? sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_D'] : []
        //sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_N'] += data[i]['SUM(UNAVAILABILITY_N)'];
        //sevenDays_object[data[i].TIMESTAMP]['UNAVAILABILITY_D'] += data[i]['SUM(UNAVAILABILITY_D)'];

        var to_seconds = new Date(data[i].TIMESTAMP).getTime() / 1000; // convert date to seconds as string is not sortable in object.
        if( typeof sevenDays_object[to_seconds] == 'undefined' && !(sevenDays_object[to_seconds] instanceof Array) ) { sevenDays_object[to_seconds] = []; }     
        if( typeof sevenDays_object[to_seconds]['UNAVAILABILITY_N'] == 'undefined' && !(sevenDays_object[to_seconds]['UNAVAILABILITY_N'] instanceof Array) ) { sevenDays_object[to_seconds]['UNAVAILABILITY_N'] = [] ;}
        if( typeof sevenDays_object[to_seconds]['UNAVAILABILITY_D'] == 'undefined' && !(sevenDays_object[to_seconds]['UNAVAILABILITY_D'] instanceof Array) ) {sevenDays_object[to_seconds]['UNAVAILABILITY_D'] = []; }
        sevenDays_object[to_seconds]['UNAVAILABILITY_N'] = +sevenDays_object[to_seconds]['UNAVAILABILITY_N'] + +data[i]['SUM(UNAVAILABILITY_N)'];
        sevenDays_object[to_seconds]['UNAVAILABILITY_D'] = +sevenDays_object[to_seconds]['UNAVAILABILITY_N'] + +data[i]['SUM(UNAVAILABILITY_D)'];
    }
    //console.log(sevenDays_object);
    //console.log(sevenDays_object);
    return sevenDays_object;
}

I then loop this object to get the correct calculation and create object for flot graph.

function calculateAvailability(data){
    //console.log(data);
    var arr = [];
    for (property in data){
        console.log( property ); 
        console.log( data[property] );
        //var d = new Date(property);
        //console.log(d);
        //var s = d.getTime() / 1000;
        //var availability = (Math.round( ( (1 - data[property]['UNAVAILABILITY_N'] / data[property]['UNAVAILABILITY_D'])  * 100) * 100)) / 100;
        var availability = Math.round( ((1 - data[property]['UNAVAILABILITY_N'] / data[property]['UNAVAILABILITY_D']) * 100) *100 ) /100;
        //if(property == 1450069200){
            console.log("availability = " + availability);
        //}
        arr.push({0 : property ,1: availability });
    }

    //for(i=0;i<arr.length;i++){
        //console.log(arr[i]);
        //arr[data[i]] = ( typeof arr[data[i]] != 'undefined' && arr[data[i]] instanceof Array ) ? data[i] : []
        //arr[i] = ( typeof arr[i] != 'undefined' && arr[i] instanceof Array ) ? i : []
    //}
    //console.log( "2015/12/11 07:00" + " = " + new Date("2015/12/11 07:00").getTime() / 1000 );
    var y = new Date( 1449817200 * 1000);
    //console.log( y );
    var x = new Date( 1449208800000 * 1000);
    console.log( x );
    console.log( x.getFullYear() );
     ///plot.setData(arr);
     //plot.setupGrid();
     //plot.draw();
    //console.log(arr);

    return arr;
}

Problem I have now is the date conversion don't seem to be correct. Below is the calculation data that i have worked out

[1449572400,0.68]
[1449576000,29.54]
[1449579600,92.78]
[1449583200,92.96]
[1449586800,66.82]
[1449590400,91.9]
[1449594000,65.98]
[1449597600,68.78]
[1449601200,51.75]
[1449604800,2.47]
[1449608400,91.25]
[1449612000,1.5]
[1449615600,39.19]
[1449619200,72.43]
[1449622800,0.8]
[1449626400,46.81]
[1449630000,68.37]
[1449633600,79.43]
[1449637200,67.18]
[1449640800,2.43]
[1449644400,2.4]
[1449648000,0.6]
[1449651600,0.24]
[1449655200,0.22]
[1449658800,70.17]
[1449662400,57.82]
[1449666000,62.86]
[1449669600,72.58]
[1449673200,0.25]
[1449676800,94.16]
[1449680400,62.4]
[1449684000,2.51]
[1449687600,40.69]
[1449691200,91.54]
[1449694800,2.49]
[1449698400,90.85]
[1449702000,0.92]
[1449705600,41.44]
[1449709200,1]
[1449712800,70.08]
[1449716400,36]
[1449720000,37.89]
[1449723600,0.63]
[1449727200,0.83]
[1449730800,0.65]
[1449734400,74.95]
[1449738000,0.62]
[1449741600,0.43]
[1449745200,0.2]
[1449748800,0.1]
[1449752400,61.95]
[1449756000,71.94]
[1449759600,73.07]
[1449763200,74.87]
[1449766800,32.19]
[1449770400,78.38]
[1449774000,67.64]
[1449777600,88.73]
[1449781200,65.47]
[1449784800,76.68]
[1449788400,35.89]
[1449792000,91.54]
[1449795600,0.61]
[1449799200,90.14]
[1449802800,96.4]
[1449806400,0.62]
[1449810000,0.31]
[1449813600,0.31]
[1449817200,0.31]
[1449820800,1.82]
[1449824400,0.44]
[1449828000,82.85]
[1449831600,39.28]
[1449835200,87.17]
[1449838800,0.21]
[1449842400,59.39]
[1449846000,73.77]
[1449849600,74.69]
[1449853200,63.96]
[1449856800,68.37]
[1449860400,80.92]
[1449864000,94.81]
[1449867600,0.46]
[1449871200,24.99]
[1449874800,0.26]
[1449878400,91.72]
[1449882000,73.82]
[1449885600,70.85]
[1449889200,0.72]
[1449892800,90.59]
[1449896400,2.4]
[1449900000,68.8]
[1449903600,0.37]
[1449907200,41.86]
[1449910800,33.88]
[1449914400,78.3]
[1449918000,1.83]
[1449921600,0.53]
[1449925200,75.03]
[1449928800,35]
[1449932400,0.69]
[1449936000,81.65]
[1449939600,74.92]
[1449943200,82.76]
[1449946800,81.99]
[1449950400,80.27]
[1449954000,0.77]
[1449957600,94.3]
[1449961200,71.93]
[1449964800,75.23]
[1449968400,82.99]
[1449972000,0.42]
[1449975600,2.72]
[1449979200,80.1]
[1449982800,46.92]
[1449986400,0.83]
[1449990000,92.25]
[1449993600,0.38]
[1449997200,69.46]
[1450000800,0.32]
[1450004400,81.72]
[1450008000,38]
[1450011600,81.18]
[1450015200,38.18]
[1450018800,91.65]
[1450022400,93.11]
[1450026000,82.31]
[1450029600,0.43]
[1450033200,84.57]
[1450036800,92.72]
[1450040400,71.68]
[1450044000,2.87]
[1450047600,94.17]
[1450051200,0.42]
[1450054800,82.32]
[1450058400,0.82]
[1450062000,84.66]
[1450065600,0.41]
[1450069200,76.55]
[1450072800,74.01]
[1450076400,84.95]

After I removed the / 1000 on date calculations to seconds the date works however now I can notice the ordering is not correct.

[1449583200000,92.96],
[1449597600000,68.78],
[1449576000000,29.54],
[1449669600000,72.58],
[1449604800000,2.47],
[1449572400000,0.68],
[1449687600000,40.69],
[1449655200000,0.22],
[1449619200000,72.43],
[1449586800000,66.82],
[1449601200000,51.75],
[1449622800000,0.8],
[1449608400000,91.25],
[1449633600000,79.43],
[1449698400000,90.85],
[1449579600000,92.78],
[1449612000000,1.5],
[1449590400000,91.9],
[1449594000000,65.98],
[1449615600000,39.19],
[1449662400000,57.82],
[1449716400000,36],
[1449723600000,0.63],
[1449694800000,2.49],
[1449658800000,70.17],
[1449702000000,0.92],
[1449673200000,0.25],
[1449648000000,0.6],
[1449630000000,68.37],
[1449637200000,67.18],
[1449640800000,2.43],
[1449712800000,70.08],
[1449810000000,0.31],
[1449644400000,2.4],
[1449813600000,0.31],
[1449806400000,0.62],
[1449748800000,0.1],
[1449756000000,71.94],
[1449738000000,0.62],
[1449781200000,65.47],
[1449795600000,0.61],
[1449763200000,74.87],
[1449799200000,90.14],
[1449709200000,1],
[1449727200000,0.83],
[1449626400000,46.81],
[1449741600000,0.43],
[1449766800000,32.19],
[1449730800000,0.65],
[1449676800000,94.16],
[1449680400000,62.4],
[1449774000000,67.64],
[1449684000000,2.51],
[1449745200000,0.2],
[1449734400000,74.95],
[1449867600000,0.46],
[1449838800000,0.21],
[1449720000000,37.89],
[1449824400000,0.44],
[1449666000000,62.86],
[1449820800000,1.82],
[1449846000000,73.77],
[1449752400000,61.95],
[1449885600000,70.85],
[1449705600000,41.44],
[1449849600000,74.69],
[1449860400000,80.92],
[1449946800000,81.99],
[1449828000000,82.85],
[1449943200000,82.76],
[1449900000000,68.8],
[1449802800000,96.4],
[1449889200000,0.72],
[1449896400000,2.4],
[1449882000000,73.82],
[1449864000000,94.81],
[1449831600000,39.28],
[1449835200000,87.17],
[1449759600000,73.07],
[1449990000000,92.25],
[1450004400000,81.72],
[1450008000000,38],
[1449878400000,91.72],
[1450011600000,81.18],
[1449792000000,91.54],
[1449925200000,75.03],
[1449993600000,0.38],
[1449997200000,69.46],
[1449972000000,0.42],
[1449871200000,24.99],
[1449856800000,68.37],
[1449975600000,2.72],
[1449853200000,63.96],
[1449928800000,35],
[1449777600000,88.73],
[1449986400000,0.83],
[1449918000000,1.83],
[1449910800000,33.88],
[1449914400000,78.3],
[1449842400000,59.39],
[1449982800000,46.92],
[1449979200000,80.1],
[1449921600000,0.53],
[1449950400000,80.27],
[1449964800000,75.23],
[1450022400000,93.11],
[1450033200000,84.57],
[1449784800000,76.68],
[1449788400000,35.89],
[1449770400000,78.38],
[1449892800000,90.59],
[1449903600000,0.37],
[1449907200000,41.86],
[1449961200000,71.93],
[1450026000000,82.31],
[1449874800000,0.26],
[1449932400000,0.69],
[1450036800000,92.72],
[1450040400000,71.68],
[1450047600000,94.17],
[1449968400000,82.99],
[1450051200000,0.42],
[1450018800000,91.65],
[1450029600000,0.43],
[1450058400000,0.82],
[1449957600000,94.3],
[1449936000000,81.65],
[1450000800000,0.32],
[1450044000000,2.87],
[1450015200000,38.18],
[1449939600000,74.92],
[1450069200000,76.55],
[1450062000000,84.66],
[1450065600000,0.41],
[1450076400000,84.95],
[1449954000000,0.77],
[1450054800000,82.32],
[1449651600000,0.24],
[1449691200000,91.54],
[1449817200000,0.31],
[1450072800000,74.01],

UPDATE

I have fixed the ordering in php side. I have solved flot plotting with correct day and month showing on x-axis

var to_seconds = moment(data[i].TIMESTAMP, 'YYYY-MM-DD hh:mm A').unix() * 1000;

Problem I have now is if i convert to_seconds back to date time format, the month and day are correct but not the year.

I am not entirely sure what you' re asking. Both 1449208800000 and 1449817200 convert to the correct date. To which date do you expect them to convert? One strange thing in your code is you using`new Date(property+":00")`. Shouldn't that be `new Date(data[property]+":00")`? — Klaassiek, Dec 14 '15 at 00:15
UPDATE: I would change the line `var s = d.getTime() / 1000;` to just `var s = property / 1000` and before `setData` first sort the array by property value. — Klaassiek, Dec 14 '15 at 01:09
On second thought, I think your first problem is that you have a date string from php in format YYYY/MM/DD HH:MM and you want to pass that to Javascript. That doesn't work. Read http://www.w3schools.com/js/js_date_formats.asp. You will find that you have a mix between using the Javascript Short Date format (YYYY/MM/DD) and the ISO format (YYYY-MM-DDTHH:MM:SS). It is best to convert the input in php to give you (milli)seconds to start with. Or if you don't have access to the input, try converting the date string to the ISO format by replacing / with -. — Klaassiek, Dec 14 '15 at 09:09
@user2288476 it is an oracle query which i have changed the select to `TO_CHAR (TIMESTAMP, 'yyyy-mm-dd HH24:mi') TIMESTAMP` as you have suggested.The `property` is a string value of datetime, does it not need it to be converted to secs first? — shorif2000, Dec 14 '15 at 09:15
Your question (and your code) is all over the place. Try to reduce it to the actual problem. The principal code works fine (see this [fiddle](https://jsfiddle.net/e3mka76n/)). And don't use objects instead of arrays when the order of the parts is important, [order of properties in objects is not guaranteed](http://stackoverflow.com/a/5525820/2610249). — Raidri supports Monica, Dec 14 '15 at 09:58
(The timestamps in your calculation data have to be multiplied by 1000.) Also, check your min / max values on the y axis for the chart, the new values are outside of the range you posted in your original question. Use [array.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) to sort your data. — Raidri supports Monica, Dec 14 '15 at 10:39
in loop initial I have done `sevenDays_object.sort()`, not working for me. updated min/max values. removed `ticksize` on `x-axis` — shorif2000, Dec 14 '15 at 10:48
`sort()` doesn't work on objects, only arrays. And if the parts are not simple data types (string, number ...) you need to use the compare function. — Raidri supports Monica, Dec 14 '15 at 10:51
@ bonez Yes it has to be converted to seconds. That's why you need the right string format for Javscript to convert it to seconds. I would so that in php. Also because using Javascript's Date function might change the date according to locale of the browser.But I think you figured that part out already. — Klaassiek, Dec 15 '15 at 12:36
@user2288476 I managed to convert to ms for flot graph by `*1000`, however if you convert this value to string format it shows year is 4xxxxx and not 2015. how do i solve this? — shorif2000, Dec 15 '15 at 22:14

update flot chart with new data from ajax

0 Answers0