Incorporating a JavaScript Gauge in WebDev

unclepetecorner
This week’s Uncle Pete’s corner will be covering Incorporating a JavaScript Gauge in WebDev

One of my current projects involved producing “Dashboards”. The Webdev built-in graphing functions are pretty powerful. At some point we will have to move to a 3rd party graphing function for some really high end features but for most projects the out of the box graph functions are great.

The one thing missing is a gauge function, in WinDev we are able to do progress bars as gauges, but this doesn’t exist in WebDev, so I needed something to produce a gauge a quick Google search showed that there are plenty of JavaScript options out there. For our immediate needs I wanted, something simple to code, stand along, didn’t require jQuery and most important was free!

I decided to go with Justgage.com. It isn’t anything fancy but as you will see it is very easy to incorporate into your WebDev project.

So here is a screen shot of the end result.
2013-11-19_0725

So how do we incorporate this JavaScript into a WebDev Project. Naturally the first thing to do is download it from Justgage.com, then if you look at the site it gives you some quick getting started information shown below.

2013-11-21_1521

The downloaded zip file includes the two JavaScript libraries shown in the first two statements.  The easiest way to include those into our WebDev Page is via the Advanced tab of the Page Description for the page we are going to use the gauge on.

2013-11-21_1529

Notice that it stores the files in the projects web directory, so deploying the site will automatically deploy the JavaScript files as well. Also you may notice that there is an option to add a Web Resource, which means instead of using a local file, it uses an Internet URL to access the file. The upside to that is if the file gets updated at the source URL, you page gets those updates, the downside is that if those updates could break something for you, and if the source URL’s site is down your page is not going to execute correctly. So generally I always use local copies.

The next step is to add a DIV section where the gauge is going to be displayed. To do that we use an HTML control in WebDev.

2013-11-21_1536

Then in the general tab, you see we add the DIV tag. The size of the resulting guage is defined by the size of the HTML control.

2013-11-21_1538

Here is the way it looks at design time with the HTML control selected

2013-11-21_1540

Notice the “Response Rate” heading and the “Down from” subtitle are overlaid on the HTML control, I had to do some experimenting on the placement to get them to fit with the gauge.

Next I created a JavaScript browser function to actually create the gauge.

2013-11-21_1609

This is basically the same code from the getting started information, I just added a few additional parameters from the documentation, and created it as a function so we can pass in values to use. So no matter how many gauges I create, there is only one BuildGauge function, in fact you should notice this is a global procedure not a local procedure. I should mention I am by no means a JavaScript guy, but a little Googling and copy and paste I can get simple things done!

In the Initialization of the page I am using a class to access the database and calculate the response rate. The hows and whys of that calcuation really don’t matter for this article. The important thing to understand is that because I am accessing the database and a class it has to be done in server code. Here is that section of code
2013-11-21_1556

The problem is calling the JavaScript function has to be done via browser code. And if you have followed any of my WebDev articles you should know by now one of the tricks of communicating between server and browser is hidden entry fields, and this is no exception. CurrentResponseRate and ResponseRateColor are hidden entry fields

2013-11-21_1559

And finally the in the onload event we call the javascript function to build the gauge.

2013-11-21_1600

It is only one line of code, but there are a few key concepts to understand here. First notice that although the function is a JavaScript function we are able to call it directly from WebDev (technically WL) code. That is an incredible advantage! Remember CurrentResponseRate and ResponseRateColor are hidden entry fields, getting those values in JavaScript code would involve using the DOM model and that is way beyond what I want to do in JavaScript. Once again thank you pcSoft!

Hopefully this article can server as a primer for incorporating JavaScript into WebDev projects. There are JavaScript libraries that are far more advanced and would take much more to incorporate but as you see with the right library it can be almost as easy as native WebDev Code

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article.

Uncle Pete’s Corner is weekly webinar on all things WX every Friday, to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

[suffusion-the-author display=’author’]

Pete Halsted[suffusion-the-author display=’description’]

 

5 thoughts on “Incorporating a JavaScript Gauge in WebDev

  1. Is there a way to open a Dynamic WebDev site page, by using JavaScript or Jquery? I’m trying to make a dynamic menu using the HTML control, and in certain options I have a link, that it will need to open a WebDev Page. Thanks!

    Like

    1. I am not familiar with that specific widget, but I am sure we can help you. We offering subcontracting services, if you would like more info please send an email to pete@wxperts.com, and include links to the widget you are talking about, along with a brief explanation of how you will be using it in your project and I will get back to you with details proposal.

      Like

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s