How can I get a value from another webpage and store it as a variable?

I am using graphite to get stats and want to render a justgage gauge for a variable. Graphite can spit out values using either json:

[{"target": "snmp.ssbSubstation.realEnergy.1", "datapoints": [[4511552439.0, 1417540920]]}]

or raw:

snmp.ssbSubstation.realEnergy.1,1417540860,1417540920,60|4511552439.0

That's the entire one line of the source returned depending on if you specify either json or raw. The url is formatted like http://<graphite server>/render?target=snmp.ssbSubstation.realEnergy.1&format=raw&from=-1min

Either way, I'd like to grab 4511552439.0 and set it as the value for the gauge and render in in a html panel in grafana. Is there a very simple way to do this?

Solution

You can do this with an JSONP ajax request. Please have a look at the example below (as a starting point for your app).

You can find the same demo also as jsFiddle here.

Maybe the data access could be done better. The two dimensional access looks a bit strange but it works.

I've used mocky.io to simulate your data.

// data format [{"target": "snmp.ssbSubstation.realEnergy.1", "datapoints": [[4511552439.0, 1417540920]]}]

// http://www.mocky.io/v2/547df7d558eb49190856a759

(function ($) {
    var url = 'http://www.mocky.io/v2/547df7d558eb49190856a759'; // mocky.io demo source

    var jsonCallback = function (data) {
        var gauge = data[0].datapoints[0][0];
        console.log(gauge);
        
        $('#data').html(JSON.stringify(data, null, 2));
        $("</p>").text('value for gauge ' + gauge).appendTo('#data');
    };

    $.ajax({
        type: 'GET',
        url: url,
        contentType: "application/json",
        dataType: 'jsonp'
    }).done(jsonCallback)
    .fail(function (xhr) {
        alert("error" + xhr.responseText);
    });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id='data'></pre>