The statuses of High Voltage and Low Voltage modules are stored in the offline database. The server runs a script every hour that makes the query to that offline database. The query calculates all the modules that are turned off and uses it to calculate the modules that are turned on. Then it stores it in the .json file. This file contains the number of modules that were turned on/off and their respective time.

https://test-stripdbmonitor.web.cern.ch/test-stripdbmonitor/DCSTrend/ plots the data with +24hours delay.

Setup

The webpage uses a Google API("Jquery") to plot the data. The required files are the .json files, index.html, and the Jquery library under the "flot" folder. Any browser besides Google Chrome is advisable. Google Chrome is strict when it comes to the use of Jquery through the local system.

Code Fixes

function onDataRecieved(series) {
   if(!alreadyFetched[series.label]){
<span style="white-space: pre;">      </span>alreadyFetched[series.label] = true;
<span style="white-space: pre;">      </span>data.push(series);
<span style="white-space: pre;">      </span>...
<span style="white-space: pre;">   </span>}
}

$ajax{
<span style="white-space: pre;">   </span>url: dataurlRun, //dataurlRun = "oneMonth_run.js"
        method: 'GET',
        dataType: 'json',
        success: onDataReceived
});

The code above was part of the original index.html The "onDataReceived" function is a success function called upon an AJAX request. The url in the above code is the url of the .json file. The success function opens the file, extracts the data, and pushes it into a data array. The data array gets plotted with no delay of 24hours.

First fix:

</span><span style="font-size: 12.800000190734863px;">    function onDataReceived(series) {
        if (!alreadyFetched[series.label]) {
            alreadyFetched[series.label] = true;
            var addition = (series.data[series.data.length-1][0]) + 86400000;
            var addition1 = (series.data[series.data.length-1][0]);
            series.data.push([addition1, 0]);
            series.data.push([addition, 0]);
            data.push(series);
            .....
   }
   .......
</span><span style="font-size: 12.800000190734863px;">     }</span>

The code gets the last data and adds 24hours to it and plots the data

Final fix

<span style="font-size: x-small;">    var dd = 0;
   
    $.ajax({
        url: dataHV, //oneMonth_HV.js
        async: false,
        method: 'POST',
        dataType: 'json',
        success: setX
    });
   
    function setX(series) {
        dd = (series.data[series.data.length-1][0]) + 86400000;
    }
   
    var options = {
        lines: { show: true },
        points: { show: true },
        grid: { hoverable: true, clickable: true },
        xaxis: { mode: "time", max: dd}, // , timeformat: "%y/%m/%d" },
        yaxis: { min: 0, max: 28000 },
        selection: { mode: "x" }
    };</span>

The "options" variable sets the scale for the plot in the beginning of the script. So before the variable is initialized, a new ajax request is made. This request opens one of the files and stores the last value + 24hours into the variable. The variable is used to set the scale.

-- HimalSherchan - 11-Oct-2012</verbatim>