Show All

Creating a chart block

A chart block displays quantitative information from multiple records in a database table as a chart or graph.

Namo Web Editor 8.database.output.4.1 Creating a chart block

A simple chart block in Preview mode

Namo Web Editor icon reveal Creating a chart blockData requirements

The database table you wish to use in a chart block must meet certain requirements:

  • The table must have at least one numerical field, which contains the quantitative values to be charted. However, if there is more than one number field, the chart block will only use one.
  • If you want the chart block to use seriesIn a chart, a series is a set of values that change over some variable, such as time or place. Some charts have just one series; others have multiple series that are compared to each other. or categoryIn a chart, a category is one value of the variable over which data values change. For example, in a chart comparing a company’s revenues in several years, each year is a category. labels taken from the database table, both series and category labels must exist in the table. If only one set of labels exist in the table, the chart block cannot use it and you must enter both sets of labels manually.
Namo Web Editor icon reveal Creating a chart blockExamples of valid database tables for use with a chart block

Example 1

Rec_ID

Country

Product

Unit_Sales

1

United States

Widgets

748

2

United States

Gewgaws

514

3

Sweden

Widgets

225

4

Sweden

Gewgaws

287

5

Japan

Widgets

369

6

Japan

Gewgaws

654

This table is ideal for use with a chart block. There is only one number field, and there are two string fields, one of which will be used as the source of seriesIn a chart, a series is a set of values that change over some variable, such as time or place. Some charts have just one series; others have multiple series that are compared to each other. labels and the other for categoryIn a chart, a category is one value of the variable over which data values change. For example, in a chart comparing a company’s revenues in several years, each year is a category. labels. The chart produced from this table can have either two series and three categories, or three series and two categories, depending on whether the countries are series and the products are categories, or vice versa.

Example 2

Rec_ID

Measurement

Month

Value

1

Mean Temperature

January

19

2

Mean Temperature

February

20

3

Mean Temperature

March

22

4

Mean Temperature

April

25

5

Mean Temperature

May

26

6

Mean Temperature

June

28

This table is also well suited for use with a chart block. In this table, there is one series (Mean Temperature) and six categories (the months).

Example 3

Rec_ID

Value

1

748

2

514

3

225

4

287

5

369

6

654

This table is suitable for use with a chart block, but since it provides only values and no labels, the series and/or category labels will need to be entered manually. The number of series and categories must also be specified manually.

Namo Web Editor icon reveal Creating a chart blockStarting the Database Wizard
  1. Place the insertion point anywhere in the current document.
  2. On the Develop menu, go to Database, click Block, and then Chart Block.
Namo Web Editor icon reveal Creating a chart blockStep 1: Document Type
  1. Click the Script type box and select the dynamic document standard you want to use.
  2. Click the Database box and select the appropriate connection method for your database. (If you chose ASP as the script type, you will only be able to select ODBC.)
  3. Click the Server OS box and select the operating system used by your Web server. The Database Wizard needs this information in order to determine which version of the chart drawing CGI program to save with the document.
  4. Click Next.
Namo Web Editor icon reveal Creating a chart blockStep 2: Data Source
  1. Do one of the following, depending on your selection in the Database box in Step 1 of the wizard:
    • If you chose ODBC: Click the Data source box and select the ODBC data source corresponding to your database.
    • If you chose MySQL:
      1. In the MySQL host box, enter the hostname or IP address and port number of your MySQL server, replacing the text within brackets. Also delete the brackets.
      2. In the MySQL DB name box, enter the name of your MySQL database.
    • If you chose one of the JDBC connection methods (for a JSP document): In the Data source URL box, replace the parameters in brackets with appropriate values for your database. Also delete the brackets.
  2. If your data source or database is password-protected, fill in the User ID and Password boxes.
  3. If you chose a connection method other than ODBC in Step 1 of the wizard, click the ODBC DSN for preview box and select the ODBC data source corresponding to your database.
  4. Click Next.
Namo Web Editor icon reveal Creating a chart blockStep 3: Database Fields
  1. For each database field you want to include in the chart block, select the field in the box on the left and click Add. To add all the fields in a table, select the table and click Add.
  2. Click Next.
Namo Web Editor icon reveal Creating a chart blockStep 4: Selection Statement
  1. If you added fields from more than one table in Step 3 of the wizard, enter a join condition in the Join box.
  2. If you want to filter the database records according to some criteria, enter a filter condition in the Filter box.
  3. If you want the records to be sorted a particular way in the chart block, enter a sort condition in the Sort by box.
  4. Click Next.
Namo Web Editor icon reveal Creating a chart blockStep 5: Chart Settings
  1. Under Source fields, click the Value box and select the numerical database field that will provide the numerical values for the chart block.
  2. Under Series and categories, click Retrieve from database if you want the chart block to obtain seriesIn a chart, a series is a set of values that change over some variable, such as time or place. Some charts have just one series; others have multiple series that are compared to each other. and categoryIn a chart, a category is one value of the variable over which data values change. For example, in a chart comparing a company’s revenues in several years, each year is a category. labels from the database. Otherwise, leave the Enter manually option selected and, in the Number of categories and Number of series boxes, enter the number of categories and series you want the values to be organized into. (See “Entering series and category labels manually” later in this section.)
  3. If you selected the Retrieve from database option, click the Series names box and select the database field that will provide the series labels, and then click the Category names box and select the database field that will provide the category labels.
  4. Click Next.
Namo Web Editor icon reveal Creating a chart blockStep 6: Chart Type
  1. Select a basic chart type by clicking one of the small icons at the top of the dialog box, and then select a subtype by clicking one of the large icons in the selection box.
  2. If you want the chart to have a 3D-like appearance, select the Use 3D effect check box, and then enter the desired values in the Depth of 3D effect and 3D perspective angle boxes.
  3. Click Next.
Namo Web Editor icon reveal Creating a chart blockStep 7: Chart Titles
  1. If you want the chart to have a title, in the Chart title box, type an optional title for the chart, and then under Chart title location, select one of the six available title positions.
  2. If you want titles for the X- and Y-axes of the chart, type them in the boxes under Axis titles.
  3. Click Finish.

When you finish the Database Wizard, the chart block will be inserted into the current document. In Edit mode, the block will initially look something like the following:

Namo Web Editor 8.database.output.4.2 Creating a chart block

Example of a chart block in Edit mode before modification

To preview the chart block with generated content, switch to Preview mode.

Namo Web Editor icon reveal Creating a chart blockEntering series and category labels manually

If the database table you use for a chart block does not contain appropriate seriesIn a chart, a series is a set of values that change over some variable, such as time or place. Some charts have just one series; others have multiple series that are compared to each other. and categoryIn a chart, a category is one value of the variable over which data values change. For example, in a chart comparing a company’s revenues in several years, each year is a category. labels, you must enter these labels manually and also specify how many series and categories the chart should have. Do the following:

  1. In Step 5 of the Database Wizard, under Series and categories, select Enter manually and enter the number of categories and series in the Number of categories and Number of series boxes.
  2. When you have completed the wizard, double-click the chart block to open the Chart Block Properties dialog box.
  3. Click the Series tab.
  4. Select the first series in the list box on the left, and then enter a label for it in the Series name box.
  5. Namo Web Editor 8.database.output.4.3 Creating a chart block
  6. Select the next series and enter its label in the Series name box. Repeat for each series.
  7. Click the Values tab.
  8. In the Category column of the table at the top, double-click the green cell in the first data row, as shown below, and enter the label for the first category.
  9. Namo Web Editor 8.database.output.4.4 Creating a chart block
  10. Namo Web Editor 8.database.output.4.5 Creating a chart block
  11. Double click the next green category cell and enter the label for the next category. Repeat for each category.
  12. When finished, click OK.
Namo Web Editor icon reveal Creating a chart blockChanging the appearance of a chart block

Chart blocks are similar in most ways to static charts created using the Chart Wizard. You can modify their appearance in many of the same ways. For information about changing the appearance of charts, see “Modifying chart properties“.

Namo Web Editor icon reveal Creating a chart blockChanging the CGI path for a chart block

When you create a chart block, Namo WebEditor saves a CGICommon Gateway Interface: a standard for using executable programs in Web pages to provide generated content, such as database-driven charts. program in the same folder as the document containing the block. This program actually draws the database-driven chart on the Web page when the document is opened in a browser. Normally, when you publish the document, you upload the CGI file along with the document to the same server folder. However, some Web servers require that CGI programs be kept in a special folder, separate from documents. (Often, this special folder is named “cgi-bin” and exists at the top level of the site’s file system.) If your Web server has such a requirement, you must modify the default CGI path for the chart block and copy the CGI file to the server’s CGI folder.

To modify the CGI path, do this:

  1. After you have completed the Database Wizard, double-click the chart block to open the Chart Block Properties dialog box.
  2. Click the Chart Block Settings tab.
  3. In the CGI path box, enter the path of your server’s CGI folder. You can enter either a relative path based on the document’s location, such as “../cgi-bin/”, or an absolute path from the root of the site’s file system, such as “/cgi-bin/”.
  4. Click OK and save the document.

When you publish the document, make sure to upload the CGI program file to your server’s CGI folder. You should find the CGI file in the document’s folder on your local file system, with a file name like “wed_chart_windows.cgi”. The last part of the file name (before the extension) varies depending on the server operating system you specified in Step 1 of the Database Wizard. If you cannot find the CGI file in the document folder, you can find a copy of it in the lib\DBWizard subfolder of the folder in which you installed Namo WebEditor. For example, if you installed Namo WebEditor in the default location on your C drive, the folder containing the CGI files is C:\Program Files\Namo\WebEditor 8\lib\DBWizard.

Namo Web Editor icon note Creating a chart blockIf you change the CGI path, you will no longer be able to preview the chart block on your computer unless you copy the CGI file to the same path on your local file system. For example, if you specified the CGI path as “/cgi-bin”, you should copy the CGI file to the C:\cgi-bin folder, creating the folder if necessary.

Related topics

Joining fields from two or more database tables

Modifying chart properties

Creating a chart block