close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Getting started with Dynamic Web Charts

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Dreamweaver

rating

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.

arrow downWhat do you need to start?

  1. Dreamweaver CS4 or higher.
  2. Data Bridge (alternately, Dynamic Web Charts) installed and activated in Dreamweaver.
  3. Site defined in Dreamweaver with a saved PHP page - Watch video tutorial: Setting up a site in Dreamweaver.
  4. 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.

arrow downStatic vs 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:

  1. No database experience is necessary.

  2. Import data from CSV files or enter manually.

  3. 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:

  1. Save time by pulling data straight from your database.

  2. Charts automatically update when new records are inserted.

  3. Complex SQL queries are created for you.

arrow downOpen Dynamic Web Charts editor

You can access the Dynamic Web Charts editor in two locations within Dreamweaver:

  1. WebAssist > Dynamic Web Chart > Dynamic Web Chart
  1. Insert toolbar

arrow downCreate a web chart

With the Dynamic Web Charts editor open, click on the Chart tab to configure the following options:

  1. Choose from the list of styles and designs. All color and type options can be customized later in the wizard.

  2. Choose whether to save a preset, or to overwrite the preset currently being used.

  3. Choose chart type and subtype. Subtypes vary based on your chart type.

  4. Specify height and width for your chart. This can be changed later from within Dreamweaver.

  5. Enter chart title.

  6. Choose font size and color for chart title.

  7. 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.
  1. Choose the Static radio button. This should be selected by default.

  2. If you wish to import data from a CSV file, select Get data from CSV.

  3. Edit or manually enter data for each label in the Labels field, separated by the pipe character: |

  4. Edit or manually enter data for each value in the Values field, separated by the pipe character: |

  5. Edit or manually enter URLs in the links field for each data point, separated by the pipe character: |

  6. Click Apply to update the chart preview.

  7. In the Dataset label field, enter a name for the dataset.

  8. Specify the font size and color for the Dataset label.

  9. Choose a color for the Line/Fill of your chart.

  10. 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.
  1. Choose the Dynamic radio button.

  2. Select the database connection you wish to use.

  3. Choose the database table you wish to use from the Data source menu.

  4. Choose the database column you wish to use as your X Axis values from the X Label menu.

  5. Optional: Choose a grouping option from the group window.

  6. Optional: When grouping by a date column, specify a date range to be included in your chart.

  7. Choose a database column you wish to use as your Y Axis values from Y Value menu.

  8. Choose a Calculation method for the Y Value. Calculation options are only available when a grouping option has been selected for the X Label.

  9. In the Dataset label field, enter a name for the dataset.

  10. Choose any filtering options from the Filter menu.

  11. Choose any sorting options from the Sorting menu.

  12. Specify the font size and color for the Dataset label.

  13. Choose a color for the Line/Fill of your chart.

  14. 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.
  1. Enter legend name for the X and Y axes.

  2. Choose font size and color for both legends.

  3. Choose font size and color for the X and Y axis labels.

  4. Select Orientation for the X Axis labels.

  5. Specify how many X Axis data points to label. Leaving this field blank will label all data points.

  6. Choose color for both X and Y Axes

  7. Choose grid color for both X and Y Axes.

  8. Choose to show Y Axis on left or both left and ride sides.


In the Background tab, configure the following options:

  1. Choose a Background color for your chart.

  2. Choose a Background image that you wish to be used for your chart.

  3. Choose the positioning of your background image from the two menu lists.

  4. Select whether to have a solid inner background color or use a gradient for your color.

    1. Solid: Choose the desired color from the color picker.
    2. Gradient: Choose the Orientation option for the gradient. Select the start color and the end color.


Click OK to create your chart.

arrow downRe-enter Dynamic Web Charts editor

To re-enter the editor after creating your chart, simply click within the chart in Dreamweaver, and from the Properties Inspector choose Edit.

arrow downXML Editor

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

  1. Select your chart from within Dreamweaver.

  2. Choose Edit in XML Editor.

  3. The data file used to display your chart data is opened and the XML Editor floating panel will display.


Making your changes

  1. Select the XML node from within the XML Editor that you wish to modify.

  2. Choose Add, Delete, Edit, Cut, Copy, or Paste.

    1. When choosing Add, a menu displays all available options for adding to the selected XML node.

    2. 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.

  1. Choose the Save option from the XML Editor.

  2. Enter a name for the new preset or leave the current preset name to overwrite existing preset.

  3. 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.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.