FusionCharts for Dreamweaver Documentation

Download a free trial of FusionCharts for Dreamweaver
 
Buy FusionCharts for Dreamweaver
 
Insert web charts into your Dreamweaver project Insert web charts into your Dreamweaver project
 

Create an Animated Sales Chart with FusionCharts for Dreamweaver

This tutorial was made using FusionCharts for Dreamweaver
box FusionCharts for Dreamweaver - Developer Edition

FusionCharts for Dreamweaver helps Web programmers to create animated Flash charts from an easy to use Dreamweaver interface. FusionCharts for Dreamweaver comes with 36 Web ready chart types including line, area, bar, column, doughnut, combination, scroll charts and more.

All the charts are animated & interactive, which makes it a delightful experience for the end user. The interactivity options include tooltips, rotation, switching from 3D to 2D and then back again, and even slicing the wedges in a pie chart.

The result

In this tutorial we will show you how easy is to create any web charts your sales department would need to track the overall sales statistics. The Animated web charts are generated on the fly based on the database values, so your sales department will always have the most up to date reports.

 

Overview

In order to obtain the company’s sales for the last quarter of 2008, we have added the data in the table column referring to the value of the sales as a chart’s data series. The series will be grouped and displayed “by month” and a sum will be applied on the data values for each month (October, November, December, as the chart describes the last quarter of the year); all SQL queries needed to organize the data will be automatically generated based on a few options configured from the FusionCharts for DW user interface.

 

Database table

Click here to download the database used to create this chart

The Sales table contains an entry for each performed sale; the sale is described by the following fields: a unique ID, the surname of the customer, the value of the sale and the date on which the sale was made.

The Sales table

The Sales table

In order to obtain the company’s sales for the last quarter of 2008, we add the data in the table column referring to the value of the sales as a chart’s data series. The series will be grouped and displayed “by month” and a sum will be applied on the data values for each month (October, November, December, as the chart describes the last quarter of the year); all SQL queries needed to organize the data will be automatically generated based on a few options configured from the FusionCharts for DW user interface. The target data based on which the chart will be plotted is displayed in the table below.

Chart target data

Chart target data

 

Generating the chart with FusionCharts for Dreamweaver

Creating a chart involves two processes which are:

  • Configuring chart data
  • Selecting a chart type and setting chart propeties

 

Configuring chart data

The following steps will guide you through the process of configuring chart data. If you have any difficulties understanding the steps below, which refer to configuring the dynamic chart data, please read the Configuring Dynamic Chart Data section of the documentation.

  1. Create a blank .php page in the root directory of your Dreamweaver site and name it ‘chart.php’ - it is not mandatory to name it as ‘chart.php’, you can use any name for your page. Now, click on the ‘Insert Dynamic Simple Chart’ button which is located on the FusionCharts toolbar, this will launch the FusionCharts User Interface for configuring a Dynamic Simple Chart.
  2. By default, the Data tab of the FusionCharts for DW user interface opens. Select Automatically Generate SQL Queries to us data from the tables in a database.
  3. Select the data source
  4. From the list labeled Connection, select singleSeries (the connection to the database must already exist in order to do this step). Select the plot type as Data Grouped By Date, then click Next.
  5. Select the connection and the plot type
  6. From the Category Data tab, configure the Data Grouped By Date options; select Month for the Group By option and March 09 for the Display Format option. Leave the Min Value and Max Value withe their default values, 0 and 12; finally, enable the Plot Complete Date Information option. Click Next to configure the chart series data.
  7. Configure the category data
  8. From the Series Data tab, select the Add Series button to open the Add/Edit Series Form. Configure the Series options; select sales for the Data Source option, sales.SaleValue for the Value Column option, sum for the Calculation option, sales.SaleDate for the Date Column option and YYYY-MM-DD for the Column Format option. Finally, click the OK button to add the data series.
  9. Add a data series
    Configure the data series
  10. Select the series and click the Set Filter button. Select the Add Simple Filter option and configure it to have: sales.SaleData for Column, >= for Operator and 2008-10-01 for Value; repeat the operation, configuring the filter to be <= than 2008-12-31. Click Save to set the filters on the data series.
  11. Set a filter on the data series Configure the filters
  12. In order to see the data which will be plotted in the chart before configuring the chart options, use the Preview Data option.

 

Selecting a chart type and setting chart propeties

The following steps will guide you through the process of selecting a chart type and setting basic chart properties.

  1. Click the ‘Chart Options’ tab to switch to the ‘Chart Options’ screen. Here you can choose a chart type from among all available options, the charts are categorized into three categories namely; Single Series Charts, Multi Series Charts and Stacked Charts. Select the column 3D chart from the Single Series category.
  2. Use the scroll bar to view the lower portion of the ‘Chart Options’ screen, click on the ‘Titles and Axis Name’ panel to expand it. Enter ‘Month’ as the value for ‘XAxisName’ field, and ‘Sales’ as the value for ‘yAxisName’ field.
  3. Click on the ‘General Options’ tab to switch to the ‘General Options’ screen, provide a name for your chart in the ‘Chart Name’ field and also set the height and width of the chart in the ‘height’ and ‘Width’ fields, for this example you may mane the chart as ‘MyFirstChart’ and set the height and Width to 400 and 300 respectively (height and width is specified pixels).
  4. Scroll down the ‘General Options’ screen to view the ‘Titles and Axis Name’ panel, and then click on the panel to expand it. Give a caption for your chart by entering a caption into the ‘Caption’ field, for this chart we will give a caption ‘Quarterly Sales Chart’. Similarly set ‘Year 2008′ as the sub caption for your chart.
  5. Now scroll down to the very bottom of the ‘General Options’ screen, and click on this ‘Preview’ button to preview your chart and finally click on the ‘Ok’ button to embed the newly created chart on your web page.
  6. Chart in Design View

FusionCharts uses a JavaScript method for embedding the chart intto your web page, if you check the source code of your page; you will see the code which actually performs the task of embedding the chart into your page. Also, notice that an ‘includes’ folder has been created within the root directory of your site, this folder contains the FusionCharts SWF file and a FusionCharts JavaScript file. You may now open the page in a browser to see your first chart in action.

Happy coding!

FusionCharts for Dreamweaver

box FusionCharts for Dreamweaver - Developer Edition

FusionCharts for Dreamweaver helps Web programmers to create animated Flash charts from an easy to use Dreamweaver interface. FusionCharts for Dreamweaver comes with 36 Web ready chart types including line, area, bar, column, doughnut, combination, scroll charts and more.

All the charts are animated & interactive, which makes it a delightful experience for the end user. The interactivity options include tooltips, rotation, switching from 3D to 2D and then back again, and even slicing the wedges in a pie chart.

windows
Windows
  • OS: Windows 2000 (and above).
  • Environment: Adobe Dreamweaver CS3, CS4 and CS5.
  • View : Flash Player 9 (and above) and JavaScript.
  • Browser : Compatible with all browsers.
 
windows
Apple
  • OS: Mac OS X 10 (and above).
  • Environment: Adobe Dreamweaver CS3, CS4 and CS5.
  • View : Flash Player 9 (and above) and JavaScript.
  • Browser : Compatible with all browsers.