Drawing chart with Chart.js filled with data gotten per JsonRPC

by

0👍

✅

The request is handled asynchronously, and thus you need to provide a callback, as you’re already doing in the ‘success’, and ‘error’ blocks. Probably the easiest way is just to provide yet another callback to be called with the result, like so:

$.jsonRPC.setup({
    endPoint: '/jsonserver.php'
});

getMyStuff(function (result) {
    console.log("here's the result", result);
});

function getMyStuff(callback) {
    $.jsonRPC.request('getResultsById', {
        params: [1],
        success: callback,
        error: function(result) {
            console.error("error:", result);
        }
    });
}

👍:0

Thank you all for your hints.
For everybody running into the same problem – my working code sample:

$.jsonRPC.setup({
    endPoint: '/jsonserver.php'
});

drawMyChart(function (result) {
    var ctx = document.getElementById("canvas").getContext("2d");
    var lineChartData = {
        labels: makeSuitableArrayLabel(result),
        datasets : [
            {
                fillColor : "#F06292",
                data: makeSuitableArrayFirst(result)
            },
            {
                fillColor : "#1565C0",
                data: makeSuitableArraySecond(result)
            }
        ]
    };

    window.myLine = new Chart(ctx).Line(lineChartData, {
        // options
    });
});

function drawMyChart(callback) {
    $.jsonRPC.request('getResultsById', {
        params: [1],
        success: callback,
        error: function(result) {
            console.error("error:", result);
        }
    });
}

// add
$("#add").click(function() {
    myLine.addData([1, 2], "label");
});

Leave a comment