Random Musings from the Intellectually Gifted. How's that for no ego? :pfft
Or more aptly proof of concept of scripting bar charts
Published on April 5, 2007 By SirSmiley In DesktopX
Took a break from working on some game scripts & actually found it easier to script a basic object based on The "Bar Chart" Sample code from ASP101. It's very rough. Put I've posted the script below.



Code: vbscript
  1. ShowChart Array(6, 10, 12, 18, 23), Array("P1", "P2", "P3", "P4", "P5"), "This is the Chart Title", "X Axis Label", "Y Axis Label"
  2. Sub ShowChart(ByRef aValues, ByRef aLabels, ByRef strTitle, ByRef strXAxisLabel, ByRef strYAxisLabel)
  3.     ' Some user changable graph defining constants
  4.     ' All units are in screen pixels
  5.     Const GRAPH_WIDTH  = 300  ' The width of the body of the graph
  6.     Const GRAPH_HEIGHT = 200  ' The height of the body of the graph
  7.     Const GRAPH_BORDER = 2    ' The size of the black border
  8.     Const GRAPH_SPACER = 5    ' The size of the space between the bars
  9.     ' Debugging constant so I can easily switch on borders in case
  10.     ' the tables get messed up.  Should be left at zero unless you're
  11.     ' trying to figure out which table cells doing what.
  12.     Const TABLE_BORDER = 0
  13.     'Const TABLE_BORDER = 10
  14.     ' Declare our variables
  15.     Dim I
  16.     Dim iMaxValue
  17.     Dim iBarWidth
  18.     Dim iBarHeight
  19.     ' Get the maximum value in the data set
  20.     iMaxValue = 0
  21.     For I = 0 To UBound(aValues)
  22.         If iMaxValue < aValues(I) Then iMaxValue = aValues(I)
  23.     Next 'I
  24.     'Response.Write iMaxValue ' Debugging line
  25. iBarWidth ="20"
  26.     ' Calculate the width of the bars
  27.     ' Take the overall width and divide by number of items and round down.
  28.     ' I then reduce it by the size of the spacer so the end result
  29.     ' should be GRAPH_WIDTH or less!
  30. 'iBarWidth = (GRAPH_WIDTH \ (UBound(aValues) + 1)) - GRAPH_SPACER
  31.     'Response.Write iBarWidth ' Debugging line
  32.     ' Start drawing the graph
  33. DesktopX.Object("lbl.ChartTitle").Text = strTitle
  34. DesktopX.Object("lbl.Yaxis").Text = strYAxisLabel
  35. DesktopX.Object("lbl.Yaxis").Rotation = -90
  36. '                    <TD ROWSPAN="2"><IMG SRC="./images/spacer.gif" BORDER="0" WIDTH="1" HEIGHT="<%= GRAPH_HEIGHT %>"></TD>
  37. '                        <TD VALIGN="top" ALIGN="right"><%= iMaxValue %> </TD>
  38. DesktopX.Object("obj.Yline").Width = GRAPH_BORDER
  39. DesktopX.Object("obj.Yline").Height= GRAPH_HEIGHT
  40. ' We're now in the body of the chart.  Loop through the data showing the bars!
  41.                     For I = 0 To UBound(aValues)
  42.                         iBarHeight = Int((aValues(I) / iMaxValue) * GRAPH_HEIGHT)
  43.   '-Clones bars
  44.   If b = False Then
  45.   Dim z, strname
  46.   z=0
  47.     Do
  48.         z = z+1
  49.         strname = "bar" & z
  50.     Loop until DesktopX.IsObject(strname)=False
  51.         DesktopX.object("bar0").Clone strname, DesktopX.object("bar"&(z-1)).Left + iBarWidth + GRAPH_SPACER, DesktopX.object("bar0").Bottom-iBarHeight
  52.       DesktopX.object("bar"&(z)).Width = iBarWidth
  53.       DesktopX.object("bar"&(z)).Height =iBarHeight' %>" ALT="<%= aValues(I) %>"></TD>
  54.       DesktopX.object("bar"&(z)).Visible = True
  55.     End If
  56.         Next 'I
  57. '                    </TR>
  58. '                    <!-- I was using GRAPH_BORDER + GRAPH_WIDTH but it was moving the last x axis label -->
  59. '                    <TR>
  60. '                        <TD COLSPAN="<%= (2 * (UBound(aValues) + 1)) + 1 %>"><IMG SRC="./images/spacer_black.gif" BORDER="0" WIDTH="<%= GRAPH_BORDER + ((UBound(aValues) + 1) * (iBarWidth + GRAPH_SPACER)) %>" HEIGHT="<%= GRAPH_BORDER %>"></TD>
  61. '                    </TR>
  62. ' The label array is optional and is really only useful for small data sets with very short labels! %>;
  63. '            If IsArray(aLabels) Then
  64. '            For I = 0 To UBound(aValues)
  65. '                = aLabels(I)
  66. '                    Next 'I
  67. DesktopX.Object("lbl.Xaxis").Text = strXAxisLabel
  68. End Sub
  69. '--Clears Chart
  70. Function dxNewChart
  71. Object.SetTimer 100, 100   
  72. End Function
  73. Sub Object_OnTimer100
  74. Call clearChart
  75. End Sub
  76. Function clearChart
  77.   Dim i, strname
  78.   i=0
  79.     Do
  80.         i = i+1
  81.         strname = "bar" & i
  82.     Loop until DesktopX.IsObject(strname)=False
  83.     If i > 1 Then
  84.         DesktopX.object("bar" & (i-1)).delete
  85.   Else
  86.   Object.KillTimer 100
  87.   End If
  88. End Function
  89. '--End Clears


Comments
on Apr 05, 2007
Nice use of the code block. 

Ummm . . how the hell does it work, what's it do?  How can I use it? 

(Thanks for sharing!!)
on Apr 05, 2007
I'll try to summarize better tomorrow but, for the most part it takes an array and dynamically creates a bar chart based on the dimensions of the Chart Area. Instead of reading the values into a table I charted each bar into an cloned object.

One immediate thought of using it would be something like Vad's Gallery Checker. Instead of displaying numbers you could display bars(numbers as labels) or a stacked bar chart with the second criteria being downloads today. They have a stacked bar chart script but, I want to get a handle on this then release into into the Scripts Gallery.
on Apr 07, 2007
Another screenshot. I've put the values into a tooltip and also working on a legend concept but, still learning more about arrays. This is a fun way to learn arrays...if there actually is a fun way to do that?

Some more ideas for usage:
- Poll Results streamed to your desktop
- Task/Project Status

on Apr 07, 2007
Pretty cool.

Can you comment on where the values are getting pulled from?
WIll data be able to be pulled from sources like Google Spreadsheet?
on Apr 07, 2007
At the moment the values are strictly coming from internal arrays.

Code: vbscript
  1. ShowChart Array(6, 10, 12, 18, 23), Array("P1", "P2", "P3", "P4", "P5"), "This is the Chart Title", "X Axis Label", "Y Axis Label"


The first being the values, the second being the labels, then the respective titles.

To answer your question; yes, you could pull data from the google spreadsheet. My immediate thinking is setting it up in a preferences menu, or a read from csv, databse, excel or xml.
on Apr 07, 2007
Very cool!
on Apr 07, 2007
Amazing WoW I'm always surprised by all the possibilities of DX Awesome work SirSmiley
on Apr 12, 2007
VERY NICE!!

This is really great, need to see what can be done with it.
on Apr 12, 2007
Here's where it's at currently. Haven't even gotten to parsing data into the array yet!

on Apr 18, 2007
So, I want to release something just to let coders have something to play around with. As I usually do, I over complicate things. I'm interested to know the basic thoughts/suggestions of what others would like to see?

Here's the features I'm working on.
-Sizable
-Horizontal/Vertical Option
-Legend that can be positioned right,left,up,down
-Dynamic chart (within limitations. eg. maximum of say 10?)

Here's a pic of something I've done for myself. It's based on fixed array dynamically updated via timer.