Free - Make Some Charts!

I have been a Dreamweaver user since 1999. I have been a Team Macromedia member/Adobe Community Expert for Dreamweaver or UltraDev since the end of 2001. I have worked with a fair number of extensions over the years, I have watched or worked with a number of extension developers and I have even made a few extensions of my own.

Editors note: you need DMXzone Google Charts to apply the lessons learned in this article

Bar Charts

The last group of charts are the bar charts and there are several options for this group. You can create nested bar charts in horizontal or vertical representation and you can also create bar chart groups which allow you to show progress in an easy to read graphic representation. Adding a bar in the nested example is self explanatory but you can also add a region which will show the progress from a specific point in time and it's easy to see which region saw the most change. The grouped chart allows you to add a new barset to add a new category or a new bar to measure another attribute in every group.

Fig 5: Simple Horizontal Bar and Grouped Bar Chart

Fig 6: Simple Vertical Bar and Grouped Bar Chart

Something to note is that, by default, a new bar group adds in in the same light orange color as the second one which makes it very difficult to tell them apart. At this time, the only I found to change the color of the bar was to edit the code itself. In the example above, I just added a new color for the third barset of 0000ff to get the blue you see in the example immediately about and ff0000 to get the red that you see in the horizontal group example. In the code snippet below this tip, the value I added is highlighted in red.

<img width="271" height="133" src="http://chart.apis.google.com/chart?cht=bvg&amp;chd=t:10,30,20|20,10,40|40,20,10&amp;chds=0,101&amp;chs=271x133&amp;chco=FFECCC,FE9900,0000FF&amp;chbh=20,5,10" />

Setting Options

The preceding section shows the basics, but please don't think that is all you can do. There are many options you can set on all the types of charts, including custom labels, custom background and chart background colors, changing sizes of bars and on and on. There is so much you can do to customize right within the extension interface and there are great explanations of what Google charts do and what everything means available here: http://code.google.com/apis/chart/. I do suggest reading through this page to imagine the possiblilties. The code is very extendable and the DMXzone Google Charts extension makes creating the charts very very easy.

And now ... for the Developer

When I first started looking at this extension, a big question occurred to me almost immediately. Wouldn't it be great if this would work with recordsets in Dreamweaver and allow me to create charts that would change upon request to reflect changes in those values through database updates? I asked the DMXzone this question and they thought it was a great idea so I started playing with what is out there to see what it would take. Turns out many DMXzone forum posters had the same idea as I was pointed to some forum comments about the same thing. Here it is, guys. While it doesn't work in the extension interface and in fact, renders the existing interface unusable after changing the code, it still works in the chart and I have a feeling there will be an update to this extension fairly soon that will make this all point and click.

The following example is ASP because that's my best thing. It should work in all other server models however.

I first started by defining some variables to see what I would have to do to the code in order to create a line chart that reflected my values. Here is my code for defining the variables and setting their values:

<%
dim dstart, dmax, dvalues
dstart = 10
dmax = 50
dvalues = "20,30,15"
%>

Pretty easy. I defined variables for the starting and maximum values used by Google Charts and a third variable called dvalues. Google Charts uses comma delineated values for line charts so dvalues simply has three values for what I want the line to do.

Then I modified the image tag to allow it to use these values in creating the chart as follows:

<img width="250" height="100" src="http://chart.apis.google.com/chart?cht=lc&amp;chd=t:<%=dvalues%>&amp;chds=<%=dstart%>,<%=dmax%>&amp;chs=250x100&amp;chco=FF6600" />

All I did here was to replace the values from a chart with ASP placeholders so the values I defined in the first code block would be substituted by the server when the page was requested and batta-bing … my chart was created using my values created in the dvalues variable.

Fig 7: Line Chart created with the values in my dvalues variable

Now try this with a recordset. I created a simple Access database with a table called Products and I gave columns StartingValue, MaxValue, MondaySales, TuesdaySales, WednesdaySales, etc. Then I created the following recordset:

<%
Dim rssales
Dim rssales_cmd
Dim rssales_numRows
Set rssales_cmd = Server.CreateObject ("ADODB.Command")
rssales_cmd.ActiveConnection = MM_conn DMXzone_STRING
rssales_cmd.CommandText = "SELECT StartingValue, MaxValue, MondaySales, TuesdaySales, WednesdaySales FROM Sales"
rssales_cmd.Prepared = true
Set rssales = rssales_cmd.Execute
rssales_numRows = 0
%>

Since I had already defined varlables for the previous example, I just used the same variable definitions and set the recordset column equal to the appropriate definition as follows:

<%
dim dstart, dmax, dvalues
dstart = (rssales.Fields.Item("StartingValue").Value)
dmax = (rssales.Fields.Item("MaxValue").Value)
dvalues = "(rssales.Fields.Item('MondaySales').Value),(rssales.Fields.Item('TuesdaySales').Value),(rssales.Fields.Item('WednesdaySales').Value)"
%>

Doing it this way allowed me to leave the remaining code unchanged and the graph turns out to be the same. Doing this in Cold Fusion or PHP would be very similar to the preceding example since you can do all of this, other than setting the variables, right in the tool UI. Create a recordset, apply the variable values to the recordset columns and upload the page and of course, the connection page. Very easy to adapt, but like I said, the extension graphical interface will now throw an error since the interface doesn't (yet) recognize the dynamic code, but the code will work in the browser. I am pretty sure there will be an update up the road that will do this right in the interface.

All in all, this is a marvelous extension. I am currently working on a project for a client where the client wanted better reports for his backend and this fits right in! Not only can I make data grids with all the information, but now I can quickly and easily graph out the results for the administration site. Thanks to DMXzone.com, another satisfied client!

Happy Charting!