Chart Setup

Note From v8, all charts are JavaScript charts except Candlestick, Funnel and Gantt charts. Read FusionCharts for more information.

ASP Report Maker supports charting. It is possible to create more than one charts for each report. (Note that negative values cannot be plotted.)

After loading the database, the database objects (tables, views, custom views and reports) will be shown in the left pane (the database pane). Click on any database object to go to the Chart Setup Page for that object at any time. The Chart Setup Page is next to the Field Setup page, if the active page is Field Setup Page, click the [Chart] tab to switch to the Chart Setup Page.

The Chart Setup pages consists of two section. The left section is a list showing all charts for the report. The right section is a panel showing various properties of the selected chart.

In the left section, the toolbar has the following buttons:

Add a new chart
Remove selected chart
Move the selected chart up. The sequence determines the displaying order of the charts in the generated script and in the menu.
Move the selected chart down. The sequence determines the displaying order of the charts in the generated script and in the menu.
Duplicate the selected chart as a new chart and copy the chart properties. Since each chart has many properties, this feature enables you to create a new chart faster.

To setup chart properties, select a chart in the left section first, then you can modify its properties in the right panel.

You should become familiar with the charting terminology so that you'll know what to look for when you want to edit a chart. Read FusionCharts first if necessary.




The name of the chart.

This is an internal name of the chart for referencing the chart, it is recommended that you use alphanumerical characters only for the name, also make sure the chart names for each report is unique. This is analogous to field name of a field in a database table.


The caption of the chart.

This is the actual caption to be displayed on the chart and is analogous to field caption of a field in a database table.

Chart type

The type of the chart. Possible values are:

  • Column 2D Chart
  • Column 3D Chart
  • Pie 3D Chart
  • Pie 2D Chart
  • Line 2D Chart
  • Bar 2D Chart
  • Area 2D Chart
  • Doughnut 2D Chart
  • Candlestick (Flash chart)
  • Funnel Chart (Flash chart)
  • Multi-series Column 2D Chart
  • Multi-series Column 3D Chart
  • Multi-series Line 2D Chart
  • Multi-series Area 2D Chart
  • Multi-series Bar 2D Chart
  • Stacked Column 2D Chart
  • Stacked Column 3D Chart
  • Stacked Area 2D Chart
  • Stacked Bar 2D Chart
  • Multi-Series Column 2D Line Dual Y Chart
  • Multi-Series Column 3D Line Dual Y Chart
  • Doughnut 3D Chart
  • Multi-series Bar 3D Chart
  • Stacked Bar 3D Chart
  • Bar 3D Chart
  • Scroll Charts - Note that not all charts support scrolling, only the Column 2D, Line 2D and Area 2D charts are scrollable. To enable scrolling, go the [Advanced] tab (see below) and set numVisiblePlot to a value larger than 0.
Show Show or hide the chart in the report page.

The position of the chart in the report. Possible values are:

  • Top
  • Bottom
  • Left
  • Right

Default is Bottom. Note that by default the dimension of each chart is 550px(W) x 450px(H), if you put the chart on left or right of the report, the user may to need to scroll horizontally to view the chart.

Sort Type

Specifies how to sort the data for charting. Possible values are:

  • NO SORT - default, data not sorted
  • X ASC - sort by category labels in ascending order
  • X DESC - sort by category labels in descending order
  • Y ASC - sort by values in ascending order
  • Y DESC - sort by values in descending order
  • RUN TIME - sort by above in runtime, a combobox will be generated above the chart for user to choose how to sort
Custom sort sequence

Custom sort the data for charting. You can enter comma separated values, e.g. if Sort Type is X ASC or X DESC, the chart is sorted by category labels, then you can enter your custom order by:


If the labels contains comma, you can enter an array, e.g.


Width Width of the total area of the chart. Default is 550 (pixels).
Height Height of the total area of the chart. Default is 450 (pixels).
Background color

The background color of total area of the chart

Show labels Show labels on the (usually horizontal) axis that displays the category labels for all the data series.
Show values

Show values as data labels at data points to indicate the specific value or category.

Show hover Show hovering box when the user moves the mouse cursor over the data point. The hovering box shows the label and value of the data point.
Transparency (%) Transparency of the data point. 0% is transparent, 100% is opaque.
Color palette

Specify colors of the data points. You can customize your own color palette by clicking [...] button and change the colors.

Note Alternatively, you can use FusionCharts' built-in palette attribute, in such case, set this setting as empty.
Category (X) Axis

X-axis (category) title. Displays the category of the plotted data.

Category field The field that contains the categories of the chart
Value (Y) Axis

Y-axis (value) title. Displays a description for the scale of values against which the data is plotted.

Title 2

Secondary Y-axis (value) title 2. For use with Multi-Series Column 2D/3D Line Dual Y charts only.

Value field The field that contains the values of the chart
Summary Value

Summary value of the chart, by default it is same as the summary value of the field. Supported values are:

  • SUM
  • AVG
  • MIN
  • MAX
Open field The field that contains the "open" values of the chart. For Candlestick charts only.
High field The field that contains the "high" values of the chart. For Candlestick charts only.
Low field The field that contains the "low" values of the chart. For Candlestick charts only.
Close field The field that contains the "close" values of the chart. For Candlestick charts only.
Name field

The field that contains the names of the vertical lines. Vertical lines are only drawn if the field value is not empty. For Candlestick charts only.

Series type

Specify how the series are defined. Possible values are:

  • Series Field - Values for all series are from the same field. The series are defined by a field that contains the series name.
  • Series Per Field - Values of each values are from different columns of the source table.
Series field

Specify the field that contains the series name when Series type is set as Series Field.

Series fields

Specify the field names of each series when Series type is set as Series Per Field. Click the [...] button to open the setup from and select the column for each series.

Drill Down
Detail Report

You can drill down the chart values (Y Axis) by setting up a detail report.

To setup a detail report, click the [...] button to open the Drill Down setup form. Select a report as detail report, then select the parameters. Select Source Field from the current report and Target Field from the detail report. The report will then build hyperlinks for the field values to pass the selected field values from the current repor to the detail report.

To make the detail report shows meaningful details, you need to pass the required parameters from the current report to the detail report. Select the field values you need to pass, make sure they are sufficient for selecting the relevant records in the detail report.

  1. To drill down a chart value, you should at least pass the Category field as parameter.
  2. If you use Series Field (see above), you should also pass the Series field(s).

Setting up of detail report for chart is exactly same as setting up detail report for reports, see Tutorial - Drill Down Report. If you want to drill down to another chart directly, you can create a report and disable the Show Report option, see Table Setup.

Trendline (up to 4 trendlines)
Show Show the trend line
Start value

The starting y-axis value for the trendline. Say, if you want to plot a slanted trendline from value 102 to 109, the startValue would 102.

End value The ending y-axis value for the trendline. Say, if you want to plot a slanted trendline from value 102 to 109, the endValue would 109. If you do not specify a value for endValue, it would automatically assume the same value as startValue.

Color of the trend line and its associated text.

Display value If you want to display a string caption for the trend line by its side, you can use this attribute. Example: displayValue='Last Month High'. When you don't supply this attribute, it automatically takes the value of startValue.

Thickness of the trend line

Is trend zone Whether the trend would display a line, or a zone (filled colored rectangle).
Show on top

Whether the trend line/zone would be displayed over other elements of the chart.

Alpha Alpha (transparency) of the trend line (%)
Tool Text Specifies the text that will be displayed when mouse is hovered over the trend line.
Value on right Renders the trend-line label on the right. Default is to render on the left.
Dashed Make trend line dashed. Default is normal.
Dash length Sets the length of each dash of a trend line(in pixels).
Dash gap Sets the gap between two consecutive dashes in trend lines (in pixels).
For secondary axis Show the trend line on the secondary y-axis. By default, the trend line shows up on the primary y-axis.



There are many other advanced chart properties for configuring the chart. Select your chart and click the [Advanced] tab to setup.

Note Not all displayed advanced properties are supported by each chart type. Refer to FusionCharts documentation for list of the supported advanced properties of each chart type.

  1. If a setting is a checkbox (boolean) and it is displayed as null (not checked and not unchecked), that means it will use the chart's default value.
  2. If a setting is a number and it is displayed as 0 in gray (it does not mean the real zero, which will be displayed in black), that means it will use the chart's default value.
  3. The advanced chart setting exportEnabled is for exporting the chart only, see FusionCharts documentation.

Grid Component

If you are using FusionCharts (not FusionCharts Free), the advanced chart properties include Grid Component which can display single-series data in a tabular format. You can combine the grid component with any single-series chart to form a good looking combo.

To enable Grid Component for your singe-series chart, scroll to the Grid Component section under the Advanced table, enable useGridComponent property and then set the related properties under it. Refer to FusionCharts for details of the properties.


Also See:

Tutorial - Chart
Tutorial - Drill Down Report






 ©2006-2017 e.World Technology Ltd. All rights reserved.