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

Tutorial: Create Animated Dynamic Flash Charts from Dreamweaver with FusionCharts

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,  HTML and virtually any database supported by Dreamweaver including MS SQL, Oracle & MySQL.

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. Select the data source
  4. 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.
  5. Configure the data source
  6. Switch to the Chart Selection tab, then select the Bar Single Series Chart.
  7. Select the chart type
  8. Switch to the General Options tab, then insert the chart name in the Chart Name box: MyFirstDynamicChart.
  9. Insert the chart name
  10. 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.
  11. Embedded chart in Design View
    Embedded chart in Code View
  12. Save your file and click F12 to preview the file in a browser.
  13. Preview the file in 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.

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

Open the FusionCharts interface; set Sort By to None

Open the FusionCharts interface; set Sort By to None

  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.
  2. Select the Single Series Pie Chart

    Select the Single Series Pie Chart

  3. Save your file and click F12 to preview the file in a browser.
  4. 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.

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

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.
  2. Configure the some general chart options

    Configure the some general chart options

    Configure other general chart options

    Configure other general chart options

  3. Save your file and click F12 to preview the file in a browser.
  4. 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.

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

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.
  2. Configure a Font style

    Configure a Font style

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

Facebook comments:



Leave a Reply