This getting started guide shows you how to create static and dynamic web charts using the Dynamic Web Charts editor. You will learn how to create a chart and customize the design to suit your needs.
- Dreamweaver CS4 or higher.
- Data Bridge (alternately, Dynamic Web Charts) installed and activated in Dreamweaver.
- Site defined in Dreamweaver with a saved PHP page - Watch video tutorial: Setting up a site in Dreamweaver.
- For database-driven web charts, a PHP connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
The Dynamic Web Charts editor requires a PHP page when creating both static and dynamic (database-driven) web charts. But only the page containing your chart needs to be of a dynamic document type. You do not need to change the document type used for your Dreamweaver site, nor configure any database connection, unless creating dynamic web charts.
The Dynamic Web Charts editor makes creating static or dynamic charts very straightforward. The following information is provided to help you decide which type of chart is best suited to your needs.
Static charts are easy to create. If you have the data that you wish to be displayed in your chart, you can create your chart in just a few minutes. Unlike dynamic charts, the data displayed in static charts is fixed, and can only be changed by manually updating your chart.
Static chart advantages:
- No database experience is necessary.
- Import data from CSV files or enter manually.
- Offers all the same customizations and design options as dynamic charts.
Dynamic Web Charts does most of the heavy lifting when creating dynamic charts. All you need to do is make sure your database contains all your data and create the necessary database connection in Dreamweaver before opening the Dynamic Web Charts editor.
Dynamic chart advantages:
- Save time by pulling data straight from your database.
- Charts automatically update when new records are inserted.
- Complex SQL queries are created for you.
You can access the Dynamic Web Charts editor in two locations within Dreamweaver:
- WebAssist > Dynamic Web Chart > Dynamic Web Chart
- Insert toolbar
With the Dynamic Web Charts editor open, click on the Chart tab to configure the following options:
- Choose from the list of styles and designs. All color and type options can be customized later in the wizard.
- Choose whether to save a preset, or to overwrite the preset currently being used.
- Choose chart type and subtype. Subtypes vary based on your chart type.
- Specify height and width for your chart. This can be changed later from within Dreamweaver.
- Enter chart title.
- Choose font size and color for chart title.
- Choose alignment for chart title.
For creating static charts, configure the following options in the Data tab:
The Dynamic Web Charts editor requires a PHP page, even if you are creating a static chart.
- Choose the Static radio button. This should be selected by default.
- If you wish to import data from a CSV file, select Get data from CSV.
- Edit or manually enter data for each label in the Labels field, separated by the pipe character: |
- Edit or manually enter data for each value in the Values field, separated by the pipe character: |
- Edit or manually enter URLs in the links field for each data point, separated by the pipe character: |
- Click Apply to update the chart preview.
- In the Dataset label field, enter a name for the dataset.
- Specify the font size and color for the Dataset label.
- Choose a color for the Line/Fill of your chart.
- Choose a color for the Outline of your chart. This option is only available if you have specified a chart type or subtype that contains an outline.
For creating dynamic charts, configure the following options in the Data tab:
You must have created the necessary database connection before entering the Dynamic Web Charts wizard.
- Choose the Dynamic radio button.
- Select the database connection you wish to use.
- Choose the database table you wish to use from the Data source menu.
- Choose the database column you wish to use as your X Axis values from the X Label menu.
- Optional: Choose a grouping option from the group window.
- Optional: When grouping by a date column, specify a date range to be included in your chart.
- Choose a database column you wish to use as your Y Axis values from Y Value menu.
- Choose a Calculation method for the Y Value. Calculation options are only available when a grouping option has been selected for the X Label.
- In the Dataset label field, enter a name for the dataset.
- Choose any filtering options from the Filter menu.
- Choose any sorting options from the Sorting menu.
- Specify the font size and color for the Dataset label.
- Choose a color for the Line/Fill of your chart.
- Choose a color for the Outline of your chart. This option is only available if you have specified a chart type or subtype that contains an outline.
In the Axes tab, configure the following options:
The Axes tab is not available when creating Pie charts.
- Enter legend name for the X and Y axes.
- Choose font size and color for both legends.
- Choose font size and color for the X and Y axis labels.
- Select Orientation for the X Axis labels.
- Specify how many X Axis data points to label. Leaving this field blank will label all data points.
- Choose color for both X and Y Axes
- Choose grid color for both X and Y Axes.
- Choose to show Y Axis on left or both left and ride sides.
In the Background tab, configure the following options:
- Choose a Background color for your chart.
- Choose a Background image that you wish to be used for your chart.
- Choose the positioning of your background image from the two menu lists.
- Select whether to have a solid inner background color or use a gradient for your color.
- Solid: Choose the desired color from the color picker.
- Gradient: Choose the Orientation option for the gradient. Select the start color and the end color.
Click OK to create your chart.
To re-enter the editor after creating your chart, simply click within the chart in Dreamweaver, and from the Properties Inspector choose Edit.
The XML Editor allows you to make advanced customizations to the design and data of your chart. This tool is designed to help you understand how the chart XML is structured and what sections need to be modified to achieve the desired result.
Accessing the XML Editor
- Select your chart from within Dreamweaver.
- Choose Edit in XML Editor.
- The data file used to display your chart data is opened and the XML Editor floating panel will display.
Making your changes
- Select the XML node from within the XML Editor that you wish to modify.
- Choose Add, Delete, Edit, Cut, Copy, or Paste.
- When choosing Add, a menu displays all available options for adding to the selected XML node.
- When choosing Edit, your cursor will be placed in the appropriate location of the data file for you to manually edit the selected XML node.
Saving your changes
After making your changes through the XML Editor, you can save your changes as a new preset that can be used to create additional charts.
- Choose the Save option from the XML Editor.
- Enter a name for the new preset or leave the current preset name to overwrite existing preset.
- Click OK.
If using the XML Editor to make advanced modifications to the data in your chart, you may not be able to re-enter the Dynamic Web Charts editor to modify your chart as the data may not conform to the interface options.
What do you need to start?
Print tutorial
