Getting Started With Dynamic Web Charts

This Getting Started Guide shows you how to start creating your static or dynamic web charts using Dynamic Web Charts. Here you will see how to create your chart (static or dynamic), and how to customize the design to suit your needs.

Static or Dynamic?

Dynamic Web Charts makes creating static or dynamic charts very straightforward. However, you may have a hard time deciding which is best for you. The following information is provided to help you decide which is best suited to your needs.

Static Charts

Static charts are very 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.

Why create static charts?
  • No database experience necessary
  • Import data from CSV files, or enter manually
  • All the same customizations and design options as dynamic charts
Note: Dynamic Web Charts requires that you are using a dynamic document type even if you are not creating a dynamic chart.



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

Why create dynamic charts?
  • Save time by pulling data straight from your database
  • Charts automatically update when new records are inserted
  • Complex SQL queries are created for you


Before you get started

Dynamic Web Charts requires that you use a dynamic document type such as PHP or ASP when creating your charts. This applies to all static or dynamic charts. For those who do not typically use dynamic document types when building or designing websites, the following information explains what you will need to do before you start creating your chart.
  1. Save your page as PHP or ASP
    Most servers are configured to handle either PHP or ASP sites. If you cannot get your page to load on your server, try saving the page as a different document type.
  2. Testing and Publishing your site
    If you have not configured your testing server on your local machine, you will be unable to view PHP or ASP pages locally. For this reason, you may need to publish your chart page to your remote server for testing.
Note: 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 charts).



Creating a chart

The following steps guide you through creating a simple chart. For information on creating more complex charts, see our Dynamic Web Charts Solution Recipe.
  1. Choose the Insert Dynamic Web Chart option from WebAssist category of the Insert bar.
    • Chart tab
      In the Chart tab configure the following options:
      • Style and Design: Choose from the list of styles and designs.
        All color and type options can be customized later in the wizard.
      • Presets: 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.
    • Data tab – Static Charts
      The following details the options presented in the Data tab for creating static charts:
      • 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.
    • Data tab – Dynamic Charts
      The following details the options presented in the Data tab for creating dynamic charts.
      • Choose the Dynamic radio button
      • Select the database connection you wish to use.
        You must have created the necessary database connection before entering the Dynamic Web Charts wizard.
      • 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 you 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.
    • Axes tab
      In the Axes tab, configure the following options:
      Note: 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.
    • Background tab
      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.
Once you have configured your chart design and data to suit your needs, click OK to have your chart created.



Wizard Reentry

Once you have created your chart, to re-enter the wizard, simply click once to select the chart in Dreamweaver, and from the Properties Inspector choose Edit in Wizard.



Using the XML 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
    The data file used to display your chart data is opened and the XML Editor floating panel will display.


Making 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.
    • 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.
  1. Choose the Save option from the XML Editor.
  2. Enter name for new preset or leave the current preset name to overwrite existing preset.
  3. Click OK.
Note: If using the XML Editor to make advanced modifications to the data in your chart, you may not be able to reenter the Dynamic Web Charts wizard to modify your chart as the data may not conform to the interface options.