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

Line Charts

Line charts are good for showing the up and down progress of a particular behavior. Let's suppose we are selling toys and we want to see how many toys we sold from January to March of this year. We can show a table that has our sales, but will the common user really read a bunch of numbers? Probably not. But what if we could put the same data into a quick line chart that would show, at a glance, what trend our sales are taking over the 3-month period? The user could take one quick look at the chart and know immediately what direction our toy sales were taking and what, then, they may expect going forward, given the fact that history tends to repeat itself. This would be very valuable information for our toy sales force, indeed.

Suppose we are selling dolls and toy cars and in January, we sold 10 dolls and 20 cars; in February, we sold 25 dolls and 50 cars; and in March, we sold 5 dolls and 70 cars. How could we quickly show this to our user so that one glance would give them the picture of what is happening?

With the DMXzone Google Charts Extension, it's quick and easy to make a line chart to illustrate to our viewers. In your document, click the DMXzone tab or menu item in Dreamweaver and click Line Chart in the dropdown menu that appears. In the interface that comes up, you have options on how to create this chart. You can use the Graphical editor and drag the line to the point of your Sales End figure, or you can use the Data Grid Editor and type in the figures to get a more accurate representation of your sales. In this case, I would use the latter to get the most accurate representation of values that I could. The figure below shows the values plotted into the Data Grid Editor and the final chart that is created.

Fig 2: Creating a simple Line Chart

The next option on the Charts dropdown is Sparklines, which is also a line chart, but has a little different use. In fact, my first attempt at a Sparklines chart looked exactly like my Line Chart so I dove into some documentation and discovered that you use a line chart when you want to plot the general trend of data where you might not have a lot of data, but when you have a lot of data and want to plot out the data and the up or downward tendency where there is a lot of fluctuation, use a sparklines chart. Figure 3 below shows both the Data Editor interface with this data plotted and the resulting sparklines chart.

Fig 3: Creating a Sparklines Chart with much more data to plot.

Time for Pie – Yummy!

Moving along from the basic line type charts, we look next at the next group on the menu, Pie Charts and 3D Pie Charts. Pie Charts are fantastic for quickly showing how "slices" of the total are divided among the various portions … hence the name. No, it's really not designed to make you hungry. For this type of chart, I found the Graphical Editor to be most helpful. Continuing the example of a toy shop, I have dolls and cars for sale and I want to show my investors what portion of the total is representated by what product. In the month of March, I sold 250 toys and out of those, 120 were dolls and the remaining 130 were cars. So I create this in Dreamweaver with the Pie Chart option as shown below. When you first select the Pie chart option, you will notice that it makes a pie on your page that says Hello and World for the portions. You can quickly click on each label to change them to Dolls and Cars.

Okay, now you think, I'll just change the values from the default to make Dolls 120 and Cars 130 and I'm good to go. Try that and you will quickly see that you're wrong. Making Dolls 120 quickly shows it as being most of the chart and you can't make Cars 130 because there isn't 130 left in the circle. Why?

Because Pie Charts are not numbers out of the total number. They are a percentage out of 100%. When you make Cars 130, it's not 130 cars, but about 65% and that's what the pie chart is meant to show. You can also choose the 3D Pie Chart option and you'll have a little fancier representation of the same thing, as in the picture below.

Fig 4: The Pie Chart and 3D Pie Chart for our sales of Dolls and Cars