View the graph from an Export Block Descriptor in viewON

Ewon Support Software
#1

This is the second example in a series of posts about using Export Block Descriptors in viewON projects. To view the other examples as well as helpful resources, return to the main post.

Example 2 - Inline Graph

image
Export Block Descriptors in viewON aren’t just limited to downloading files. They can also be used to modify the viewON page itself. In this example, a user can view a graph of a tag by specifying a tag name and, optionally, the number of hours beforehand to begin graphing. The graph replaces the placeholder light bulb, while the EBD string that is constructed will appear below for reference.

//Retrieve the values of the hours prior and tag name text boxes
var hoursPrior = $("#UID_1645039525093").val();
var tagName = $("#UID_1645039525096").val();

if (tagName == "") alert("Graphs require a valid tag name.");
else {
     //Set up the parts of the query that don't change or are required
     var query = "$dtHL$ftG$tn" + tagName;

     //If an integer value was inserted into hours prior, use it
     if (Number.isInteger(parseInt(hoursPrior))) query+= "$st_h" + hoursPrior;

     //Construct the URL that will actually be used to send the EBD request
     var url = "http://192.168.120.53/rcgi.bin/ParamForm?AST_Param=" + query;

     //Replace the image contents with the new graph, and the text with the EBD string used
     $("#UID_1645039525102").attr("href", url);
     $("#UID_1645039525101").html(query);
}

Once again, let’s break down what this code does:

  • The first statements just use the IDs of the text boxes to grab their contents
  • The if statement that follows checks if the tagName variable is empty, and if so, we use the alert function to notify the user that they must input a tag name
    • If it is empty, the alert is the only thing that happens
    • If not, the code in the else block runs
  • We start building the EBD with the parts that won’t change and the required tag name
  • After that, we have another statement that checks if the input has the right form
    • parseInt converts the hoursPrior string into an integer
    • If the text can’t be converted into an integer, it will have the value NaN (not a number)
    • Number.isInteger reports false for a value of NaN, and true if we have a valid integer for hoursPrior. If we do, we can add that parameter to our EBD
  • .attr(“href”, url) changes the source of the image, replacing the placeholder with our graph
  • .html(query) changes the text element to our EBD like before
#2