Communication is hard and even when people talk face to face it can be really difficult to explain a complex context involving large amounts of information or data. Going online makes communication even harder and increase the risk of misunderstandings and that is where tools for visualizing your information comes in handy.
I recently became aware of a new product from Extend Studio called FusionChart. It has been build as a plugin for Adobe Dreamweaver. In this article I’ll provide a review of the product and we’ll se what it can do and how easy it is to work with.
Extend Studio has kindly offered to give away licenses to their FusionCharts for Dreamweaver – Developer Edition to three lucky tripwire magazine readers. Basically you have to leave a comment and take part in the draw but the details on how to participate is described in the bottom of the article.
In this article I will review FusionCharts for Dreamweaver – Developer Edition by providing basic information and a example I have been playing with. I hope you find the review useful and if you need professional charts on you website make sure you leave a commen and see if your lucky to get a license for free …
FusionCharts provides 2D and 3D charts for users to choose from, including line, area, bar, column, pie, and more. You can then customize the look of the chart with just a few clicks. Data for the charts can be copied from a spreadsheet, imported in XML/CSV format, entered manually or pulled from any type of database. With FusionCharts you can also add animation and filter effects like drop shadow, blur, bevel and more.
Result of Simple Static Chart Created below:
An example of a more advanced interactive chart (can be created just by selecting the Doughnut 3D)
Try right clicking the chart and play with the interactive options.
The Charts look great when they load I think. Feel free to reload and scroll down fast to see how it looks.
This article has been organized into the following sections. Just click the links in this index to jump to the section you wanna investigate.
- Baic Product Information
- Chart types supported
- Getting Started
- Creating a basic “Hellow World” Chart
- More Advanced options
- How to win!
Dreamweaver (Developer Edition) is developed by Extend Studio that also offer a number of other Dreamweaver and Flash extension. The product supports web technologies like PHP, ASP, ASP.NET, JSP, HTML. This review and the example is created using the PHP Edition.
The following Client app. env. are supported. I have been using the widows Edition but I expext the Apple one to be quite similar.
- OS: Mac OS X 10 (and above).
- Environment: Adobe Dreamweaver CS3 and Adobe Dreamweaver CS4.
- Browser : Compatible with all browsers.
- OS: Windows 2000 (and above).
- Environment: Adobe Dreamweaver CS3 and Adobe Dreamweaver CS4.
- Browser : Compatible with all browsers.
The versions / editions available
There is different types of Developer Editions available and basically I think they are all the same except for how they access data in database for Dynamic Charts. So basically the PHP Edition use PHP to fetch data in fx. MySQL and ASP.NET (VB) use aspx to access fx. a Ms SQL Server.
Available Edtions: PHP, Coldfusion, ASP. NET (VB)
There is also a Designer version that I’m not covering in this review. This product features more or less the same features as the Developer Edition (same number of availble chats ect.) but should require less to none knowledge of programming to be used. I haven’t looked into how it works yet so…
The documentation is very practical and provides a set of tutorials. Personally I found it very good for getting started creating some charts.
There is a forum and I tried posting a problem there to see if it is “alive”. I got an answer to my question the same day but as it is a new product the forum is not yet a huge knowledge base.
Dreamweaver (Developer Edition) supports 34 types of chats. The types of charts you expect to find is there and most of the elements you would expect that you can configure is supported. The charts have been divided onto the categories Simple and Composed where composed is charts consisting of more than one data set being presented at the same time (ex. line char on top of a bar chart). FusionCharts provides of 2D and 3D charts for users to choose from, including line, area, bar, column, pie, Doughnut and more.
Animated and Interactive Charts
Integrated Query Builder
There is an integrated query builder that helps you connect to the database, select tables, and aggregate data. I think this is basically what differentiates the developer Edition from the designer but there may be other differences.
Change all classical chart design elements like the labels, titles or borders. In addition, you can change the colors and apply filter effects to any element.
The IU interface
It is completely integrated with Dreamweaver and over all simple to use. All fields have help text which is very good but as always when trying new applications there are thing you have to play with for some time to figure out how it is done.
There is a integrated preview function that works fine and shows the current (also unsaved) configuration.
- Save and reuse settings – Other than the default presets, additional ones can be imported, created, edited, deleted, or exported. This gives you the ability to reuse the preset at a later time or share it with colleagues and friends, offline or online.
- Works with Dreamweaver Recordsets – FusionCharts for DW is enabled with support for Dreamweaver Recordsets.
- Discontinuous data support, Supports discontinuous data i.e. you can have data points on the chart which don’t have any value defined for them.
- Clipboard support for spreadsheet data – Considering the fact that data used for charts is usually found in spreadsheets (Numbers, Excel, Calc), FusionCharts for Dreamweaver allows you to copy-paste data from any spreadsheet into the data grid. I tried this feature and it works well. I didn’t on the other hand manage to get the xml and Csv import to work (but time have been limited and I’m certain that I just didn’t try hard enough.
- 3D Lighting – The 3D charts (Column, Pie, Doughnut etc.) use 3D lighting for their fill, which renders a realistic 3D experience. This can be turned on or off, which then renders a solid fill.
Try it for free by downloading it here.
In order to try FusionChart you can Download a free trail version here but be aware that it requires that you have Dreamweaver. Install instructions can be found here. I experienced some issues getting started because I had a firewall rule preventing Dreamweaver to communicate with the registration server at Extend Studio so if you experiance any issues make sure that DW is allowed to call out.
Once FusionCharts has been installed you will have a new Inserts Tab in DW looking like this (on DW C4)
If you want to try the PHP stuff you have to be running a PHP enabled web server. There are many option you can choose but I would recommend that you setup a local apache and MySQL as it is very simple using fully packaged stacks like WAMP-server (Windows). WAMP is basically a easy to install and configure Apache, MySQL, PHP on Windows.
Ok lets start playing with this new toy and create a simple static chart for web site statistics! In DW you have to create a “site”. Setting up the site is basic DW stuff and depends on your web server setup.
1. Lets create a file called demo.php. (not gonna use PHP now but for later it makes sense). Put in the follwing text.
<h1>Demo of FusionCharts for DW</h1><p>Static simple chart</p>
2. Set the cursor after the just interted text and press “Insert Simple chart” in the FusionCharts menu. The Chart configuration page will open and show the datagrid.
3. We will use the copy & paste feature of static data. Open simle_static_data.csv that is included in the resouce download for this article and select the data and put it onto your clip board (ctrl-c) on Windows.
4. On the Chart configuration page press Paste from clipboard and the data will be loaded in as static data. Choose no as the data does not contain headers.
5. Add category and Serie
Press the A column and when it is selected press the “Set as Category” button.
The category contains the chart labels (usually represented on the x axis)
Press the B column and when it is selected press the “Add as Series” button.
The series contain the chart values (usually represented on the y axis)
I’m not sure if it should be possible but I have not been able to edit the Categoty name. The Serie B Should be changed to Visitors.
6. Choose your chart style. Press Chart Selection to get to the charts selection page. Locate the line chart on the Single Series Charts. (if you want to try the 3D Doughnut that I showed in the Introduction jsut pick that chart type here!)
7. Lets set the general options.
– Choose a Chart Name (fx. WebsiteStatistics).
– Change Width to 600 px
– Enable advanced options
– Put “Website Statistics” into Caption
– Locate Font Options at the very bottom and change both font sizes to 8 (if advanced in not enabled you cant change both)
8. Press Preview and if you like the result press OK. If you want to tweak the Look & Feel a bit more just play around ;))
Load the page in your browser and see if you get this result. That’s it – really a few simple steps to get a chart created.
9. If you want to include the chart in WordPress it is actually quite simple. The Chart in the introduction section was inserted but copying the autogenerated code from DW into the HTML view of this page:
<!– (FCChart Begin) #FusionChart1 –>Result of Simple Static Chart Created below:
var chartFusionChart1 = new FusionCharts(“/includes/FusionCharts/charts/Line.swf”, “FusionChart1”, “600”, “400”, “0”, “0”);
I then just uploaded the includes folder to the root of my W site and put / before all instances of /includes/FusionCharts/… in the code.
I’m not going to cover the more advanced options in this post.
Using the Query builder and creating Dynamic Charts is really where I think FusionCharts starts getting interesting and I’m considering to create a tuts on that quite soon. If you want to digg into the more “interesting stuff” now i’ll suggest that you look in the documentation where you can find examples describing how to do it. In order to use data sources for Dynamic charts you have to know how to do this in DW. Look here in the Adobe DW documentation if you need assistance. FusionCharts expect the datasource to be preconfigured and it will not be helping you to get that part settled.
In terms of designing the optimal look and feel there are some Advanced Features as well in the Advanced Features module that introduces you to the advanced concepts with which you can customize your charts; so, that they convey the right message to the audience of the chart. The online documentation contains following sections:
FusionCharts for Dreamweaver – Developer Edition has overall been a good experince to work with and considering the current price listed in the site ( $76.68 ) I think the value for money is ok.
– If you’re using Dreamweaver it is very simple and affordable way to get a well-integrated Charting solution.
– FusionCharts is simple to install and to get started with
– Most of the chart types and combinations I expected to find is there
– The build in preview is good
– Using Flash that is well adapted and gives excellent visual effects and interactions
– Many options for changing the styles and the look and feel
– Documentation contains many good examples that are almost tuts.
– Dreamweaver is needed. I’m not sure how many out there is using DW but I know that a lot of PHP developers tend to use other and more developer oriented editors. Even though FusionCharts is within your budget Dreamweaver may be to expensive
– On the fly preview would have been nice when configuring styles (look and feel). Until you know exactly what parameter that does what you will be hitting the preview button a lot.
– I stumbled over a few really minor things I didn’t understand – like fx. the Category Name that I could not change and Cvs files didn’t load as I expected. It’s a new product and as always there will be a few things to improve
– I didn’t find a combined detailed and indexed traditional documentation (like a pdf) but fx. the available style parameters is documented in a structued way.
As stated above Extend Studio has kindly offered to give away three licenses for FusionCharts for Dreamweaver – Developer Edition being reviewed in this article to the readers of tripwire magazine. I wan’t to give all reader a fair chance of winning and for that reason I will draw the winners randomly from anyone posting a comment to this article before May 25th. The winners will be required to create an account at Extend Studio where the license will be attached. The names of the lucky winners will be announced in a post on May 25th so remeber to provide your real name when commenting. (e-mails will not be exposed). Only the comments being approved to be shown on the site will be included in the draw so make sure your comments are “Real Comments” if you want to participate.