What are some methods for extracting a value from a separate webpage and saving it as a variable in my code?

Question

What are some methods for extracting a value from a separate webpage and saving it as a variable in my code?

I am utilizing graphite to obtain statistics and would like to display a justgage gauge for a specific variable. Graphite provides values in either JSON format:

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

or raw:

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

This is the complete line of data returned based on whether you select json or raw output. The URL is structured like

http://<graphite server>/render?target=snmp.ssbSubstation.realEnergy.1&format=raw&from=-1min

In either case, my goal is to extract 4511552439.0, assign it as the value for the gauge, and render it in an HTML panel within Grafana. Is there a straightforward method to accomplish this?

javascript graphite justgage grafana

Answer 1

Answer №1

If you're looking to make an Ajax request using JSONP, take a look at the example provided below for some guidance on how to start building your app.

To see a demonstration of the same concept, check out this jsFiddle here.

It's worth noting that there may be room for improvement in terms of data access. While the two-dimensional access might seem unconventional, it does get the job done.

I made use of mocky.io to replicate your data in this example.

// 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'; // demo source from mocky.io

    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>

Answer 2

If you're looking to make an Ajax request using JSONP, take a look at the example provided below for some guidance on how to start building your app.

To see a demonstration of the same concept, check out this jsFiddle here.

It's worth noting that there may be room for improvement in terms of data access. While the two-dimensional access might seem unconventional, it does get the job done.

I made use of mocky.io to replicate your data in this example.

// 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'; // demo source from mocky.io

    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>

What are some methods for extracting a value from a separate webpage and saving it as a variable in my code?

Answer №1

Similar questions

Error encountered with MobileFirst version 8 and Angular JS v1.5.3 integration using Bootstrap

Unable to set the height for ul/div elements

What could be causing the pause function for videos to stop working in Chrome?

Unlocking the power of module augmentation in Typescript: Enhancing library models within your app domain

Having trouble with one of the stubs not working while unit testing with ava and sinon for an API call

Click on the entire Material-UI formControlLabel to select it, not just the text

Transferring information from a form without using specific authorization

The object function router(req, res, next) is encountering an error as it does not contain the required method for handling the request

Prevent Click Event in JQuery

updateOne is limited to updating a single field at a time and does not have the capability to generate new fields within

Showcase fullcalendar events that span across multiple rows and columns

Preserving the information from a webpage by utilizing casperjs for scraping and saving table data

What is the best method to consistently convert a deeply nested object into a tabular format that can be easily reversed

Using Flickity API in Vue 3 with Typescript Integration

Utilizing jQuery for asynchronous image uploading

Unveiling the secrets of leveraging Vue Router global navigation guard to efficiently verify multiple conditions

Ensure to verify the input's value by clicking the button

Reinitializing AngularJS form controls

What causes the order of `on` handler calls to be unpredictable in Angular?

Whenever there is a click event triggered within the map function, it will affect every element within the collection