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
 

Tutorial: Filtering Charts data with FusionCharts for Dreamweaver and PHP vars

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.

 

Filtering Charts data using FusionCharts for Dreamweaver and PHP vars

In this tutorial I will show you how you can filter the data presented in a FusionCharts using PHP vars. Basically the default chart is created on the recordset values and the end user is able to select a subset of values, using  with drop down filters. This is an excellent way to let the user manipulate the information presented in a chart, for example displaying only the sales performed by John during the year.

 

The result

Here is an example: you can filter the sales volumes between a starting month and an ending month:

 

Tutorial start

For this tutorial you will need Dreamweaver CS3 or CS4 and the FusionCharts for Dreamweaver extension. You can download a free trial from here and all you need to do is to install it using the Adobe Extension Manager that comes with Dreamweaver. To locate the extension in Dreamweaver follow this link.

 

1. Setting up the database and the recordsets

For this tutorial we need a very simple database with only 2 tables:

  • 'prediction table' used to hold the sales volume information, with the following fields:
    • id_prediction (unique id)
    • id_month (holds the id of the month)
    • value_prediction (holds the sales volume)
  • 'months table' used to show the name of the months, with the following fields
    • id_month (unique id)
    • name_month (the name/label of the month)

You can download the sample database from here.

Open a new PHP file, let's say chart.php (you need to have a PHP site configured first). Let's create the recordsets:

  • First recordset should select the sales volumes depending on 2 PHP variables, var1 and var2. To add them click on the '+' sign below the SQL area and for the var1 fill the fields with the values you can see above the edit button in the below screenshot. Do the same for var2 (name v2, type Integer, default value:1, run-time value: $_GET['var2'])

    Recordset1
     
  • The second recordset should extract the name of the months

    Recordset2

 

 

2. Creating the drop-downs used for filtering the information

The dropdowns should show the starting month and the ending month for the filter. To do this, you need to create a form and insert 2 dynamic select options and a submit button. Let's create the form (you can use the Dreamweaver form and the code should look something like this:

Dreamweaver form 

As you can see we have a form and an empty select, which we have to transform in a dynamic select. To do a dynamic select (list/menu), at the bottom tab in Dreamweaver you should click on the "Dynamic" button:


Dynamic


In the pop-up window, let's select Recordset2 (this will return the name of the months)
 

Options


and set the fields for values and labels as in the screenshot below:
 

Values and Labels


Right now we have created the first dropdown for the starting date, you need to add a second select with dynamic values from the database using the same procedure. To have the form completed, we need to add a submit button:
 

Submit button

 

3. Generate the charts

As soon as you have the form done, it takes only 2 more steps to generate the chart. Open the FusionCharts for Dreamweaver tab (to locate the extension in Dreamweaver follow this link). Click on 'Insert dynamic simple chart'
 

Simple Dynamic Chart


'and select the chart type. For this example I'm using the 'column chart':
 

Chart type


Switch to the 'Data' tab to populate the chart. Select the 'Use data from already defined recordsets' radio button, at 'Define category' area select 'Recordset1' and 'id_month' and to define series select 'Recordset1' and 'value_prediction'.
 

Data tab


Click on 'Add as series' and in the new pop-up click 'Ok'
 

Data Series Pop-up


Click OK at the bottom - this will generate the chart code and insert it in the PHP page below the 2 drop-downs we created earlier. Press F12 to preview the result. This is how it should look like: a page with 2 drop-downs to select the starting month and the ending month and a chart with the sales volumes for all the months:
 

Chart


You can filter the chart results by selecting a start month and an end date from the drop-downs, something like this:
 

Chart results


If the preview looks fine, all you have to do is to upload the php file and the 'includes' folder that FusionCharts for Dreamweaver generates to the server.

 

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.