Chart Setup

ASP Report Maker supports charting by JavaScript (HTML5). 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.

 

General

Name 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.
Caption The caption of the chart. This is the actual caption to be displayed on the chart.
Chart type The type of the chart. Possible values are:
  • Column 2D Chart
  • Column 3D Chart
  • Bar 2D Chart
  • Bar 3D Chart
  • Pie 2D Chart
  • Pie 3D Chart
  • Line 2D Chart
  • Area 2D Chart
  • Doughnut 2D Chart
  • Doughnut 3D Chart
  • Pareto 2D Chart
  • Pareto 3D 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
  • Multi-series Bar 3D Chart
  • Multi-series Marimekko Chart
  • Multi-series Zoom Line Chart
  • Stacked Column 2D Chart
  • Stacked Column 3D Chart
  • Stacked Area 2D Chart
  • Stacked Bar 2D Chart
  • Stacked Bar 3D Chart
  • Bar 3D Chart
  • Multi-series 2D Single Y Combination Chart (Column/Line/Area)
  • Multi-series 3D Single Y Combination Chart (Column/Line/Area)
  • Multi-series Column 3D + Line Single Y Axis Chart
  • Stacked Column 2D + Line Single Y Axis Chart
  • Stacked Column 3D + Line Single Y Axis Chart
  • Multi-series 2D Dual Y Combination Chart (Column/Line/Area)
  • Multi-series Column 3D + Line Dual Y Axis Chart
  • Stacked Column 3D + Line Dual Y Axis Chart
  • Multi-series Zoom Line Dual Y Axis Chart
  • Candlestick Chart
Note Some charts support scrolling, 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.
Position

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

  • Top
  • Bottom
  • Left
  • Right

Default is Bottom.

NoteIf you put the chart on left or right of the report, the layout is done by Bootstrap Grid System. By default the report and chart(s) use the same number of columns (i.e. 6 or 4), you can adjust them by server event. If the report and chart are too wide, they may overlap, then you should not put the chart beside report.
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:

label1,label2,label3,...

If the labels contains comma, you can enter an array, e.g. Array("label1","label2","label3",...)

Width Width of the total area of the chart. Default is 600 (pixels).
Height Height of the total area of the chart. Default is 500 (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
Title 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
Title 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 dual Y axis 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
  • COUNT
  • 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 PowerCharts XT Candlestick charts only, NOT supported by Google Candlestick chart.
Series
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.

Note
  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, NOT supported by Google Candlestick chart)
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 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 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.

 

Advanced

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 Chart Attributes for list of the supported advanced properties of each chart type.

Notes
  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 without the report, see Exporting Charts as Image and PDF. Not supported by Google Charts.

Grid Component

If you are using FusionCharts, 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:

FusionCharts
Tutorial - Chart
Tutorial - Drill Down Report

 

 

 

 

 

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