FusionCharts for Dreamweaver Documentation

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.

Let’s see how easy it is to create a dynamic chart with FusionCharts for DW - developer edition.

 

To be able to create this dynamic chart:

1. Install the FusionCharts for DW (developer edition) extension.
2. Start Dreamweaver. Create a Dreamweaver site; set up the site’s testing server to be PHP/MySQL.
3. Open the attached .php file; download it from here.
4. Configure a database connection. Download the MySQL database we will use in this example from here; following, import the database to your server.

 

To create your first chart, follow these simple steps:

1. In the .php file you created earlier, click at the location where you want to insert the chart. Insert a Dynamic Simple Chart from the FusionCharts for DW section of the Insert menu; as a result, the extension interface opens. To learn more about the interface visit the Interface section.
2. In the Data tab, select already defined recordsets as a data source.
    

3. Define the category as FirstRecordset recordset, modelName column; define the series as FirstRecordset recordset, acquisitionPrice column, then click Add As Series. At the bottom of the interface, select Sort By Series, in an Ascending order.
    

4. Switch to the Chart Selection tab, then select the Bar Single Series Chart.
    

5. Switch to the General Options tab, then insert the chart name in the Chart Name box: MyFirstDynamicChart.
    

6. At the bottom of the interface, click OK to add the chart to the page. As you can see, the chart can be seen embedded in Design View, as well as in Code View.
    

7. Save your file and click F12 to preview the file in a browser.
    



 

Selecting The Chart Type

In this section we will continue working on the chart created in the preceding section of the documentation, Your First Dynamic Chart, so make sure you have already gone through that chapter. You will see how easy it is to change the chart type used to plot a chart.

In order to change the chart type, follow these simple steps.

1. Open the file created in the Your First Dynamic Chart section of the documentation. In Design View, select the chart and click Edit Dynamic Chart in the Insert panel, the FusionCharts for DW section.
2. As the interface opens, you will see that the options you configured are set. Remove the chart data sorting by selecting None for the Sort By option.

1. Switch to the Chart Selection tab in the interface and select the Single Series Pie chart. Click OK to update the configuration of the chart.
    


Select the Single Series Pie Chart

2. Save your file and click F12 to preview the file in a browser.
    


Preview the file in a browser

 

Specifying The Chart Parameters

In this section we will continue working on the chart created in the preceding section of the documentation, Selecting The Chart Type, so make sure you have already gone through that chapter. You will see how easy it is to change the chart appearance by modifying a few chart options.

In order to modify the chart options, follow these simple steps.

1. Open the file created in the Selecting The Chart Type section of the documentation. In Design View, select the chart and click Edit Dynamic Chart in the Insert panel, the FusionCharts for DW section.
2. As the interface opens, switch to the Chart Selection tab. First of all, in order to see all the chart options, enable the Show Advanced Options parameter; this will display, instead of only the default basic options, some advanced options which can be quite handy for a real original chart appearance. In the Pie Properties panel, check the enableRotation option (you will see when you preview the file in a browser that you can rotate the pie by dragging it with the mouse); in the Data Plot panel, disable the Show Plot Border option.
    

Configure the chart-specific options

1. Switch to the General Options tab; as you can see, the Show Advanced Options parameter remained enabled - we want it that way to see all the configuration options available. In the Caption, Subcaption panel, type the following texts: Available Cars For Sale for Caption and with Acquisition Price for Sub Caption (as you can see, by using the Dynamic Data option, you can load dynamic values for the Caption and Sub Caption options). In the Number Formatting Basics And Scaling panel, type $ for the numberPrefix option.
    


Configure the some general chart options



Configure other general chart options

2. Save your file and click F12 to preview the file in a browser.
    


Preview the file in a browser

Defining Styles

In this section we will continue working on the chart created in the preceding section of the documentation, Specifying The Chart Parameters, so make sure you have already gone through that chapter. You will see how easy it is to change the chart appearance by modifying a few chart options.

In order to define a chart style, follow these simple steps.

1. Open the file created in the Specifying The Chart Parameters section of the documentation. In Design View, select the chart and click Edit Dynamic Chart in the Insert panel, the FusionCharts for DW section.
2. Switch to the General Options tab, and open the Caption, Subcaption panel. Click the Caption Style Settings button to open the Configure Styles dialog box.

>

Open the Configure Styles dialog box

1. Select Font, enable Use This Style and apply the following configuration: Adobe Caslon Pro Bold Font, 20 Text Size, FF00FF (purple) Text Color, DDE3D5 (light gray) Text Background Color, 10 (pixels) Text Left Margin and 5 (pixels) Font Letter Spacing. Finally, click OK to apply the new style to the chart caption.
    


Configure a Font style

2. Save your file and click F12 to preview the file in a browser.