User Tools

Site Tools


download-csv-js

This is an old revision of the document!


Example of graph data download with JS for dashbaord

The standard method of exporting data from graphs to XLS, HTML, CSV files has the resolution of the selected view on the respective graph, not all data - due to performance issues. Please refer to the API article on how to retrieve data with REST requests.

In the following example, dashboards' JS scripting option is presented.

const DATA = {
         TIME: {START: 7, END: 8},
         DOWNLOAD_BTN: 9,
         GRAPH_ID: 1,
         GRAPH_SELECTION_REG: 11
};
const MAX_SLICES = 2999;
const TIMEOUT = 5e3;
const START_GRAPH_ID = 1; 
const END_GRAPH_ID = 2; 
 
let _i;
let preventMultiply = false;
let dataToSend = {};
let promises = [];
 
App.on('register:newValue', triggerUponRegChange);
 
function triggerUponRegChange(newValuesArray) {
    let ifButtonPressed = newValuesArray.filter(readVal => 
                                                    parseInt(readVal.regId) === DATA.DOWNLOAD_BTN 
                                                    && parseInt(readVal.value) > 0).length > 0;
    if (ifButtonPressed && !preventMultiply) {
            let selectedGraph = new Register(DATA.GRAPH_SELECTION_REG).getValue();
            selectedGraph = parseInt(selectedGraph.replace(/^.*\((\d)\).*$/, (match, p1) => p1));
            DATA.GRAPH_ID = (selectedGraph >= START_GRAPH_ID && selectedGraph <= END_GRAPH_ID) ? selectedGraph : 1; 
 
            Promise.all(makeApiCall()).then(exportDataAsCSVToBrowser).catch(e => console.log(e));
    }
}
 
function getSlicesFromTS() {
    let paramsSet = [];
    calcSlices(parseInt(new Register(DATA.TIME.START).getValue()),
               parseInt(new Register(DATA.TIME.END).getValue()));
 
    function calcSlices(s, e)  {
        if (s > e) { 
            console.log('startTS >= endTS') ; return ;  
        }
        if (e - s <= MAX_SLICES)  
            paramsSet.push({start:s, end: e, slices: e - s + 1});
        else {
            let newEnd = s + MAX_SLICES - 1;
            paramsSet.push({start: s, end: newEnd, slices: MAX_SLICES});
            calcSlices(newEnd + 1, e);
        }
    }
    return paramsSet;
}
 
function makeApiCall() {
    let slicesParams = getSlicesFromTS();
    dataToSend = {};
    promises = [];
    preventMultiply = true;
    setTimeout(function(){clearTimeout(_i); preventMultiply = false;}, TIMEOUT);
 
    slicesParams.forEach(function(paramsSet, i) {
        let promise = new Promise(function(resolve, reject) {
            $.ajax({
                url: "/api/graph-data/" + DATA.GRAPH_ID,
                method: "GET",
                headers: {
                    "X-WH-START": paramsSet.start,
                    "X-WH-END": paramsSet.end,
                    "X-WH-SLICES": paramsSet.slices,
                    "X-WH-REGISTERS": DATA.GRAPH_ID
                },
                dataType: 'json',
                context: this,
                success: function (response) {
                    dataToSend[i] = response;
                    resolve();
                },
                error: function (result, text, error) {
                    reject(text);
                }
            });
        });
        promises.push(promise);
    });
 
    return promises;
}
 
function exportDataAsCSVToBrowser() {
    let response = [];
    Object.values(dataToSend).forEach(dataSet => {response = response.concat(dataSet)});
    if (response.length > 0) {
        let rep = [];
        let header = ['Time'];
        let regs = WebHMI.graphs[DATA.GRAPH_ID].regs;
        regs.forEach(function(reg) {
            let vv = reg.title.replace("\"", "\"\"");
            header.push('"' + vv + " - Min" + '"');
            header.push('"' + vv + " - Avg" + '"');
            header.push('"' + vv + " - Max" + '"');
        });
        rep.push(header);
        response.forEach(function(dataSet) {
            let row = [moment(dataSet.x).format("YYYY-MM-DD HH:mm:ss")];
            regs.forEach(reg => dataSet[reg.id].split(';').forEach(value => {row.push(value)}));
            rep.push(row);
        });
 
        if (window.navigator.msSaveBlob) { // IE
            let blobObject = new Blob([rep.join("\r\n")]);
            window.navigator.msSaveBlob(blobObject, WebHMI.graphs[DATA.GRAPH_ID].title + '.csv');
        } else {
            let a = document.createElement('a');
            a.href = 'data:attachment/csv,' + encodeURIComponent(rep.join("\r\n"));
            a.target = '_blank';
            a.download = WebHMI.graphs[DATA.GRAPH_ID].title + '.csv';
            a.style.visibility = "hidden";
            document.body.appendChild(a);
            a.click();
        }
    }
}
download-csv-js.1652182831.txt.gz ยท Last modified: 2022/05/10 11:40 by emozolyak

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki