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.
|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:
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.|
The position of the chart in the report. Possible values are:
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.
Specifies how to sort the data for charting. Possible values are:
|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. 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 of the chart, by default it is same as the summary value of the field. Supported values are:
|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 type||Specify how the series are defined. Possible values are:
|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.|
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.
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.|
There are many other advanced chart properties for configuring the chart. Select your chart and click the [Advanced] tab to setup.
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.