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

Question

I want to get the result from a JsonRPC call to a PHP server per JavaScript for further usage (drawing chart with Chart.js). For this I have a function which should do the call and return the result. I use this jQuery plugin: https://github.com/datagraph/jquery-jsonrpc

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

var res; // first place
function getMyStuff() {
    var res; // second place as alternative
    $.jsonRPC.request('getResultsById', {
        params: [1],
        success: function(result) {
            alert(JSON.stringify(result, null, 4)); // works well
            res = result;
        },
        error: function(result) {
            alert("error: " + JSON.stringify(result, null, 4));
        }
    });
    return res;
}

My problem is that I don't know how to get the result out of the success block. If I call the function I always get undefined.

Sorry, but what is your question exactly? Are you simply trying to have the function return the results in json format? — Leo Galleguillos, Feb 01 '15 at 01:35
Yes, that's what I want. I spent a day trying to get this to work but I think I'm a big noob in JavaScript ... So maybe pointing me to the right direction would be enough. It's probably damn easy but I didn't find anything comparable. — su-ex, Feb 01 '15 at 01:57
You get and undefined result because the request is asynchronous so when you are returning the result, the request has not yet returned. You should use promises or callbacks so when the success function is called, the callback is called with the result. — satchcoder, Feb 01 '15 at 17:39
Yes, thank you. I have already tried with callbacks but that wasn't successful. I'll try again. Maybe I'm not clear enough. I want to create a chart with Chart.js filled with data gotten per JsonRPC on page load but so that I can still add data later. I'll update my question when I come home later so that the context is clearer. — su-ex, Feb 01 '15 at 18:14

score 0 · Accepted Answer · answered Feb 01 '15 at 18:21

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);
        }
    });
}

Thank you, that did the trick. I had something similar before but I didn't figure out how to do something with it. — su-ex, Feb 01 '15 at 23:03

su-ex · Answer 2 · 2015-02-01T23:25:02.483

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");
});

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

2 Answers2