Jump to content
Software FX Community

Integrating PowerGadgets with your website


IGSFX

Recommended Posts

One question we receive sometimes from our customers is how to integrate PowerGadgets charts, maps or gauges within their websites. Although this is possible with no much effort, I would like to emphasize that this solution does not replace a fully-featured server-side component, with the ability of detailed programming and integration with your web applications, as well as interactive data visualization in the browser. In that case, a complete web component such as Chart FX will do a much better job.

Integrating PowerGadgets with your website is as simple as integrating any image in your web page. Then, you update that image from a script using PowerGadgets, at the refresh rate you desire. If you want the image to refresh automatically on the browser, you will need to use your own webpage refresh technique. Using the chart we created in a previous blog post, I will show you an example of how to create a page that shows a chart of the processes running on a server, updated every 5 minutes.

First, you must insert an image tag in the webpage that will contain the chart, for example <IMG src="pgChart.png" mce_src="pgChart.png">. Then, you must create the image using the PowerGadgets output parameter, which exports the gadget to an image file. The file type is determined automatically by its extension (png, jpg or bmp). Your PowerShell command is the following:

ProcessesWithTime | out-chart -dataobject Processes -values CPU -label Name -titles_0_text {$_.DateTime} -output "C:\Inetpub\wwwroot\pgChart.png"

In this sample we are assuming that the PowerShell command is running on the same computer as the webserver. If this is not the case, you can export the image to a temporary file and then upload it to the webserver using a PowerShell ftp cmdlet or another remote upload procedure you may choose.

The second step consists of creating a new image at the desired interval of 5 minutes. The first thought that may come to your mind is using the PowerGadgets native refresh capabilities, used in many other occasions previously. However, the refresh parameter is ignored when the output parameter is used. The main reason for this is that typically you don't want to see the chart on the screen when you export it to a file; therefore, leaving a chart refreshing itself in the background could bring up some major issues such as the lack of a proper UI to close the process. For such reason, we will use instead the Windows Task Scheduler to invoke PowerShell, although you could replace it with your favorite scheduling tool.

We will use PowerShell's ability to receive a script as a parameter to automate the process, by creating a ProcessWithTimeImage.ps1 file with the command line shown above. Also, you will need to add the PowerGadgets snapin to the PowerShell session, which can be done in either one of the following ways:

1) Insert the following as the first line of your ProcessWithTimeImage.ps1 file: add-pssnapin PowerGadgets
2) Invoke PowerShell with the PowerGadgets.psc1 file as a parameter. This is the option we will use in this sample.

The command you must invoke from your Task Scheduler is the following:

<Windows installation folder>\System32\WindowsPowerShell\v1.0\powershell.exe -PSConsoleFile "<PowerGadgets installation folder>\PowerGadgets.psc1" ProcessWithTimeImage.ps1

After setting the appropriate refresh period in your scheduling tool, you will have a new chart with the processes running on the server, updated every 5 minutes. If you hit the refresh button on the browser, you will see a new image when the period has elapsed. If you want to avoid hitting the refresh button to obtain a new image, you can refresh the page automatically at the desired refresh rate, usually the same as the chart is generated. You can even use AJAX to refresh the image without the need to refresh the page. Here is a sample created by one of our web guys, which nicely refreshes the chart image every 5 minutes, with a cool transition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>PowerGadgets Real-Time Sample</title>
<script type="text/javascript">
var PG_iRefreshInterval =5000; // Refresh interval in Milliseconds
var pgStatusMsg = " "
var pgSwappableSection = new Image();
var pgIntAttach = 0;
var pgRefreshTimer;
var pgInitImgSrc;
var pgImgObj;

function PG_HideStatus() {
window.status=pgStatusMsg;
return true;
}

function PG_ImageLoaded(mysrc) {
var targetChart = pgImgObj;
pgImgObj.style.filter="blendTrans(duration=.3)"
pgImgObj.filters.blendTrans(duration=.3).Apply();
pgImgObj.filters.blendTrans.Play();
pgImgObj.src = mysrc;
PG_HideStatus();
}

function PG_RefreshGadget() {
pgSwappableSection.src = pgInitImgSrc + "?attchVar=" + pgIntAttach;
pgIntAttach ++;
pgSwappableSection.onLoad=PG_ImageLoaded(pgSwappableSection.src);
}

function PG_InitRefreshGadget(pgImg) {
pgImgObj = pgImg;
pgInitImgSrc = pgImg.src;
pgRefreshTimer = self.setTimeout("PG_RefreshGadget()",PG_iRefreshInterval);
}
</script>
</head>
<body>
<IMG src="pgChart.png" mce_src="pgChart.png" name="imgPGRefresh" id="imgPGRefresh" onload="PG_InitRefreshGadget(this)" >
</body>
</html>

There is still an enhancement that can be made to this sample, which is to avoid showing the PowerShell window everytime the script is invoked. I will leave this as a homework for the reader, at least until I have time to figure it out :-)

IvanG

Link to comment
Share on other sites

×
×
  • Create New...