Free - Have Some Pie!

A couple of weeks ago, I continued writing about the DMXzone charting extension by extending what is already there in the extension to create charts using dynamic data.  In the first part, I showed you how to extend the line and sparkline charts to feed from a database and today, I’m going to continue that with pie charts and show you how to create either a 2d or 3d pie chart from dynamic data.

The DMXzone already creates fantastic pie charts using either a visual editor or a datagrid editor  where one can enter values and quickly create the chart from those values.  Further, the user can export that chart for use in their applications.  With dynamic data, however, the chart needs to remain “live” so that changing data can be reflected in the visualization.  Since Google charts are created “on the fly” (at runtime) anyway, this Is easily accomplished by simply hooking the code created by the extension up to the database.  I gave you an example database in the first part of this article and we can use the same data for the pie chart.

Examining the Extension Code

Let's start by creating a simple pie chart from the DMZ Zone extension and examining the code produced by the extension.  I have applied the extension which, by default, creates a two section pie chart with the labels "Hello" and "World".  I have then gone into Graphical Editor view and changed the labels to extremely creative ones of "Pie1", "Pie 2" and "Pie 3".  The screen shot below shows what you have with this very basic pie chart. 

Figure 1:  Our basic 3 section pie chart

Now let's take a look at the code produced by the extension, which is basically an image tag where the source is a link to Google with parameters to specify the chart and how it should be rendered:

We're going to carefully dissect this code in this article because once you understand what all the parameters are and how you can change them to get what you want, you will find both customizing and making this dynamic is a piece of cake .. er .. pie. 

Looking through the code contained in the tag, the first thing is of course the height and width of the chart.  The DMXzone Charting Extension made this drap-n-drop easy and if you pulled the corners of your chart after placing it on your Dreamweaver page in Design view, you saw that the chart quickly refreshes after dragging to give you a perfect visual chart without the pixelation you would normally get when resizing just an image.  The height and width attributes of the tag respond to whatever you dragged to, or you can alternatively set these dimensions in the Property Inspector when the chart is selected or in code view to get just the size you need. 

The rest of the tag produced is the src attribute and it may seem overwhelming at first (the src attribute in the example above is 2-1/2 lines), so we'll discuss it item by item.  The first part is the URL of the Google Chart site where the chart will be generated.  That's pretty self explanatory and won't change so we'll go to the ? mark and talk about the parameters that follow.  The first parameter is "cht=" and this tells the Google application what kind of chart we are requesting.  The answer to that question is "p" for pie and I want you to notice something here.  Try changing "p" to "p3" in code view and then return to Design View in Dreamweaver to see what happened. 

Continuing on with our parameters, the next one after chart type is the one we are interested in for dynamic generation of the pie chart.  After the ; at the end of the chart type parameter, we see this: chd=t:10,30,11.  chd stands for "chart data"  and the default values are text strings, which takes the values from the extension. 

If we wish to use dynamic data, we want to get these values from a recordset (or predefined variables).  For the first example, we will use predefined variables to get the data to populate the data string chain.  The first thing we need to do is to set up definitions for the variables  so the image tag that sends the data to Google Charts will reflect variable data according to the values fed to the variables.

In ASP, the statement above takes care of initializing 3 variables to populate the 3 regions that we defined in the pie chart interface.  If we add this code to the top of a new ASP/VB page and then add the image tag needed to link to the Google Charting interface and the parameters needed to create our chart according to the values of those variables, then we can create a new pie chart just by changing the values of the variables.

This is what the code would look like for the entire page with the pie chart created from the DMXzone Charting Extension on a new ASP/VB page and the code changed to define 3 variables to represent the values of the data string and those values inserted.  Now in order to change the pie chart, all the user needs to do is to set the three variables equal to different values and refresh the browser.

The pie chart generated from this code.  I like 3d so I have kept the chart type equal to p3 to get a 3d look.  If I want a regular pie chart, I would just drop the "3" and set the chart type (cht) = 3. 

The pie chart created from the code in the code box above

Now we want to take it a step further and actually create the code from a recordset in our sales data table.  I create a new ASP/VB page and I create the following recordset:

This will give me values of sales for three days in a particular week, in this case, Week #1.   I still need the definitions of the variables so I don't need to change those, but this time, instead of setting each variable equal to a numerical value, I set it equal to the recordset column that will be responsible for feeding that variable to the chart.  The complete page code is below:

The first part of the page is familiar to anyone working on a regular basis with dynamic pages in Dreamweaver.  We first have the ASP/VB page declaration followed by the include for the connection string if we're using normal Dreamweaver workflow.  Following this, we define the recordset.  Because I was using a pie chart that was already divided into three pieces, I declared just three variables based on daily sales in the Sales table.  Therefore, this code:

Becomes this:

In order to define each variable to be equal to a defined recordset value.  Now when the values change, for example, to the second record in the table, the values that populate the recordset and therefore, the definitions of the variables will change so the chart generated by the link to Google Charts will be different. 

The pie chart generated by the second record in the recordset looks like this:

Where the values for the second record in the recordset are 10, 30 and 60.  If you view the source of the page in a browser, it will look like the image tag code generated by the static example:

Not anything different to the browser than if we had put static values into the extension and produced our tag from that.  But the flexibility is enormous.  All I did was select a different recordset record which could be done through a link or form just as easily to autogenerate just the pie chart you want.  Take the "3" off the "cht=p3" portion of the tag to make it just "cht=p" and you will have the same chart in 2d form.

Very cool, yes?   It is my prediction that the wizards at the DMXzone will soon build this ability into the extension so this will be done in one motion, but for now, you can see how easily the static charts produced by the extension can just as easily be generated by a recordset or variables changed via a form, a link or the user. 

The last portion of this article will be out in the next 1-2 weeks and will focus on bar charts and talk about a few ways in which charts can enrich your business applications.