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.

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.

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.

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.

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.

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

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.

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

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

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

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’]

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

 

• WEBDEV