Support Contact:
Phone: +40 (21) 310.63.42; Forums: extendstudio.com/support

Create an Animated Sales Chart with FusionCharts for Dreamweaver

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. 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.

This tutorial was made using:

FusionCharts for Dreamweaver – Developer version

FusionCharts for Dreamweaver FusionCharts for Dreamweaver is a Charting Extension that can be used to render interactive animated charts for web applications and presentations. FusionCharts for Dreamweaver (Developer Edition) offers support for a myriad of web technologies like PHP, ASP VB, HTML and virtually any database supported by Dreamweaver including MS SQL, Oracle & MySQL.


In this section we will show you how to create a Single Series Column Chart to show a company’s sales for the last quarter of 2008. As the target data is dynamic, it will be retrieved from a database table entitled Sales.

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

Creating a chart involves two processes which are;

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

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.

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.

Facebook comments:



2 Responses to “Create an Animated Sales Chart with FusionCharts for Dreamweaver”

  1. ValC says:

    I’m using a CF/MSSQL model and I see that this extension will only generate SQL for PHP/My SQL. Before I go any further with my demo download, is this extenstion of any use to me? Should I move directly into another one of your products (Fusion Charts v3)? Which will suit me best? I’m able to hand code whatever I need but I am also very busy and any software to help along the process is okay by me. TIA.

  2. admin says:

    Hi,

    If you are using CF, you need to generate the SQLs manually. But the extension will work and generate the graphs.

    Thanks,
    Cristian

Leave a Reply