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

Comparing Quarterly Total Cost for Two Consecutive Years with FusionCharts for Dreamweaver

In this tutorial we will show you how to create a Multi Series Stacked Column Chart to compare the quarterly cost incurred by a manufacturing company for two consecutive years. Similar to the chart created in the “Stacked chart” section, this chart will help the audience determine the company’s fixed and variable costs, together constituting the total cost.

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.

As the target data is dynamic, it will be retrieved from a database table entitled Costs.

Click here to download the database used to create this chart

The Costs table contains an entry for each cost encountered by the company; the cost is described by the following fields: a unique ID, the cost name, the type of cost (fixed or variable), the value of the cost and the date when the cost appeared.

The Costs table

The Costs table

In order to obtain the data needed to plot the costs encountered by the company, we will add four data series from the table column containing the information about the value of the costs. Following we will filter the information to display only what we want; thus, the four series will be filtered with respect to the cost type and the date when the cost appeared, in order to have the four series displaying information about the costs as it follows: fixed costs in 2007, variable costs in 2007, fixed costs in 2008 and variable costs in 2008. The series will be grouped “by month” and displayed “by quarter“, and a sum will be applied on the data values for each quarter; 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

The following steps will guide you through the process of creating a multi series stacked chart:

  1. 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.
  2. Select the data source
  3. From the list labeled Connection, select multiStackedSeries (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.
  4. Select the connection and the plot type
  5. From the Category Data tab, configure the Data Grouped By Date options; select Quarter for the Group By option and Quarter 1 for the Display Format option. Leave the Min Value and Max Value withe their default values, 0 and 4; finally, leave the Plot Complete Date Information option disabled. Click Next to configure the chart series data.
  6. Configure the category data
  7. From the Series Data tab, click the Add Series button to open the Add/Edit Series Form. Configure the Series options; select costs for the Data Source option, costs.CostValue for the Value Column option, sum for the Calculation option, costs.CostDate for the Date Column option and YYYY-MM-DD for the Date Column Format option. Finally, click the OK button to add the data series.
  8. Add a data series
    Configure the data series
  9. Select the series and click the Set Filter button. Select the Add Simple Filter option and configure it to have: costs.costType for Column, contains for Operator and fixed for Value; repeat the operation, configuring the filter for the costs.costDate Column to contain the 2008 Value. Click Save to set the filters on the data series.
  10. Set a filter on the data series
    Configure the filters
  11. Repeat the two steps above to add three other series and configure them exactly as the one before; set filters on the series, and configure them as before, to contain fixed/variable, 2007/2008 in the other three possible combinations.
  12. In order to see the data which will be plotted in the chart before configuring the chart options, use the Preview Data option. If you have any difficulties understanding the steps above, which refer to configuring the dynamic chart data, please read the Configuring Dynamic Chart Data section of the documentation.
  13. Switch to the ‘Chart Selection’ screen and select the ‘Multi Column’ chart option from the ‘Stacked Chart’ category.
  14. Since we have selected the multi column stacked chart as the chart type; a ‘Group Column’ section will be displayed in the ‘Chart Options’ screen’.

    In the ‘Group Column’ section select column ‘B’ and column ‘C’ using Ctrl+Click and then click the ‘Make group’ button. Note – that both column ‘B’ and ‘C’ have been grouped together as ‘Group 1′. Repeat the same process with column ‘C’ and ‘D’ – they would be grouped together as ‘Group 2′.

  15. In the ‘Titles & Axis Names’ section – enter ‘Quarters’ in the ‘xAxisName’ field and ‘Total Cost’ in the ‘yAxisName’field.
  16. Switch to the ‘General Options’screen by clicking the ‘Chart Options’ tab. Enter ‘myfirstmsschart’ in the ‘Chart Name’ field and set the height and width of the chart to 400 pixels and 300 pixels respectively by entering the values in their respective fields.
  17. In the ‘Caption, Subcaption’ panel – enter ‘Quarterly Cost Analysis’ in the ‘Caption’ field and ‘For the year 2007 and 2008′ in the ‘Subcaption’field.
  18. Check the ‘Show Advanced Options’ check box which is located in the upper portion of the ‘General Options’ screen. Now, go to the ‘Number Formatting and Scaling’ panel and enter ‘$’ into the ‘Number Prefix’ field.
  19. Preview the chart using ‘Open Preview’ button and then click ‘Ok’ to embed the chart into your web page.

You can now open your web page in a browser to see your first multi series stacked chart in action.

Facebook comments:



One Response to “Comparing Quarterly Total Cost for Two Consecutive Years with FusionCharts for Dreamweaver”

  1. twiter says:

    I published your news in twiter

Leave a Reply