HTA – Giga thoughts …

In my earlier post “Slicing and dicing with LogParser & VBA” I had mentioned that LogParser is really a slick Microsoft utility that can be used to obtain information on files, event logs, IIS logs etc. Continuing on the journey in LogParser I came to realize that you can also create cool charts with output of LogParser which can be either a line graph, a pie chart , a 3D pie chart a 3D bar chart etc. The options are many. So I started to play around with the utility.

To create a chart you can run the command from a LogParser prompt. Some samples are shown below

LogParser “SELECT TOP 10 TO_LOWERCASE (Name) AS NewName, Size INTO .\chart.gif, Path, LastWriteTime FROM ‘” & files & “‘ WHERE NOT Attributes LIKE ‘%D%’ AND NOT ATTRIBUTES LIKE ‘%H%’ ORDER BY Size DESC ” & “-chartType:column3D -i:FS –chartTitle: “My chart”

This will create a gif file with a 3D bar chart with the top 10 files by size

Similarly you could also create a 3D pie chart as follows

LogParser “SELECT TOP 5 Name, Size INTO c:\Chart.gif FROM C:\*.* ORDER BY Size DESC” -chartType:PieExploded3D -i:FS

However I wanted to create these charts in a HTA application and display it dynamically along with the output of LogParser. Thankfully the procedure is very similar. Here is what you need to do for this.

To do this you need to set up the environment as below. I have used VBscript.

Set objLogParser = CreateObject(“MSUtil.LogQuery”)

Set objInputFormat = CreateObject(“MSUtil.LogQuery.FileSystemInputFormat”)

Then you need to specify the chart options

Set objOutputChartFormat = CreateObject(“MSUtil.LogQuery.ChartOutputFormat”)

objOutputChartFormat.groupSize = “400×300”

objOutputChartFormat.fileType = “GIF”

objOutputChartFormat.chartType = “Column3D”

objOutputChartFormat.categories = “ON”

objOutputChartFormat.values = “ON”

objOutputChartFormat.legend = “ON”

Finally create a LogParser query and execute it as shown below where “topN” & the directory path “files” is taken as input from the user

strQuery1 = “SELECT TOP ” & topN & ” Name, Size INTO c:\tes\filesize.gif FROM ” & files & ” WHERE NOT Attributes LIKE ‘%D%’ AND NOT ATTRIBUTES LIKE ‘%H%’ ORDER BY Size DESC ”

objOutputChartFormat.config = “c:\test\FileSize.js”

Set objRecordSet1 = objLogParser.ExecuteBatch(strQuery1, objInputFormat , objOutputChartFormat )

To specify the chart title, the X axis & Y axis a javascript/VBscript file has to be created as below (FileSize.js) which is specified in objOutputChartFormat.config

FileSize.js (contents)

// Set the title above the chart.

chart.HasTitle = true;

chart.Title.Caption = “Top N files by size”

// Set the border style for the chart.

chartSpace.Border.Color = “#000000”;

chartSpace.Border.Weight = 2;

// Change the background color for the plot area.

chart.PlotArea.Interior.Color = “#f0f0f0”;

// Set the font size for the chart values.

chart.SeriesCollection(0).DataLabelsCollection(0).Font.Size = 6;

// Set the caption below the chart.

chartSpace.HasChartSpaceTitle = true;

chartSpace.ChartSpaceTitle.Caption =

“This chart shows the Top N files by file sizes in the specified directory “;

chartSpace.ChartSpaceTitle.Font.Size = 10;

chartSpace.ChartSpaceTitle.Position = chartSpace.Constants.chTitlePositionBottom;

// Set the style and caption for the Y axis.

chart.Axes(0).Font.Size = 8;

chart.Axes(0).HasTitle = true;

chart.Axes(0).Title.Caption = “File Name”;

chart.Axes(0).Title.Font.Size = 9;

// Set the style and caption for the X axis.

chart.Axes(1).Font.Size = 7;

chart.Axes(1).HasTitle = true;

chart.Axes(1).Title.Caption = “Size in bytes”;

chart.Axes(1).Title.Font.Size = 9;

Lastly to display the chart dynamically as it is created in the HTA file do the following

imagearea.innerHTML = “”

where imagearea will be specified in the HTML portion as

where filesize.png is any image prior to the creation of the chart through LogParser.

A sample output is shown below

LogParser charts are really cool and well worth the effort!

Also see
Brewing a potion with Bluemix, PostgreSQL, Node.js in the cloud
A Bluemix recipe with MongoDB and Node.js A Cloud medley with IBM Bluemix, Cloudant DB and Node.js
Rock N’ Roll with Bluemix, Cloudant & NodeExpress

Find me on Google+

This post includes some basic tips to consider while building a HTA/HTML application. Clearly I am no Web guru knowledgeable of the various technologies that make the Web zip and zing. Here are my 2 cents

Any HTML page will contain tags for e.g

etc.

Any self-respecting Web page will include a vertical or a horizontal menu. For this you would need to use a Cascade Style Sheet (CSS). Rather than re-inventing the wheel do re-use the cool menu items & CSS style sheets at the following site http://www.dynamicdrive.com/style/layouts/

You will also be adding textboxes, radio buttons, submit and reset buttons. Assuming you have all the form controls in a single form you need to use the following

Consider a form

Enter the file name containing the server list (srvr_list.txt) :

For this to get the input from the text box use

file = form1.servers.value

Using a radio button is a little tricky. Radio buttons belong to a group and the way to handle this in VBscript is as follows
Include subdirectories Yes

No
This is done by iterating through the radio button list

for each radio in form1.Radio1

If radio.checked = true Then

If radio.value = “Yes” then

objInputFormat.recurse = -1

ElseIf radio.value = “No” Then

objInputFormat.recurse = 0

End If

End if

Handling a Submit requires that you handle the onClick action as below

This indicates that when you click the Submit button you will invoke the subroutine fileSize

A Reset button is of type “reset”. As long as you enclose all the controls in a single form hitting the reset button will clear all the controls.

Populating output in a table: To populate output dynamically in a table I used MS Tabular Data Control (TDC) when the output is written to a CSV file. The cool thing about this is that it automatically paginates output and display “n” entries per page instantaneously. I had tried various thing like populating using DOM, InnerHTML but all of those failed miserably when the o/p was very large. With TDC I can display ~30K entries instantaneously from a CSV file.

This is done as below

The CLASSID is the TDC control. Make sure you choose the correct delimiters and text qualifiers. Populate your CSV file.

You then need to connect this with Datasrc as below

NumberPathFile SizeLast Write Time