ChartsPLUS 2.0 User Guide PDF

Archius ChartsPLUS 2.
0
____________________________________________________________________________________________________________
CHARTSPLUS 2.0 USER GUIDE
1|Page
Archius ChartsPLUS 2.0
____________________________________________________________________________________________________________
TABLE OF CONTENTS
ABOUT CHARTSPLUS 2.0 4
CHARTS AVAILABLE IN CHARTSPLUS 2.0 5
CHAPTER 1: CHARTSPLUS 2.0 INSTALLATION AND UPDATING 6
Installing ChartsPLUS 2.0 on Design Studio 6
Installing ChartsPLUS 2.0 on BI Platform 8
Updating ChartsPLUS 2.0 on BI Platform 9
CHAPTER 2: WORKING WITH CHARTSPLUS 2.0 11
Adding ChartsPLUS 2.0 to Analysis Application 11
Assigning Data Source to ChartsPLUS 2.0 11
CHAPTER 3: GENERAL PROPERTIES OF CHARTSPLUS 2.0 12
General 12
Data Binding 12
Display 13
Layout 13
CHAPTER 4: ADDITIONAL PROPERTIES OF CHARTSPLUS 2.0 14
ICONS 14
CATEGORIES - INTRODUCTION 15
CATEGORIES - DETAILED 16
DATA 16
Data 16
Input Help 16
Hierarchy 17
CONFIG 19
CONFIG PROPERTIES OF COLUMN/BAR/LINE/AREA 19

CONFIG PROPERTIES OF XY CHARTS 60
CONGIF PROPERTIES OF SLICED CHARTS 84
CONGIF PROPERTIES OF GAUGE CHARTS 87
GENERAL 95
General 95
Number Prefixes 98
Balloon 98
Free Labels 100
2|Page
____________________________________________________________________________________________________________
Export 101
Titles 103
COLORS 103
LEGEND 104
EVENTS 109
WIZARDS 111
CHAPTER 5: CHARTSPLUS 2.0 FAVORITES 114

WORKING ON FAVORITES 114
Saving Colors as Favorite 114
Saving Graph as Favorite 114
Applying a Saved Favorite 115
Deleting a saved Favorite 116
Exporting Favorites 116
Importing Saved Favorites 118
3|Page
____________________________________________________________________________________________________________
About ChartsPLUS 2.0

Archius ChartsPLUS™ 2.0 is an add-on software product that greatly enhances the visualization capabilities
of SAP BusinessObjects Design Studio, while reducing the overall time required to develop dashboards.
With the addition of more than 60 chart types and the ability to modify nearly 250 different chart
properties, developers can design state of the art visualizations to meet almost any business need.
Developers are also provided with an API library that can be used for further extending charting capabilities
and more importantly the ability to modify chart properties during runtime.
4|Page
____________________________________________________________________________________________________________
Charts available in ChartsPLUS 2.0

The following are the Chart types and their available list of all the Charts under each Chart type.
(Note: Except Gauge we can convert any of the Available charts in to 3D chart by setting 3D Depth and 3D Angle
property greater than zero in Appearance section under CONFIG Category)
Chart Type Available Charts

 Bullet Charts
Wizards  Combination Chart
 Clustered Column
 Stacked Column
Column
 100% Stacked Column
 Clustered Bar
 Stacked Bar
Bar
 100% Stacked Bar
 Clustered Line
 Stacked Line
Line
 100% Stacked Line
 Clustered Area
 Stacked Area
Area
 100% Stacked Area
 Scatter Charts
XY  Bubble Charts
 Pie Charts
 Donut Charts
Sliced
 Funnel Charts
Gauge  Angular Gauge
5|Page
____________________________________________________________________________________________________________
Chapter 1: ChartsPLUS 2.0 Installation and Updating

Apart from the standard components you can also install 3rd party components in Design Studio which are
developed with the Design Studio SDK (Software Development Kit). You can create and execute analysis
applications using these SDK extensions.
Installing ChartsPLUS 2.0 on Design Studio

To Install ChartsPLUS 2.0 in Design Studio 1.5 the following procedure need to be followed:
 Log on to Design Studio, from the Menu bar click on Tools >> Install Extension to Design Studio.
 From the Choose Installation Source Dialogue box you can either enter the given URL or if the
ChartsPLUS 2.0 zip file is available on your system you can browse and select the file by clicking
Archive Button and then Click OK.
 Select ChartsPLUS 2.0 Feature in the Install dialogue box and click Finish.
6|Page
____________________________________________________________________________________________________________
 Select the ChartsPLUS 2.0 check box and click Next.
 Review the Item and Click Next.

 Accept the terms of the license agreements and click Finish.
 In the Security Warning dialogue box click OK and click Yes in the Software Updates dialogue box
to restart the Application.
 After Restart you could able to see ChartsPLUS 2.0 SDK under Archius Components in the
Components list.
7|Page
____________________________________________________________________________________________________________
First Look of Installed ChartsPLUS 2.0
Installing ChartsPLUS 2.0 on BI Platform

To launch applications that contain ChartsPLUS 2.0 on BI platform, first you need to install this locally
installed extension on BI platform.
 Log on to Design Studio in SAP Business Objects BI Platform Mode with your credentials.
 From the Menu bar click on Tools>> Platform Extensions.
 In the Platform Extensions dialogue box, under Extensions Installed on Local Computer select
ChartsPLUS 2.0 and click Install on Platform button.
8|Page
____________________________________________________________________________________________________________
 Click OK on Restart Required dialogue box and Restart the Platform manually in order to take
place the changes made.
Updating ChartsPLUS 2.0 on BI Platform

To update ChartsPLUS on BI platform follow the below steps:
 Open the Design Studio application in BI platform mode.
 From Menu bar click Help>> About>> Installation Details.
 Click on ChartsPLUS 2.0 and click Update.
9|Page
____________________________________________________________________________________________________________
 If there were any updates available they will be installed or else you get an information pop up as
“No Updates were found”.
10 | P a g e
____________________________________________________________________________________________________________
Chapter 2: Working With ChartsPLUS 2.0

This chapter explains how to add ChartsPLUS 2.0 component to Analysis application and then how to assign
data source to it.
Adding ChartsPLUS 2.0 to Analysis Application

Like any other component in Design Studio you can add ChartsPLUS 2.0 component to the Layout Editor
from any of the following ways:
1. Click on ChartsPLUS 2.0 component under Archius Components in components view, drag and drop it
on the Layout Editor.
2. Drag and Drop ChartsPLUS 2.0 component from Components view to Layout folder in Outline view
section.
This will add ChartsPLUS 2.0 component to the Analysis Application
Assigning Data Source to ChartsPLUS 2.0

Adding Data source to ChartsPLUS can be done by any one of the following methods.
1. Click on the Data Source that is present under Data Source folder in Outline View, drag and drop it on
ChartsPLUS component.
2. Click on ChartsPLUS under Properties>> Data Binding>> Data Source>> Select the required data
source from the Dropdown.
3. You can also add data source by selecting the Add from the dropdown of the data binding property
and browsing the connection and Data source from the platform.
4. Drag the Data Source from the Data source folder and drop it on the ChartsPLUS component in the
Layout folder of the Outline view.
11 | P a g e
____________________________________________________________________________________________________________
Chapter 3: General Properties of ChartsPLUS 2.0

This Chapter deals with the General Properties of ChartsPLUS 2.0 and their functions
General
 Name: Enables to set the Name of the Chart.
 Type: Displays the Type to which the Component belongs to.
 Visible: Enables to set the visibility of the component (True is Visible, false is Hidden)
Data Binding
 Data Source: Enables to select the Data source to assign to the Chart from the available Data
sources that are shown by clicking the Dropdown.
 Data Selection: Enables to select the required data from the selected data source that need to be
presented in the Chart.
12 | P a g e
____________________________________________________________________________________________________________
Display
 CSS Class: Enables to specify the CSS file path to assign to ChartsPLUS.
Layout
 Enables to set Margins (Top, Left, Bottom, Right, Width, Height) of ChartsPLUS 2.0
13 | P a g e
____________________________________________________________________________________________________________
Chapter 4: Additional Properties of ChartsPLUS 2.0

Apart from the Properties in the Properties view, the ChartsPLUS 2.0 Additional Properties consists of a wide
range of options to customize the charts as per the user requirement.
ICONS
The Icons present to the Top right of the ChartsPLUS have the below functionalities.
Enables to search the word that is given from all the additional properties of
ChartsPLUS and return those properties.
Enables to reduce the design time by saving a configuration that you have made, and
then apply to other complex properties of the same type.
Ex: Graphs, Value Axes, Guides, Gauge Axes and Arrows, Colors etc.
Display the list of available charts in ChartsPLUS 2.0
Displays the List of Categories and their Subsections present in Additional properties.
14 | P a g e
____________________________________________________________________________________________________________
CATEGORIES - INTRODUCTION
The Additional Properties of ChartsPLUS 2.0 are divided in to following categories which have unique set of
properties to customize ChartsPLUS.
 DATA: Enables to set the Data related properties like Data Selection, Whether to Show/Hide totals,
setting Hierarchies etc.
 CONFIG: This section allows you set the properties related to Charts Axes, Graphing, Appearance, Chart
Interactivity and Conditional Formatting of values.
The CONFIG properties varies with the Chart Type selected, of which properties of Column, Line, Bar and
Area are similar where as XY, Sliced and Gauge properties varies.
 GENERAL: The General properties deals with setting properties related to Background color, Border
colors, Fonts, Number Prefixes, Balloons, Free labels, Export types and Titles.
 COLORS: This section allows to select the color themes available in the ChartsPLUS like Single colors, SAP
Colors, Color Brewer. You can also define your own color set and save it as Favorites or can select any
favorite set if already available.
 LEGEND: Enables to set all the properties related to Legend like Appearance, Positioning, Markers etc.
 EVENTS: This section enables to set the actions using BIAL script that need to be taken place when the
user clicks on Graphs, on Zoom Scroll or when user Expand or Collapse a Hierarchy.
15 | P a g e
____________________________________________________________________________________________________________
CATEGORIES - DETAILED
DATA
Data
This Section allows to set the basic properties related to data that is displayed in ChartsPLUS.
PROPERTY TYPE DEFAULT DESCRIPTION API

Click on the button to allow the selection of
Data Selection data
required data from the available data source.
When set, ChartsPLUS will ignore results in the
Ignore Totals Boolean True ignoreTotals
data source that are sub-totals and overall totals.
When set, ChartsPLUS will ignore hierarchy
Ignore Expanded Boolean True nodes that have been expanded, essentially then ignoreExpandedNodes
Nodes
only rendering collapsed nodes and leafs.
When set, data source rows are interpreted as
Swap Axes Boolean False columns, and data source columns are swapAxes
interpreted as rows.
Character string used between each dimension
Dimension String _bs_ dimensionSeparator
Separator field in the resulting concatenated string.
Uses internal placeholder data when no data
Use Mock Data Boolean True useMockData
source is specified.
Input Help
When you hover over a property in Additional property pane you can see the definition of the property
and also the BIAL script for the property. In this case the cursor is hovered on Ignore Totals property and
you can observed the help pop-up got displayed as below:
16 | P a g e
____________________________________________________________________________________________________________
You can use the Setter or Getter property in the script editor of any of the component based on the
requirement. In this case the Ignore Totals script is added in Button Component as below:
Hierarchy
ChartsPLUS enables to display Hierarchies in Charts by which you can drill down or dill up data during analysis. The
following properties need to be set to enable Hierarchies.

Specify a hierarchy dimension to activate
Hierarchy
Dimension drilldown navigation on the Design Studio data dimHierarchy
(Optional) source.
Hierarchy Level Number 1 Starting Hierarchy Level for Chart to focus on. currentLevel
Whether to plot collapsed nodes above current
Plot Nodes Above Boolean False useHigherNodes
hierarchy level focus.
Whether to plot collapsed nodes below current
Plot Nodes Below Boolean False useLowerNodes
hierarchy level focus.
17 | P a g e
____________________________________________________________________________________________________________
Whether to automatically filter Hierarchy Node

Filter on
Boolean False filterOnDrill
Hierarchy Drill during drilldown.
Setting Hierarchy in ChartsPLUS 2.0:

1. Add ChartsPLUS 2.0 to the Analysis Application.
2. Assign a Data source that contains Hierarchies in it.
3. In the Additional Properties of ChartsPLUS 2.0 under DATA>> Hierarchies>> Select the Hierarchy
Dimension from the Dropdown.
4. Set the required Hierarchy Level. Ex: 1.
5. Enable the properties Plot Nodes Above, Plot Nodes Below, Filter on Hierarchy Drill.
6. Execute the application and click Text of Columns, it will drill down to next level.
Ex:
Hierarchies Displayed in ChartsPLUS 2.0
18 | P a g e
____________________________________________________________________________________________________________
CONFIG
The CONFIG category is sub divided in to below sections:
 Axes
 Graphing
 Appearance
 Interactivity
 Conditional Formatting
These CONFIG properties varies based on the Chart type selected.
CONFIG PROPERTIES OF COLUMN/BAR/LINE/AREA

The CONFIG properties of Column/Bar/Line/Area are similar and they were explained in detail below:
Axes
The Axes section deals with setting Category Axis, Guides and Value Axes in ChartsPLUS.
Category Axis
INITIAL ZOOM
Enables to specify whether to show all the graph or a part of it on start up.

Enables to show all of the graphs, Disable
Show All Boolean True this for the 'Start Index' and 'End Index' showAll
properties to apply.
Start Index Number 0 Enable to set the Start index zoom startIndex
End Index Number 20 Enable to set the End index zoom endIndex
CATEGORIES
Enables to specify the Category field that need to be assigned for Aggregation.

Enables to select the Field that acts as
Category Axis and for aggregation.
Field Type: Filed type 'By Name' maps a field
Filed Type: Name by its key (e.g. 0AMOUNT). 'By Position'
String
Category Field Field Name: All categoryField
maps a field by its ordinal position
Dimensions
beginning at position 0 (First Column).
'Static' allows for placement of a constant
value such as '1' which can serve useful for
19 | P a g e
____________________________________________________________________________________________________________
hard-coded targets. 'By Name' is useful

when you want to guarantee a Graph
configuration to a specific named column,
whereas 'By Position' is useful when your
chart should flex to ad-hoc navigations
instead.
Field Position: Position of Column to map
to, beginning at the first column (0).
When enabled, will allow aggregation to
take place by the 'Category Field'
designated on the category axis. This allows
Category categoryAggregation
Boolean True
Aggregation you chart one dimension even when the
data source contains more than one
dimension in its rows.
Max Visible Maximum number of visible categories. (0 =
maxSelectedSeries
Categories Number 0
All)
GENERAL
Enables to customize Category Axis and Category Title of the Chart.

Specifies thee position of the Axis from the
Possible values 'top', 'bottom', 'left', 'right'.
Axis Position Left If axis is vertical, default position is 'left'. If

axis is horizontal, default position is
'bottom'.
Specifies whether the graph should start on
axis or not. In case you display columns, it is
Start on Axis Boolean False recommended to set this to false. If parse startOnAxis
Dates is set to true, start On Axis will always
be false, unless equal Spacing is set to true.
Title String Enable to set the title of the axis. title

Title Bold Boolean False Specifies if the title should be bold or not. titleBold
Enables to set the color of axis title. Will use
Title Color Color titleColor
text color of chart if not set any.
Specifies the Font size of axis title. Will use
Title Font Size Number font size of ChartsPLUS two pixels if not set titleFontSize
any.
20 | P a g e
____________________________________________________________________________________________________________
APPEARANCE
Enables to customize the Appearance of the Category Axis.

Axis Alpha 100% Sets the opacity of the Axis. axisAlpha
Axis Color Color #000000 Enables to set the color of Axis. axisColor
Axis Thickness Number 1 Enables to set the Thickness of Axis. axisThickness
Position of an axis tick. Works only with
Tick Position Middle tickPosition
non-date-based data.
Tick Length Number 0 Specifies the length of Tick Marks. tickLength
LABELS
Enables to customize the Labels of the Category Axis

Specifies whether axis displays category axis'
Labels
Boolean False labelsEnabled
Enabled labels and value axis' values.
Enable to set the color of axis value labels.
Label Color Color #000000 labelColor
Will use chart's color if not set.
Label Enables to restrict the characters in the
Character Number
labels.
Limit
Specifies if axis labels (only when it is
horizontal) should be wrapped if they don't fit
Auto Wrap Boolean False autoWrap
in the allocated space. Wrapping won't work
for rotated axis labels.
Rotation angle of a label. Only horizontal axis'
values can be rotated. If you set this for
Label Rotation Number labelRotation
vertical axis, the setting will be ignored.
Possible values from -90 to 90.
Angle of label rotation, if the number of series
Auto-Rotate exceeds auto Rotate Count and parse Dates is
Number autoRotateAngle
Angle
set to false.
If the number of category axis items exceed
the auto Rotate Count, the labels will be
Auto-Rotate
Number autoRotateCount
Count rotated by auto Rotate Angle degree. Works
only if parse Dates is false.
Label Color You can use it to set color of an axis label.
Color labelColorField
Field
21 | P a g e
____________________________________________________________________________________________________________
Works only with non-date-based data.

Whether to show first axis label or not. This
works properly only on Value Axis. With
Category Axis it won’t work 100%, it depends
Show First
Boolean False showFirstLabel
Label on the period, zooming, etc. There is no
guaranteed way to force category axis to
show or hide first label.
Whether to show last axis label or not. This
works properly only on Value Axis. With
Category Axis it won’t work 100%, it depends
Show Last
Boolean False showLastLabel
Label on the period, zooming, etc. There is no
guaranteed way to force category axis to
show or hide last label.
Every second space between grid lines can be
Fill Color Color filled with color. Set fill Alpha to a value fillColor
greater than 0 to see the fills
Whether to set Axis labels should be bold or
Bold Labels Boolean False boldLabels
not.
Size of value labels text. Will use chart's font
Font Size Number fontSize
Size if not set.
Enables to specify whether values should be
Inside Boolean False inside
placed inside or outside plot area.
Frequency at which labels should be placed.
Label Doesn't work for Category Axis if parse Dates
Number labelFrequency
Frequency
is set to true.
You can use it to adjust position of axes
Label Offset Number labels. Works both with Category Axis labelOffset
and Value Axis.
This property is used when calculating grid
Min. count (when auto Grid Count is true). It
Horizontal Number minHorizontalGap
specifies minimum cell width required for one
Gap
span between grid lines.
count (when auto Grid Count is true). It
Min. Vertical
Number minVerticalGap
Gap specifies minimum cell height required for
one span between grid lines.
22 | P a g e
____________________________________________________________________________________________________________
GRID
Enables to Customize the Category Axis Grid

Specifies if a grid line is placed on the
center of a cell or on the beginning of a
Grid Position cell. Possible values are: 'start' and gridPosition

'middle' This setting doesn't work if
parse Dates is set to true.
Enables to set the length of the dash. If
Dash Length Number the value is set as Zero then the line is dashLength
not dashed.
Every second space between grid lines
Fill Alpha 100% can be filled with color. Set fill Alpha to fillAlpha
a value greater than 0 to see the fills
Grid Alpha Sets the opacity of Grid lines. gridAlpha

Grid Color Color #000000 Sets the color of Grid lines. gridColor
Specifies whether number of grid Count
Auto-Grid is specified automatically, according to autoGridCount
Boolean False
Count
the axis size.
Number of grid lines. In case this is
value axis, or your category Axis parses
Manual Grid dates, the number is approximate. The
Number
Count
default value is 5. If you set auto Grid
Count to true, this property is ignored.
Grid Above Whether to show grid above lines or
gridAboveGraphs
Graphs Boolean False
not.
Enables to set the Thickness of gridline. gridThickness
Grid Thickness Number
Minor Grid Whether to display minor grid or not. minorGridEnabled

Boolean False
Enabled
Sets the opacity of Minor grid. In order
Minor Grid minor to be visible, you should set minorGridAlpha
100%
Alpha
minor Grid Enabled to true.
23 | P a g e
____________________________________________________________________________________________________________
DATES
Enables to specify the properties of Dates

In case your category axis values are
Date objects, set this to true. In this case
the chart will parse dates and will place
your data points at irregular intervals. If
Parse Dates Boolean False parseDates
you want dates to be parsed, but data
points to be placed at equal intervals,
set both parse Dates and equal Spacing
to true.
Works only when parse Dates is set to
true and equal Spacing is false. If you set
it to true, at the position where bigger
Two Line
Boolean False twoLineMode
Mode period changes, category axis will
display date strings of both small and big
period, in two rows.
When parse dates is on for the category
axis, the chart will try to highlight the
Bold Period beginning of the periods, like month, in
Boolean False boldPeriodBeginning
Beginning
bold. Set this to false to disable the
functionality.
This setting works only when parse
Dates is set to true and equal Spacing is
Centre Label set to false. In case you set it to false,
Boolean False
on Full Period centerLabelOnFullPeriod
labels will never be centered between
grid lines.
In case your category axis values are
Date objects and parse Dates is set to
true, the chart will parse dates and will
place your data points at irregular
Equal Spacing Boolean False intervals. However if you want dates to equalSpacing
be parsed (displayed on the axis,
balloons, etc.), but data points to be
placed at equal intervals (omitting dates
with no data), set equal Spacing to true.
First Day of Sets first day of the week. 0 is Sunday, 1
Number firstDayOfWeek
Week
24 | P a g e
____________________________________________________________________________________________________________
is Monday, etc.
If you set it to false, the start of longer
Mark Period periods won't use a different date
Boolean False markPeriodChange
Change
format and won't be bold.
Specifies the shortest period of your
data. This should be set only if parse
Dates is set to 'true'. Possible period
values: fff - milliseconds, ss - seconds,
mm - minutes, hh - hours, DD - days,
Minimum
String
minPeriod
Period MM - months, YYYY - years. It's also
possible to supply a number for
increments, i.e. '15mm' which will
instruct the chart that your data is
supplied in 15 minute increments.
The longest time span allowed to select
(in milliseconds) for example,
Max Selected Number 259200000 will limit selection to 3 days. maxSelectedTime
0
Time
Works if equal Spacing is set to false
(default).
The shortest time span allowed to select
(in milliseconds) for example, 1000 will
Min Selected minSelectedTime
Number 0
Time limit selection to 1 second. Works if
equal Spacing is set to false (default).
Guides
Guides enable you to set a single value or a range as reference point to other values in a Chart which
makes analysis easy for the user.
To enable Guides in ChartsPLUS 2.0 the following properties need to be set.
 Options: Enable to Add or Remove Guides. You can also add multiple guides to a Chart.
GENERAL
Specifies the General properties of Guide.

Unique id of a Guide. You don't need to set
Id String Guide
it, unless you want to.
Fill Color Color Fill color of Guide fillColor

Fill Alpha Number 100% Fill opacity of Guide fillAlpha
25 | P a g e
____________________________________________________________________________________________________________
Value Axis of the Guide. As you can add
Value Axis guides directly to the chart, you might need

to specify which value axis should be used.
Value of the Guide (in case the guide is for a
Value Axis).
Value... Value Type: Data Bound or Static Value

Row Binding: Position or Name
Column Binding: Position or Name
'To' value of the guide (in case the guide is
for a Value Axis).
To Value Value Type: Data Bound or Static Value

Category of the guide (in case the guide is
for category axis).
Value Type: Data Bound or Static Value
Category...
Labe Format: [[value]]
'To' category of the guide (in case the guide
is for category axis).
...To Category
Works if the Guide is added to the 'Category
Axis' and this axis is non-date-based. If set,
Expand Boolean False the Guide will start (or be placed, if it's not a expand
fill) on the beginning of the category cell
and will end at the end of 'To Category' cell.
If you set it to true, the guide will be
Above Boolean False
displayed above the graphs.
26 | P a g e
____________________________________________________________________________________________________________
LABEL
Enables to set the properties of the Guide Labels.

Set the label text which will be displayed near
Label String label
the guide.
Color Color Sets the color of a Guide label. color

Specifies the Position of guide label. Possible
Label Position String values are 'left' or 'right' for horizontal axis and labelPosition
'top' or 'bottom' for vertical axis.
Enable to set the Rotation angle of a guide
Label Rotation Number labelRotation
label.
Font Size Number Enable to set the font size of Guide label. fontSize
Specifies if Guide label should be displayed
Label Inside Boolean False inside
inside the chart or not.
Bold Label Boolean False Specifies if Guide label should be bold or not. boldLabel
BALLOON
Specifies the Balloon properties of Guide.

Enable to set the text which will be
Balloon Text String balloonText
displayed if the user rolls-over the guide.
Balloon Color Color Specifies the Balloon Fill Color balloonColor
LINE
Enables to Customize the Guide Line.

Line Thickness Number Enable to set Line Thickness. lineThickness
Line Color Color Enables to set the Line Color. lineColor
Line Alpha 100% Specifies the Line Opacity. lineAlpha
If the value is > 0 the line will be displayed
Dash Length Number as dashed. The length of the Dash length dashLength
depends on the value given.
Enables to set the Tick Length of the guide.
Tick Length Number tickLength
Value 0 hides the Tick.
27 | P a g e
____________________________________________________________________________________________________________
Adding a Guide in ChartsPLUS 2.0

1. Add a ChartsPLUS 2.0 chart to the Layout editor, and then assign a data source to the Chart. (In
this case Country wise Revenue data source is added to the Chart.)
2. Now navigate to Additional Properties of ChartsPLUS 2.0>> CONFIG>> Axes>> Guides>>
Options>> Add Guide.
3. Under General>> Value…>> Click on CELL SELECTION button.
4. In the CELL SELECTION pop up select the Value Type either Data bound or Static Value. ( In this
case Static Value is selected)
5. Give the value in the Static Value field and click Close. (In this Case value 28000 is given as Static
value as it is the Avg.Revenue). This value acts as a guide in the Chart. (You can also add the value
from the data that is assigned by selecting Data Bound Value Type).
6. Now select Above check box under General to show the Guide above the Columns.
7. In the Labels section set the Label (Here it is Avg.Revenue), adjust font size to 12.
8. Under Line section set the Line Thickness to 3, Line color to desired color( In this case it is
#FF0C0C), Dash Length to 3.
Here Avg.Revenue acts as Guide
9. Similarly you can add more than one Guide to a graph.
28 | P a g e
____________________________________________________________________________________________________________
Here Goal and Industry Avg. acts as Guides
Value Axes
This is a Chart axis that displays scaled numerical values.
A column chart will have only one Value axis where as a combination chart may contain 2 value axis to
scale each graph.
ChartsPLUS 2.0 enables to customize these value axes under Value Axes section using the below
properties.
 Options: Enables to add or Remove a Single or Dual value axis.

 Add Value Axis: Adds a Single value axis.
 Create Dual Axes: Adds Dual Axes (Primary and Secondary) and the properties of each axis can be
modified individually.
 Remove All: Remove all axes that are added.
GENERAL
Unique id of value axis. It is required to set
Id String Value Axis it, if you need to tell the graph which exact id
value axis it should use.
Title String Specifies the title of the axis title

Title Bold Boolean False Displays the Axis Title in Bold. titleBold
Specifies Color of axis title. Will use text
Title Color Color titleColor
color of chart if not set any.
29 | P a g e
____________________________________________________________________________________________________________
Specifies Font size of axis title. Will use font

Title Font Size Number titleFontSize
size of ChartsPLUS 2 pixels if not set any
If you don't want min value to be calculated
by the chart, set it using this property. This
Minimum Number value might still be adjusted so that it would minimum

be possible to draw grid at rounded
intervals.
If you don't want max value to be calculated
Maximum Number value might still be adjusted so that it would maximum

intervals.
If you set minimum and maximum for your
axis, chart adjusts them so that grid would
start and end on the beginning and end of
Strict plot area and grid would be at equal
Boolean False strictMinMax
Min/Max
intervals. If you set strict Min/Max to true,
the chart will not adjust minimum and
maximum of value axis
Specifies if this value axis scale should be
Logarithmic Boolean False logarithmic
logarithmic.
Specifies if value axis should be reversed
reversed
Reversed Boolean False
(smaller values on top).
Possible values are: 'top', 'bottom', 'left',
'right'. If axis is vertical, default position is
Position Number Left position
'left'. If axis is horizontal, default position is
'bottom'.
Stacking mode of the axis. Possible values
Stack Type Number are: 'none', 'regular', '100%', '3D'. Note,

stackType
only graphs of one type will be stacked.
Specifies whether number of Grid Count is
Auto Grid specified automatically, according to the
Boolean False autoGridCount
Count
axis size.
If auto Margins of a chart is set to true, but
you want this axis not to be measured when
Ignore Axis
Boolean False ignoreAxisWidth
Width calculating margin, set ignore Axis Width to
true.
30 | P a g e
____________________________________________________________________________________________________________
The distance of the axis to the plot area, in

Offset Number offset
pixels. Negative values can also be used.
GRID AND FILLS

Enables to select Grid Type for Radar chart.
Grid Type Possible values are: 'polygons' and 'circles'. gridType

For polar charts ‘circles’ can be set.
Grid Opacity Number Specifies the opacity of grid lines. gridAlpha

Grid Color Color Specifies color of grid lines. gridColor
Number of grid lines. In case this is value
axis, or your category Axis parses dates, the
Grid Count Number number is approximate. The default value is gridCount

5. If you set auto Grid Count to true, this
property is ignored.
Grid Thickness Number Specifies thickness of grid lines. gridThickness

Specifies opacity of minor grid. In order
Minor Grid minor to be visible, you should set minor
Number minorGridAlpha
Alpha
Grid Enabled to true.
Minor Grid Specifies if minor grid should be displayed.
Boolean False minorGridEnabled
Enabled
AXIS APPERANCE
Axis Opacity Number Specifies the opacity of Axis axisAlpha
Axis Color Color #000000 Enable to set the color of Axis axisColor
Axis Thickness Number 1 Specifies thickness of Axis axisThickness
Base Value Number 0 Enables to set the Base value of the axis. baseValue
Specifies the Length of a dash. 0 means line
Dash Length Number dashLength
is not dashed.
If your values represents time units, and
you want value axis labels to be formatted
Duration String as duration, you have to set the duration duration

unit. Possible values are: 'ss', 'mm', 'hh' and
'DD'.
Every second space between grid lines can
Fill Opacity Number be filled with color. Set fill Alpha to a value fillAlpha
greater than 0 to see the fills.
31 | P a g e
____________________________________________________________________________________________________________
Fill Color Color be filled with color. Set fill Alpha to a value fillColor
Tick Length Number Enable to set the length of the tick marks. tickLength
LABELS
Specifies whether axis displays category
Labels
Boolean False labelsEnabled
Enabled axis' labels and value axis' values.
Frequency at which labels should be
Label placed. Doesn't work for Category Axis if
Number labelFrequency
Frequency
parse Dates is set to true.
Enables to adjust position of axes labels.
Label Offset Number Works both with Category Axis and Value labelOffset
Axis.
Enables to Rotate the angle of a label.
Only horizontal axis' values can be
Label Rotation Number rotated. If you set this for vertical axis, the labelRotation
setting will be ignored. Possible values
from -90 to 90.
Specifies if axis labels should be bold or
Bold Labels Boolean False boldLabels
not.
Specifies the color of axis value labels.
Text Color Color color
Will use chart's color by default.
Sets the size of value labels text. Will use
chart's font Size by default.
Whether to show first axis label or not.
This works properly only on Value Axis.
Show First
Boolean False showFirstLabel
Label With Category Axis it won’t work 100%, it
depends on the period, zooming, etc.
Whether to show last axis label or not.
This works properly only on Value Axis.
Show Last
Boolean False showLastLabel
Label With Category Axis it will not work 100%,
it depends on the period, zooming, etc.
Specifies whether values should be placed
Inside Boolean False inside
inside or outside plot area.
Min This property is used when calculating
Number minHorizontalGap
Horizontal
32 | P a g e
____________________________________________________________________________________________________________
Gap grid count (when auto Grid Count is true).

It specifies minimum cell width required
for one span between grid lines.
This property is used when calculating
grid count (when auto Grid Count is true).
Min Vertical
Number minVerticalGap
Gap It specifies minimum cell height required
for one span between grid lines.
Specifies if graph’s values should be
Recalculate to
Boolean False recalculateToPercents
Percent’s recalculated to percent’s.
Specifies whether values on axis can only
Integers Only Boolean False integersOnly
be integers or both integers and doubles.
Precision Number Precision (number of decimals) of values. precision

Unit which will be added to the value
Unit String unit
label.
Position of the unit. Possible values are
Unit Position unitPosition
'left' and 'right'.
If true, prefixes will be used for big and
small numbers. You can set arrays of
Use Prefixes Boolean False prefixes directly to the chart object via usePrefixes
prefixes of Small Numbers and prefixes of
Big Numbers.
If true, values will always be formatted
using scientific notation (5e+8, 5e-8...)
Use Scientific Otherwise only values bigger then 1e+21
Boolean False useScientificNotation
Notation
and smaller then 1e-7 will be displayed in
scientific notation.
MISC
Specifies whether guide values should
Include Guides be included when calculating min and
Boolean False includeGuidesInMinMax
in Min/Max
max of the axis.
If true, the axis will include hidden
Include graphs when calculating min and max
Boolean False includeHidden
Hidden
values.
If set value axis scale (min and max
Min/Max
Number minMaxMultiplier
Multiplier numbers) will be multiplied by it. I.e. if
33 | P a g e
____________________________________________________________________________________________________________
set to 1.2 the scope of values will

increase by 20%.
Radar chart only. Specifies if
Radar
Categories Boolean False categories (axes' titles) should be radarCategoriesEnabled
Enabled displayed near axes)
In case you synchronize one value axis
with another, you need to set the
Synchronizatio synchronization multiplier. Use
Number synchronizationMultiplier
n Multiplier
synchronize With Axis method to set
with which axis it should be synced.
One value axis can be synchronized
with another value axis. You can use
both reference to your axis or id of the
Synchronize
synchronizeWith
With axis here. You should set
synchronization Multiplier in order for
this to work.
If this value axis is stacked and has
columns, setting value Axis. Total Text
Total Text String totalText
= '[[total]]' will make it to display total
value above the most-top column.
Total Text Specifies color of total text.
Color totalTextColor
Color
Specifies distance from data point to
Total Text
Number totalTextOffset
Offset total text.
This allows you to have logarithmic
value axis and have zero values in the
Treat Zero As Number treatZeroAs
data. You must set it to >0 value in
order to work.
34 | P a g e
____________________________________________________________________________________________________________
After Value Axes Customization for a Combination Chart
Graphing
This section enables to set the graphs and their customization.
Graphing Includes three sub sections Selected Graph, Default Graph and Graphs.
 Selected Graph: Enables to customize the selected graph in the Chart.

 Default Graph: As soon as data source is assigned to ChartsPLUS 2.0 for each Measure a graph is
generated and is displayed on Chart. These Graphs are called as Default Graphs.
 Graphs: For each measure that is present in the Data source you can assign a Graph to it. You can
generate all the default graphs by using function Regenerate all Graphs and can change them to the
required graph by using Bulk actions or can change individually by selecting the required graph.
Creating Graphs in ChartsPLUS 2.0:
1. Add a ChartsPLUS 2.0 component to the Application.
2. Assign the Data source to the Chart. (In this case the Assigned data source has two Measures
namely Sales and Quantity.)
35 | P a g e
____________________________________________________________________________________________________________
3. You can observe the data in the data source is displayed in the Chart as below. These are the
Default Graphs.
4. In the Additional Properties of ChartsPLUS navigate to CONFIG>> Graphing>> Default Graph. You
can observe all the properties related to Default graph.
5. Now click on Graph tab and under Utilities click Generate>> Regenerate all Graphs. This brings all
the Graphs that are available in the Default Graph.
36 | P a g e
____________________________________________________________________________________________________________
6. Now again click Options>> Bulk Actions>> select Line Graph.
7. Now the Chart appears as below
8. Now Click on Column 1, set ID as “1”, and Title as “Sales”Change the Graph type as Column,
under Appearance section of Column 1 set the Fill Alpha to 75% and now the graph appears as
below.
37 | P a g e
____________________________________________________________________________________________________________
9. Under General properties of Column 1 enable Show Value Labels Check box. This will display the
values of the columns.
38 | P a g e
____________________________________________________________________________________________________________
10. Now under Appearance properties>> Set Column Width as 50%, Corner Radius as 5, and fill
Alpha as 75% and it should appear as below:
11. Now click on Column 0 and set the Id as 0 and Title as Quantity.
12. Under Appearance set Dash Length to 3 and under Fill Colors Increase the Line Thickness to 3.
13.Now under Selected Graph tab>> Set the General properties as below:
39 | P a g e
____________________________________________________________________________________________________________
14.Execute the application and click on any of the Column and it should appear as below:
15.Similarly you can customize the graphs as per the requirement using Graphs section properties.
Below is the list of available properties in Selected Graphs, Default Graph and Graph sections.
Selected Graph
 You can customize the area selected on graph by setting the below properties.

Selected
Graph ID String Enables to select the Graph by ID selectedGraphId
Selected Enables to select the Graph by Index

Number 0 selectedGraphIndex
Graph Index
40 | P a g e
____________________________________________________________________________________________________________
GENERAL
Value Color Sets the Color to Values in the Selected graph.
Color
Enable to set the color to be displayed on
Fill Color
Color fillColor
selected column.
Enable to set the border color of the selected
Line Color
Color outlineColor
column.
Enable to set the color of the Label that is
Label Color
Color labelColor
selected.
Alpha Enable to set the opacity of Fill colors.
Number alpha
Enables to add a description to the selected
Description
String
columns.
Enables to select the type of bullet that need to
Bullet
String bullet
be shown on selection.
Bullet Size Set the size of the bullet selected.
Number bulletSize
Displays and sets the border line of select column
Dash Length
Number dashLength
as Dashed.
Default Graph
 Default Graph Fill: Enable the check box to use Default Graph configuration when there is not
a graph defined for a measure.
GENERAL
Enables to select the type of graph from the
graphType
Graph Type
Dropdown.
Value Enables to select the projection method.
valueFieldAggregation
Aggregation
Enables to set the Value axis to the graph, by
default first value axis is set to the graph. You
Value Axis valueAxis
can use reference of the Value axis object or
can set value axis id.
Enables to set the Precision of values, by
Value
Number
Precision default chart’s precision is set.
If the value axis of the graph has stack types
Stackable Boolean True like 'regular' or '100%', exclude the graph stackable
from stacking.
Clustered Boolean True Enable the check box to set the columns of clustered
41 | P a g e
____________________________________________________________________________________________________________
the graph next to each other, disabling will

set the columns in front of each other.
Enabling the Check box will set a new stack.
New Stack Boolean False This allows having clustered and Stacked newStack
column/bar chart.
Enables to use tags like [[value]],
[[description]], [[percents]], [[open]],
Balloon Text String [[value]] [[category]] or any other field name from balloonText
data provider to show in the Balloon. HTML
tags can also be used.
Specifies whether to connect data points if
Connect Boolean True data is missing. By default this property is connect

enabled.
Enables to specify when graph should display
gap - if the time difference between data
Gap Period Number 1.1 points is bigger than duration of min Period * gapPeriod
gap Period, and connect property of a graph
is set to false, graph will display gap.
Enables to show or Hide the graph, but it is
Hidden Boolean False recommended to use hide Graph (graph) and hidden
show Graph(graph) methods instead.
Enabling the property will display the value
balloon of the graph when mouse is over data
Show Balloon Boolean True showBalloon
item or chart's indicator is over on any of the
series.
CONDITIONAL FORMATTING
Fill Color Enables to select the condition that is
Conditional String
defined in the Conditional Formatting tab.
Formatting
Enables to select the condition for
Line/Bullet
Conditional String Line/Bullet Chart that is defined in the
Formatting Conditional Formatting tab.
42 | P a g e
____________________________________________________________________________________________________________
DATA FIELDS
Enables to select the Alpha field from the
String
Alpha Field alphaField
available fields of the data source.
Enables to select the Bullet field from the
Bullet Field bulletField
Enables to set up the Bullet size field from
Bullet Size
bulletSizeField
Field the data provider.
Filed type 'By Name' maps a field by its key
(e.g. 0AMOUNT). 'By Position' maps a field by
its ordinal position beginning at position 0
(First Column). 'Static' allows for placement
of a constant value such as '10.5' which can
Filed Type By Position serve useful for hard-coded targets. 'By fieldType
Name' is useful when you want to guarantee
a Graph configuration to a specific named
column, whereas 'By Position' is useful when
your chart should flex to ad-hoc navigations
instead.
Position of Column to map to, beginning at
Field Position Number 1 fieldPosition
the first column (0).
Color Field Name of the color field in your dataProvider. colorField

Name of the custom bullet field in your
Custom Bullet
bullet
Field dataProvider.
Name of the dash length field in the data
Provider. This property adds a possibility to
Dash Length change graphs’ line from solid to dash on any dashLength
Field
data point. You can also make columns
border dashed using this setting.
Name of error value field in your data
Error Field errorField
provider.
Name of the fill colors field in your
dataProvider. This property adds a possibility
Fill Colors to change line graphs’ fill color on any data fillColorsField
Field
point to create highlighted sections of the
graph. Works only withAmSerialChart.
Gap Field Name of the gap field in your dataProvider. gapField
43 | P a g e
____________________________________________________________________________________________________________
You can force graph to show gap at a desired

data point using this feature.
Label Color Name of label color field in data provider.
labelColor
Field
Line Color Name of line color field in data provider.
lineColor
Field
URL Field Name of the URL field in your data Provider. urlField
APPEARANCE
Enable to set the color of the balloon. By
Balloon Color Color balloonColor
default the graph or data item color is set.
Enable to set the column width for each
Column Width 100% graph individually. Value ranges from 0%- columnWidth
100%
Enables to set the radius of Column corners.
Corner Radius Number 0 Both the top and bottom of the column are cornerRadius
effected.
If you set it to a value greater than 0, the
Dash Length Number 0 graph line (or columns border) will be dashLength
dashed.
Fill Alpha 100% Enables to set the opacity of Columns. fillAlpha
FILL COLORS
 Options: Enables options to select the Color type like Single Color, SAP Color, Color Brewer or
to remove all the selected colors.

Enables to set a fixed Column width of the
Fixed Column
Number fixedColumnWidth
Width graph.
Enables to set the size of value labels text.
By default chart's fontSize is set.
Gradient
gradientOrientation
Orientation By default chart's font Size is set.
Enables to set the opacity of the Line
Line Alpha 100% lineAlpha
(Column border).
Line Color Color Enable to set the color of the Line lineColor
Line Thickness Number 1 Enables to set the thickness of the Line lineThickness
44 | P a g e
____________________________________________________________________________________________________________
(Column border).
Enables to fill opacity of negative part of the
Negative Fill
100% negativeFillAlphas
Alpha graph. Will use fill Alphas by default.
NEGATIVE FILL COLORS

 Options: Enables options to select the Color type like Single Color, SAP Color, Color Brewer or
to Remove all the selected colors.

Enables to set the opacity of the negative
Negative Line
negativeLineAlpha
Alpha portion of the graph Line (Column border).
Enables to set the color of the negative
portion of the graph Line. In case the graph
Negative Line type is candlestick or OHLC, negativeLineColor
Color
negativeLineColor is used when close value
is less then open value.
This property should be used together with
topRadius (when columns look like
cylinders). If this property is enabled, the
Show on Axis showOnAxis
cylinder will be lowered down so that the
center of its bottom circle would be right on
category axis.
By enabling this property value to 1,
columns will become cylinders (must set
depth3D and angle properties of a chart to
>0 values in order this to be visible). You
Top Radius can make columns look like cones (set topRadius
topRadius to 0) or even like some glasses
(set to bigger than 1). It is strongly
recommend to set grid opacity to 0 in order
to look good.
BULLETS AND LABELS

Enable to select the type of bullet from
the list of available options like 'none',
Bullet bullet
'round', 'square', 'triangleUp',
'triangleDown', 'triangleLeft',
45 | P a g e
____________________________________________________________________________________________________________
'triangleRight', 'bubble', 'diamond',

'xError', 'yError' and 'custom'.
Enable to select the color of the Bullet
Bullet Color Color color. By default bullet color is set bulletColor

same as Line color.
Bullet Size Number 8 Enable to set the Bullet Size. bulletSize

Bullet Alpha 100% Enable to set the opacity of the Bullet bulletAlpha
bullet Axis value is used when you are
building error chart. Error chart is a
regular serial or XY chart with bullet type
set to 'xError' or 'yError'. The graph should
know which axis should be used to
determine the size of this bullet - that's
Bullet Axis bulletAxis
when bullet axis should be set. Besides
that, you should also set graph.errorField.
You can also use other bullet types with
this feature too. For example, if you set
Bullet Axis for XY chart, the size of a bullet
will change as you zoom the chart.
Enable to set the opacity of the Bullet
Bullet Border bulletBorderAlpha
100%
Alpha Border.
Enable to set the color of the Bullet
Bullet Border Border. By default Line color is set to this bulletBorderColor
Color
Color
property.
This property works with candlestick
graph type, you can set it to open, close,
high and low. If this is set to high, the showBulletsAt
Show Bullets At
events will be shown at the tip of the high
line.
If bullets enabled of Chart cursor is true, a
bullet on each graph follows the cursor.
Cursor Bullet You can set opacity of each graphs bullet. cursorBulletAlpha
100%
Alpha
In case you want to disable these bullets
for a certain graph, set opacity to 0.
Enable to set the path of the image that is
customBullet
Custom Bullet String
used as custom bullet.
Hide Bullets The Bullet counts can be hidden if there hideBulletsCount
Number 0
Count
46 | P a g e
____________________________________________________________________________________________________________
are more data points by using this feature.

0 means the bullets will always be visible.
If graph's type is column and label text is
set, graph hides labels which do not fit
Show All Value showAllValueLabels
Boolean False
Labels into the column's space. If you don't want
these labels to be hidden, set this to true.
Label Anchor Enable to set the data label text anchor. labelAnchor
Label Offset Number 0 Offset of data label. labelOffset
Enable to set the position of the label as
'bottom', 'top', 'right', 'left', 'inside',
Label Position 'middle'. Sometimes position is changed labelPosition

by the chart, depending on a graph type,
rotation, etc.
Enable to set the tags like [[value]],
Label Text String [[description]], [[percents]], [[open]], labelText

[[category]].
Enable to set the thickness of the bullet
Bullet Border bulletBorderThickness
Number 2
Thickness border.
LEGEND
Enable to set whether to show/hide the
Visible in
Boolean True visibleInLegend
Legend graph in the legend.
Enabling this feature will hide the graph
Switchable Boolean True switchable
when the user clicks on legend entry.
Provide the path of the image to set it as
Custom
String customMarker
Marker Custom Marker.
Enable to set the Legend Marker opacity,
Legend Alpha 100% by default Line alpha is set as Legend legendAlpha

alpha.
Legend Color Color Enable to set the Legend Marker color. legendColor
This property enables to set the text of
Legend value. You can use tags like
[[value]], [[description]], [[percents]],
Legend Value
String legendValueText
Text [[open]], [[category]]. You can also use
custom fields from your data Provider. If
not set, uses Legend's value Text.
47 | P a g e
____________________________________________________________________________________________________________
This property enables to set the text

which will be displayed in the value
portion of the legend when user is not
hovering above any data point. The tags
should be made out of two parts - the
name of a field (value / open / close / high
Legend Period
String legendPeriodValueText
Value Text / low) and the value of the period that
need to be shown- open / close / high /
low / sum / average / count.
Ex: [[value.sum]] means that sum of all
data points of value field in the selected
period will be displayed.
Enables to set the Marker Type of the
Legend for individual graphs from the
available list of options like circle,
Marker Type markerType
diamond, triangleUp, triangleDown,
triangleLeft, triangleDown, bubble, line,
none.
MISC
Enabling this feature will place the Line
Behind
Boolean False behindColumns
Columns graph behind column graphs.
If you set this to true before chart is
Animation drawn, the animation of this graph
Boolean False animationPlayed
Played
won't be played.
You can set another graph here and if fill
alpha is >0, the area from this graph to
Fill To Graph will be filled (instead of
Fill to Graph fillToGraph
filling the area to the X axis). This feature
is not supported by smoothed Line
graphs.
Whether to include this graph when
Include in calculating min and max value of the
Boolean True
Min/Max
axis.
It is useful if you have really lots of data
Min. Line
Number 1
Distance points. Based on this property the graph
48 | P a g e
____________________________________________________________________________________________________________
will omit some of the lines (if the

distance between points is less that
minDistance, in pixels). This will not
affect the bullets or indicator in anyway,
so the user will not see any difference
(unless you set minValue to a bigger
value, let say 5), but will increase
performance as less lines will be drawn.
By setting value to a bigger number you
can also make your lines look less
jagged.
If you use different colors for your
negative values, a graph below zero line
is filled with negativeColor. With this
Negative Base Number 0 negativeBase
property you can define a different base
value at which colors should be changed
to negative colors.
Enable this feature to have a step line
No Step Risers Boolean False noStepRisers
graph without risers.
This property can be used by step graphs
Period Span Number 1 - you can set how many periods one periodSpan
horizontal line should span.
Specifies where data points should be
placed - on the beginning of the period
(day, hour, etc) or in the middle (only
Point Position when parseDates property of pointPosition

categoryAxis is set to true). This setting
affects Serial chart only. Possible values
are 'start', 'middle' and 'end'
If this is set to true, candlesticks will be
colored in a different manner - if current
close is less than current open, the
candlestick will be empty, otherwise -
Pro
Boolean False proCandlesticks
Candlesticks filled with color. If previous close is less
than current close, the candlestick will
use positive color, otherwise - negative
color.
49 | P a g e
____________________________________________________________________________________________________________
Specifies graphs value at which cursor is

showed. This is only important for
Show Balloon candlestick and OHLC charts, also if showBalloonAt
At
column chart has 'open' value. Possible
values are: 'open', 'close', 'high', 'low'.
If you want mouse pointer to change to
Show Hand on hand when hovering the graph, set this
Boolean False showHandOnHover
Hover
property to true.
Step graph only. Specifies to which
Step Direction stepDirection
direction step should be drawn.
Target to open URLs in, i.e. _blank, _top,
URL Target String urlTarget
etc.
If negativeLineColor and/or
negativeFillColors are set and
useNegativeColorIfDown is set to true
(default is false), the line, step and
column graphs will use these colors for
Negative Color lines, bullets or columns if previous useNegativeColorIfDow
Boolean False
if Down n
value is bigger than current value. In
case you set openField for the graph, the
graph will compare current value with
openField value instead of comparing to
previous value.
Graphs
Options:
 New: If the selected Chart type is Column or Line or Area you can add new graphs which is
either Column/Line/Area from the New options.
 Remove All: Enables to remove all the graphs that are added under Graphs section. When you
remove all the graphs the Chart will display Default Graphs.
 Generate:
 Regenerate all Graphs will bring all the Default Graphs in to Graphs Section.
 Generate New Graphs will create a copy of the existing graphs.
 Bulk Actions:
 Line/ Area/ Column Graph: Converts all the Graphs in to Line/Area/Column.
 Add Value Labels: Displays Value labels to all Graphs.
 Remove Value Labels: Removes Value labels from all Graphs.
50 | P a g e
____________________________________________________________________________________________________________
 Stackable: Enables to display graphs as stackable.

 Unstackable: Enables to display graphs as Unstackable.
The additional graph that is added will have all the properties similar to the Default Graph except the following:

Unique id of a graph. It is not required to set
one, unless you want to use this graph for
Id String id
as your scrollbar's graph and need to
indicate which graph should be used.
Graph title. Setting title to [[auto]] will
Title String result in ChartsPLUS selecting an title

appropriate graph title automatically.
Type of the graph. Possible values are: 'line',
'column', 'step', 'smoothedLine',
String
Graph Type graphType
'candlestick', 'OHLC'. XY and Radar charts
can only display 'line' type graphs.
String Column to use for the value of the graph.
Value Field valueField
Type of Field. 'By Name' maps a field by its
key (e.g. 0AMOUNT). 'By Position' maps a
field by its ordinal position beginning at
position 0 (First Column). 'Static' allows for
placement of a constant value such as '10.5'
String which can serve useful for hard-coded
Field Type fieldType
targets. 'By Name' is useful when you want
to guarantee a Graph configuration to a
specific named column, whereas 'By
Position' is useful when your chart should
flex to ad-hoc navigations instead.
Field Position Number 0 fieldPosition
Appearance
PLOT AREA
Enabling the check box will rotate the graph
boolean false by 90 degrees, for instance rotating a
Rotate rotate
Column chart will make it as Bar chart.
51 | P a g e
____________________________________________________________________________________________________________
Enables to set the gap between two

Column int 0
columnSpacing
Spacing columns of same category.
Enables to set the gap between two 3D
3D Column int 0 columnSpacing3D
Spacing columns of same category.
Enables to set the depth of the 3D part of
int 0 the plot area. If this value is greater than depth3D
3D Depth
zero it will set 3D effect to the chart.
Enables to set the angle to the 3D part of
int 45 the plot area. If this value is greater than angle
3D Angle
zero it will set 3D effect to the chart.
Plot Area 0 Sets the opacity of plot area's border.

float plotAreaBorderAlpha
Border
Opacity
#000000 Sets the color of plot area's border.
Plot Area String plotAreaBorderColor
Border Color
0 Sets the opacity of plot area.

Plot Area Fill float plotAreaFillAlphas
Opacity
PLOT AREA FILL COLORS

 Plot Area Gradient Angle: Sets the color gradient angle of the plot area.
ANIMATION
Select the Check box to enable Animation in
Sequenced coordSequencedAni
Boolean True
Animation a sequence. mation
Enables to set the opacity of the Chart on
float
Start Opacity 100% coordStartAlpha
start-up.
0 Specifies the time the animation need to be
Start Duration Number extended. coordStartDuration
Enables to select the effect that need to be

String bounce displayed on start up. The available values
Start Effect startEffect
are: Ease Out, Easy In, Elastic and Bounce.
52 | P a g e
____________________________________________________________________________________________________________
MARGINS
Auto-Margin
Number 10 Enable to set the Auto-Margin offset.
Offset
Specifies if margins of a chart should be
calculated automatically so that labels of
axes would fit. The chart will adjust only
margins with axes. Other margins will use autoMargins
Auto-Margins Boolean True
values set with 'Margin Right', 'Margin Top',
'Margin Left' and 'Margin Bottom'
properties.
Interactivity
Interactivity
 Mouse Wheel Scroll Enabled: Specifies if scrolling of a chart with mouse wheel is enabled. If you
press shift while rotating mouse wheel, the chart will zoom-in/out.
 Mouse Wheel Zoom Enabled: Specifies if zooming of a chart with mouse wheel is enabled. If you
press shift while rotating mouse wheel, the chart will scroll.
Cursor
Enabled Specifies whether cursor is enabled.
Specifies if the user can zoom-in the
boolean true chart. If pan is set to true, zoomable is
Zoomable zoomable
switched to false automatically.
Text Color Enable to set the color of Text.

Specifies where the cursor line should
be placed - on the beginning of the
period (day, hour, etc) or in the middle
(only when parseDates property of
Cursor String middle categoryAxis is set to true). If you want cursorPosition
Position
the cursor to follow mouse and not to
glue to the nearest data point, set
'mouse' here. Possible values are:
start, middle, mouse.
Enable to set the ccolor of the cursor
Cursor Line
Color line.
Cursor Line Specifies the opacity of the cursor line.
53 | P a g e
____________________________________________________________________________________________________________
Alpha
Selection float Sets the opacity of the selection.
selectionAlpha
Alpha
If this is set to true, the user will be
boolean false able to pan the chart (Serial only)
Pan pan
instead of zooming.
If set to true, instead of a cursor line
user will see a fill which width will
always be equal to the width of one
boolean false
Full Width fullWidth
data item. We'd recommend setting
cusrsorAlpha to 0.1 or some other
small number if using this feature.
Specifies if cursor should be left at it's
last position. Useful for touch devices -
boolean false
Leave Cursor leaveCursor
user might want to see the balloons
after he moves finger away.
If this is set to true, only one balloon at
One Balloon boolean false a time will be displayed. Note, this is oneBalloonOnly
Only
quite CPU consuming.
If true, the graph will display balloon
on next available data point if
Show Next boolean false
showNextAvailable
Available currently hovered item doesn't have
value for this graph.
Specifies if cursor should only mark
Select without boolean false selected area but not zoom-in after selectWithoutZooming
Zooming
user releases mouse button.
Axis of value line. If you set
valueLineBalloonEnabled to true, but
Value Line String you have more than one axis, you can valueLineAxis
Axis
use this property to indicate which axis
should display balloon.
Specifies whether value balloons are
enabled. In case they are not, the
Value
boolean true balloons might be displayed anyway,
Balloons valueBalloonsEnabled
Enabled when the user rolls-over the column or
bullet.
Specifies if cursor of Serial chart should
Value Line boolean false
valueLineEnabled
Enabled display horizontal (or vertical if chart is
54 | P a g e
____________________________________________________________________________________________________________
rotated) line. This line might help users

to compare distant values of a chart.
You can also enable value balloon on
this line by setting valueLineAxis
property of ChartCursor.
Specifies if value balloon next to value
axis labels should be displayed. If you
Value
boolean true have more than one axis, set
Balloons valueBalloonsEnabled
Enabled valueLineAxis property to indicate
which axis should display the balloon.
Specifies if value balloon next to
value axis labels should be
Value Line displayed. If you have more than
boolean false
Balloon valueLineBalloonEnabled
one axis, set valueLineAxis
Enabled
property to indicate which axis
should display the balloon.
Specifies if value balloon next to value
axis labels should be displayed. If you
Category
boolean true have more than one axis, set categoryBalloonEnabled
Balloon
Enabled valueLineAxis property to indicate
which axis should display the balloon.
Specifies the opacity of the category
Category float categoryBalloonAlpha
Balloon Alpha balloon.
Specifies color of the category balloon.
Category String categoryBalloonColor
Balloon Color cursorColor is used if not set.
Category balloon date format (used
Category only if category axis parses dates). categoryBalloonDateForm
String MMM DD, YYYY
Balloon Date at
Check this page for instructions on
Format
how to format dates.
Specifies if cursor should arrange
balloons so they won't overlap. If chart
Avoid Balloon boolean true avoidBalloonOverlapping
Overlapping is rotated, it might be good idea to
turn this off.
Sets the duration of animation of a
Animation float animationDuration
Duration line, in seconds.
Defines if the balloon should be shown
Balloon
String horizontal above the data point or sideways balloonPointerOrientation
Pointer
Orientation
55 | P a g e
____________________________________________________________________________________________________________
Specifies if bullet for each graph will

Bullets boolean false bulletsEnabled
Enabled follow the cursor.
Size of a graph's bullet (if available) at
the cursor position. If you don't want
int bulletSize
Bullet Size
the bullet to change it's size, set this
property to 1.
Size of a graph's bullet (if available) at
the cursor position. If you don't want
Bullet Size
(Hovered) the bullet to change it's size, set this
property to 1.
If you make graph's bullets invisible by
setting their opacity to 0 and will set
float 1 bulletAlpha
Bullet Alpha
graph Bullet Alpha to 1, the bullets will
only appear at the cursor's position.
Scrollbar
Specifies if scrollbar is enabled. You
boolean true can hide/show scrollbar using this enabled
Enabled
property without actually removing it.
Specifies whether scrollbar has a resize
Resize boolean true resizeEnabled
Enabled feature.
Specifies which graph will be displayed
String in the scrollbar. Only Serial chart's graph
Graph
scrollbar can display a graph.
Specifies whether number of grid
Auto Grid boolean false Count is specified automatically, autoGridCount
Count
according to the axis size.
Background float Sets the Background opacity. backgroundAlpha
Alpha
Sets the Background color of the
Background String #D4D4D4 backgroundColor
Color scrollbar.
Text Color Sets the color of Text.

Height of resize grip image. Note, you
should also update the image in
Drag Icon int ChartsPLUS/images folder if you don't dragIconHeight
Height
want it to be distorted because of
resizing.
56 | P a g e
____________________________________________________________________________________________________________
Width of resize grip image. Note, you

Drag Icon int ChartsPLUS images folder if you don't dragIconWidth
Width
resizing.
Graph Fill float Set the opacity of Graph fill color. graphFillAlpha
Alpha
Graph Line String #BBBBBB Specifies the Graph line color. graphLineColor
Color
By default the graph type is the same
as the original graph's type, however
in case of candlestick or OHLC you
String might want to show line graph in the graphType
Graph Type
scrollbar. Possible values are: line,
column, step, smoothedLine,
candlestick, OHLC.
Set the Grid opacity. Value range is 0 -
float gridAlpha
Grid Alpha
1.
String #FFFFFF Sets the Grid color. gridColor
Grid Color
int Enable to sets the number of grid lines. gridCount

Grid Count
Specifies whether resize grips are
Hide Resize boolean hidden when mouse is away from the hideResizeGrips
Grips
scrollbar.
Maximum value of Value Axis of Chart
float Scrollbar. Calculated automatically, if maximum
Maximum
not set.
Minimum value of Value Axis of Chart
float Scrollbar. Calculated automatically, if minimum
Minimum
not set.
Distance from plot area to scrollbar, in
int offset
Offset
pixels.
Height (width, if chart is rotated) of a
Scrollbar int scrollbarHeight
Height scrollbar.
Duration of scrolling, when the user
clicks on scrollbar's background, in
Scroll int seconds. Note, update On Release scrollDuration
Duration
Only should be set to false in order
animation to happen.
57 | P a g e
____________________________________________________________________________________________________________
Selected Selected background opacity.

float selectedBackgroundAlpha
Background
Alpha
Selected Selected background color.
String #EFEFEF selectedBackgroundColor
Background
Color
Selected Selected graph's fill opacity. Value selectedGraphFillAlpha
Graph Fill float range is 0 - 1.
Alpha
Selected Selected graph's fill color.
String #888888 selectedGraphFillColor
Graph Fill
Color
Selected Selected graph's fill opacity. Value
float selectedGraphLineAlpha
Graph Line
range is 0 - 1.
Alpha
Selected Selected graph's line color.
String #888888 selectedGraphLineColor
Graph Line
Color
Specifies if the chart should be
updated while dragging/resizing the
Update on boolean true updateOnReleaseOnly
Release Only scrollbar or only at the moment when
Conditional Formatting
CONDITIONAL FORMATTING RULES
 Options: Enables to add a new Condition or to remove an existing Condition.
 Id: Unique ID of your Conditional Formatting Rule Set. Used to assign Rule Set to a Graph and for
scripting in BI Action Language.

 Rule Type: The type of Conditional Formatting rule to create. Options are Value-based and
Percentage-based rules.
 Percent Target: The target value that percentage based rules are built upon. Example would be a
target value of 200 means that a percent rule of 25% would be reached at a value of 50.
1. Field Type: Type of Field. 'By Name' maps a field by its key (e.g. 0AMOUNT). 'By Position' maps
a field by its ordinal position beginning at position 0 (First Column). 'Static' allows for placement
of a constant value such as '10.5' which can serve useful for hard-coded targets. 'By Name' is
useful when you want to guarantee a Graph configuration to a specific named column, whereas
'By Position' is useful when your chart should flex to ad-hoc navigations instead.
2. Field Position: Position of Column to map to, beginning at the first column (0).
58 | P a g e
____________________________________________________________________________________________________________
PERCENT RULES
 Value: Value to meet or exceed in order for the rule to be met. Rule is overridden if a higher value
rule is met.
1. Field Type: Type of Field. 'By Name' maps a field by its key (e.g. 0AMOUNT). 'By Position' maps
a field by its ordinal position beginning at position 0 (First Column). 'Static' allows for placement
of a constant value such as '10.5' which can serve useful for hard-coded targets. 'By Name' is
useful when you want to guarantee a Graph configuration to a specific named column, whereas
'By Position' is useful when your chart should flex to ad-hoc navigations instead.
(a) Field Name: Name of the Column to map to (Ex: 0AMOUNT).
(b) Field Position: Position of Column to map to, beginning at the first column (0).
(c) Static Value: Static Value of Column. This value is repeated across all rows.
 Color: Sets the color to apply if rule is met.
Conditional Formatting in ChartsPLUS 2.0

1. Add ChartsPLUS 2.0 to the Analysis application and assign the below Data source to it.
2. To add conditional formatting navigate to CONFIG>> Conditional Formatting>> Options>> Add

Conditional Formatting.
3. Set the Id as Profit Analysis, Rule-Type as Value Based.
4. Set Field Type as Name and Field Name as Profit %.
5. Under Formatting Rule>> Options>> Add Rule.
6. Set Field Type as Static Value as shown in the below Figure.
59 | P a g e
____________________________________________________________________________________________________________
7. Now Navigate to CONFIG>> Graphing>> Default Graph>>Conditional Formatting>> In Fill Color

Conditional Formatting from the dropdown select Profit Analysis option which is the Id of the
conditional formatting defined earlier.
8. Now the Graph will display colors of the columns as defined in the Formatting Rule.
CONFIG PROPERTIES OF XY CHARTS

XY charts are used to graph paired data. XY charts are quite different from line charts or graphs and so the
CONFIG properties of the charts also differ from other charts and are listed below.
60 | P a g e
____________________________________________________________________________________________________________
Appearance
MARGINS
 Auto-Margin Offset: Enable to set the Auto-Margin offset.
 Auto-Margins: Specifies if margins of a chart should be calculated automatically so that labels of
axes would fit. The chart will adjust only margins with axes. Other margins will use values set with
'Margin Right', 'Margin Top', 'Margin Left' and 'Margin Bottom' properties.
PLOT AREA
Enables to set the angle to the 3D
part of the plot area. If this value is
angle
3D Angle Number 45
greater than zero it will set 3D
effect to the chart.
Enables to set the depth of the 3D
part of the plot area. If this value is
depth3D
3D Depth Number 0
greater than zero it will set 3D
effect to the chart.
Sets the opacity of plot area's
Plot Area Border float plotAreaBorderAlpha
0%
Opacity border.
Plot Area Border Sets the color of plot area's border. plotAreaBorderColor
Color #000000
Color
float Sets the opacity of plot area. plotAreaFillAlphas
Plot Area Fill Opacity 0%
Sets the color gradient angle of the
Plot Area Gradient int 0 plotAreaGradientAngle
Angle plot area.
PLOT AREA FILL COLORS

 Options: Sets the color of plot area. Enables options to select the Color type like Single Color, SAP
Color and Color Brewer or to remove all the selected colors.
Interactivity
Cursor
Enabled Boolean False Specifies whether cursor is enabled.
Specifies if the user can zoom-in the
chart. If pan is set to true, zoomable zoomable
Zoomable Boolean True
is switched to false automatically.
Enable to set the color of Text. color
Text Color Color #FFFFFF
61 | P a g e
____________________________________________________________________________________________________________
Specifies where the cursor line

should be placed - on the beginning
of the period (day, hour, etc) or in
the middle (only when parseDates
property of categoryAxis is set to
Cursor String middle cursorPosition
Position true). If you want the cursor to
follow mouse and not to glue to the
nearest data point, set 'mouse' here.
Possible values are: start, middle,
mouse.
Enable to set the ccolor of the cursor
Cursor Line
Color #4A89E8
Color line.
Specifies the opacity of the cursor
Cursor Line
100%
Alpha line.
Selection float Sets the opacity of the selection. selectionAlpha
100%
Alpha
If this is set to true, the user will be
able to pan the chart (Serial only) pan
Pan Boolean False
instead of zooming.
If set to true, instead of a cursor line
user will see a fill which width will
always be equal to the width of one
fullWidth
Full Width Boolean False
data item. We'd recommend setting
cusrsorAlpha to 0.1 or some other
small number if using this feature.
Specifies if cursor should be left at
it's last position. Useful for touch
leaveCursor
Leave Cursor Boolean False
devices - user might want to see the
balloons after he moves finger away.
If this is set to true, only one balloon
One Balloon at a time will be displayed. Note, this oneBalloonOnly
Boolean False
Only
is quite CPU consuming.
If true, the graph will display balloon
on next available data point if
Show Next showNextAvailable
Boolean False
Available currently hovered item doesn't have
value for this graph.
Specifies if cursor should only mark
Select without selectWithoutZooming
Boolean False
Zooming selected area but not zoom-in after
62 | P a g e
____________________________________________________________________________________________________________

Axis of value line. If you set
valueLineBalloonEnabled to true, but
Value Line String you have more than one axis, you valueLineAxis
Primary Axis
Axis
can use this property to indicate
which axis should display balloon.
Specifies whether value balloons are
enabled. In case they are not, the
Value
balloons might be displayed anyway, valueBalloonsEnabled
Balloons Boolean True
Enabled when the user rolls-over the column
or bullet.
Specifies if cursor of Serial chart
should display horizontal (or vertical
if chart is rotated) line. This line
might help users to compare distant
Value Line valueLineEnabled
Boolean False
Enabled values of a chart. You can also enable
value balloon on this line by setting
valueLineAxis property of
ChartCursor.
value axis labels should be displayed.
If you have more than one axis, set
Value
valueLineAxis property to indicate valueBalloonsEnabled
Balloons Boolean False
Enabled which axis should display the
balloon.

value axis labels should be displayed.
Category If you have more than one axis, set
categoryBalloonEnabled
Balloon Boolean True
valueLineAxis property to indicate
Enabled
which axis should display the
balloon.
Specifies the opacity of the category
Category float categoryBalloonAlpha
100%
Balloon Alpha balloon.
Specifies color of the category
Category balloon. cursorColor is used if not categoryBalloonColor
Color
Balloon Color
set.
63 | P a g e
____________________________________________________________________________________________________________
Category balloon date format (used

Category only if category axis parses dates).
categoryBalloonDateFormat
Balloon Date String MMM DD, YYYY
Check this page for instructions on
Format
how to format dates.
Specifies if cursor should arrange
balloons so they won't overlap. If
Avoid Balloon avoidBalloonOverlapping
Boolean True
Overlapping chart is rotated, it might be good
idea to turn this off.
Sets the duration of animation of a
Animation animationDuration
Number 0.3
Duration line, in seconds.
Defines if the balloon should be
Balloon shown above the data point or
String horizontal balloonPointerOrientation
Pointer
sideways
Orientation
Specifies if bullet for each graph will

Bullets bulletsEnabled
Boolean False
Enabled follow the cursor.
Size of a graph's bullet (if available)
at the cursor position. If you don't
bulletSize
Bullet Size Number 8
want the bullet to change it's size,
set this property to 1.
Size of a graph's bullet (if available)
at the cursor position. If you don't
Bullet Size
Number 1.7
(Hovered) want the bullet to change it's size,
set this property to 1.
If you make graph's bullets invisible
by setting their opacity to 0 and will
float set graph Bullet Alpha to 1, the bulletAlpha
Bullet Alpha 100%
bullets will only appear at the
cursor's position.
Scrollbar
Specifies if scrollbar is enabled. You can
hide/show scrollbar using this property enabled
Enabled Boolean False
without actually removing it.
Specifies whether scrollbar has a resize
Resize resizeEnabled
Boolean False
Enabled feature.
64 | P a g e
____________________________________________________________________________________________________________
Specifies which graph will be displayed

String in the scrollbar. Only Serial chart's graphs
Graph
scrollbar can display a graph.
Specifies whether number of grid Count
Auto Grid is specified automatically, according to autoGridCount
Boolean False
Count
the axis size.
Background float Sets the Background opacity. backgroundAlpha
100%
Alpha
Sets the Background color of the
Background #FFFFFF backgroundColor
Color
Color scrollbar.
#000000 Sets the color of Text. color
Text Color Color
Height of resize grip image. Note, you
Drag Icon 35 ChartsPLUS/images folder if you don't dragIconHeight
Number
Height
resizing.
Width of resize grip image. Note, you
Drag Icon 35 ChartsPLUS images folder if you don't dragIconWidth
Number
Width
resizing.
Graph Fill float Set the opacity of Graph fill color. graphFillAlpha
100%
Alpha
Graph Line #BBBBBB Specifies the Graph line color. graphLineColor
Color
Color
By default the graph type is the same as
the original graph's type, however in
case of candlestick or OHLC you might
String graphType
Graph Type
want to show line graph in the scrollbar.
Possible values are: line, column, step,
smoothedLine, candlestick, OHLC.
float Set the Grid opacity. Value range is 0 - 1. gridAlpha
Grid Alpha 100%
#000000 Sets the Grid color. gridColor

Grid Color Color
5 Enable to sets the number of grid lines. gridCount

Grid Count Number
Specifies whether resize grips are hidden
Hide Resize hideResizeGrips
Boolean False
Grips when mouse is away from the scrollbar.
Maximum value of Value Axis of Chart maximum
Maximum Number
65 | P a g e
____________________________________________________________________________________________________________
Scrollbar. Calculated automatically, if

not set.
Minimum value of Value Axis of Chart
Scrollbar. Calculated automatically, if minimum
Minimum Number
not set.
Distance from plot area to scrollbar, in
0 offset
Offset Number
pixels.
Height (width, if chart is rotated) of a
Scrollbar 20 scrollbarHeight
Number
Height scrollbar.
Duration of scrolling, when the user
clicks on scrollbar's background, in
Scroll 1 seconds. Note, update On Release Only scrollDuration
Number
Duration
should be set to false in order animation
to happen.
Selected Selected background opacity.
1 selectedBackgroundAlpha
Background Number
Alpha
Selected Selected background color.
#EFEFEF selectedBackgroundColor
Background Color
Color
Selected Selected graph's fill opacity. Value range
1 selectedGraphFillAlpha
Graph Fill Number
is 0 - 1.
Alpha
Selected Selected graph's fill color.
#888888 selectedGraphFillColor
Graph Fill Color
Color
Selected Selected graph's fill opacity. Value range
0 selectedGraphLineAlpha
Graph Line Number
is 0 - 1.
Alpha
Selected Selected graph's line color.
#888888 selectedGraphLineColor
Graph Line Color
Color
Specifies if the chart should be updated
while dragging/resizing the scrollbar or
Update on updateOnReleaseOnly
Boolean False
Release Only only at the moment when user releases
mouse button.
66 | P a g e
____________________________________________________________________________________________________________
Graphing
Default Graph
GENERAL
Enables to select the type of graph from the
Graph Type
Dropdown.
id
ID String
title
Title String
Value Enables to select the projection method.
Summarize
Aggregation
XY chart only. Name of the x field in your
String xField
X Field
data Provider.
String which can serve useful for hard-coded fieldType
Field Type
flex to ad-hoc navigations instead
Fixed Position
String which can serve useful for hard-coded yField
Y Field
flex to ad-hoc navigations instead.
String Type of Field. 'By Name' maps a field by its fieldType
Field Type
67 | P a g e
____________________________________________________________________________________________________________

which can serve useful for hard-coded
flex to ad-hoc navigations instead
Fixed Position
int Bullet size. bulletSize

Bullet Size
Type of the bullets. Possible values are:

'none', 'round', 'square', 'triangleUp',
String none 'triangleDown', 'triangleLeft', 'triangleRight', bullet
Bullet
'bubble', 'diamond', 'xError', 'yError' and
'custom'.
Bullet color. Will use lineColor if not set. bulletColor
Bullet Color Color
Bullet size. bulletSize
Specifies minimum size of the bullet (XY
Min Bullet minBulletSize
Number 0
Size chart).
Specifies size of the bullet which value is the
Max Bullet maxBulletSize
Number 50
Size biggest (XY chart).
XY chart only. A horizontal value axis object
String xAxis
X Axis
to attach graph to.
XY chart only. A vertical value axis object to
String yAxis
Y Axis
attach graph to.
Enables to set the Precision of values, by
Value
Number
Precision default chart’s precision is set.
Enables to use tags like [[value]],
[[description]], [[percents]], [[open]],
[[category]] or any other field name from balloonText
Balloon Text String [[value]]
data provider to show in the Balloon. HTML
tags can also be used.
Connect Boolean True Specifies whether to connect data points if connect
68 | P a g e
____________________________________________________________________________________________________________
data is missing. By default this property is

enabled.
Enables to show or Hide the graph, but it is
recommended to use hide Graph(graph) hidden
Hidden Boolean False
and show Graph(graph) methods instead.
Specifies whether the value balloon of this
Show Balloon boolean true graph is shown when mouse is over data showBalloon
item or chart's indicator is over some series.
CONDITIONAL FORMATTING
Enables to select the condition for
Line/Bullet
Conditional Line/Bullet Chart that is defined in the
Formatting Conditional Formatting tab.
DATA FIELDS
Enables to select the Alpha field from the
Opacity Field
Enables to select the Bullet field from the
String bulletField
Bullet Field
Name of the color field in your data
String colorField
Color Field
Provider.
Name of the custom bullet field in your data
Custom Bullet String customBulletField
Field Provider.
Name of the dash length field in the data
Dash Length String change graphs’ line from solid to dash on dashLengthField
Field
any data point. You can also make columns
border dashed using this setting.
Description Name of the description field in your data
String descriptionField
Field
Provider.
Name of error value field in your data
String errorField
Error Field
provider.
Name of the fill colors field in your data
Fill Colors String fillColorsField
Field change line graphs’ fill color on any data
point to create highlighted sections of the
69 | P a g e
____________________________________________________________________________________________________________
graph. Works only with ChartsPLUS Serial

Chart.
Name of the gap field in your data Provider.
String You can force graph to show gap at a gapField
Gap Field
desired data point using this feature.
Label Color String Name of label color field in data provider. labelColorField
Field
String Name of the URL field in your data Provider. urlField
URL Field
APPEARANCE
Enable to set the color of the balloon. By
balloonColor
Balloon Color Color
default the graph or data item color is set.
Enable to set the column width for each
float graph individually. Value ranges from 0%- columnWidth
Column Width 100%
100%.
Enables to set the radius of Column corners.
Both the top and bottom of the column are cornerRadius
Corner Radius Number 0
effected.
If you set it to a value greater than 0, the
graph line (or columns border) will be dashLength
Dash Length Number 0
dashed.
float Enables to set the opacity of Columns. fillAlphas
Fill Alpha 100%
FILL COLORS
 Options: Enables options to select the Color type like Single Color, SAP Color, Color Brewer or to
Remove all the selected colors.

Enables to set a fixed Column width of the
Fixed Column fixedColumnWidth
Number
Width graph.
12 fontSize
Font Size Number
By default chart's fontSize is set.
Gradient String vertical gradientOrientation
Orientation By default chart's font Size is set.
Enables to set the opacity of the Line
float lineAlpha
Line Alpha 100%
(Column border).
70 | P a g e
____________________________________________________________________________________________________________
Enable to set the color of the Line lineColor

Line Color Color
Enables to set the thickness of the Line
lineThickness
Line Thickness Number 1
(Column border).
Enables to fill opacity of negative part of
Negative Fill negativeFillAlphas
100%
Alpha the graph. Will use fill Alphas by default.
NEGATIVE FILL COLORS

 Options: Enables options to select the Color type like Single Color, SAP Color, Color Brewer or to
Remove all the selected colors.

Enables to set the opacity of the negative
Negative Line float portion of the graph Line (Column negativeLineAlpha
Alpha
border).
Enables to set the color of the negative
portion of the graph Line. In case the
Negative Line String graph type is candlestick or OHLC, negativeLineColor
Color
negativeLineColor is used when close
value is less then open value.
This property should be used together
with topRadius (when columns look like
cylinders). If this property is enabled, the
boolean false showOnAxis
Show on Axis
cylinder will be lowered down so that the
center of its bottom circle would be right
on category axis.
By enabling this property value to 1,
columns will become cylinders (must set
depth3D and angle properties of a chart
to >0 values in order this to be visible).
int You can make columns look like cones (set topRadius
Top Radius
topRadius to 0) or even like some glasses
(set to bigger than 1). It is strongly
recommend to set grid opacity to 0 in
order to look good.
71 | P a g e
____________________________________________________________________________________________________________
BULLETS AND LABELS

Enable to select the type of bullet from
the list of available options like 'none',
'round', 'square', 'triangleUp',
String none bullet
Bullet
'triangleDown', 'triangleLeft',
'triangleRight', 'bubble', 'diamond',
'xError', 'yError' and 'custom'.
Enable to select the color of the Bullet
color. By default bullet color is set bulletColor
Bullet Color Color
same as Line color.
Enable to set the Bullet Size. bulletSize
Enable to set the opacity of the Bullet bulletAlpha
Bullet Alpha 100%
bulletAxis value is used when you are
building error chart. Error chart is a
regular serial or XY chart with bullet type
set to 'xError' or 'yError'. The graph should
know which axis should be used to
determine the size of this bullet - that's
String bulletAxis
Bullet Axis
when bullet axis should be set. Besides
that, you should also set graph.errorField.
You can also use other bullet types with
this feature too. For example, if you set
Bullet Axis for XY chart, the size of a bullet
will change as you zoom the chart.
Enable to set the opacity of the Bullet
Bullet Border float bulletBorderAlpha
100%
Alpha Border.
Enable to set the color of the Bullet
Bullet Border Border. By default Line color is set to this bulletBorderColor
Color
Color
property.
This property works with candlestick
graph type, you can set it to open, close,
String close high and low. If this is set to high, the showBulletsAt
Show Bullets At
events will be shown at the tip of the high
line.
Cursor Bullet float 100% If bullets enabled of Chart cursor is true, a cursorBulletAlpha
72 | P a g e
____________________________________________________________________________________________________________
Alpha bullet on each graph follows the cursor.

You can set opacity of each graphs bullet.
In case you want to disable these bullets
for a certain graph, set opacity to 0.
Enable to set the path of the image that is
customBullet
Custom Bullet String
used as custom bullet.
The Bullet counts can be hidden if there
Hide Bullets are more data points by using this feature. hideBulletsCount
Number 0
Count
0 means the bullets will always be visible.
If graph's type is column and label text is
set, graph hides labels which do not fit
Show All Value showAllValueLabels
Boolean False
Labels into the column's space. If you don't want
these labels to be hidden, set this to true.
String auto Enable to set the data label text anchor. labelAnchor
Label Anchor
Offset of data label. labelOffset
Label Offset Number 0
Enable to set the position of the label as

'bottom', 'top', 'right', 'left', 'inside',
String top 'middle'. Sometimes position is changed labelPosition
Label Position
by the chart, depending on a graph type,
rotation, etc.
Enable to set the tags like [[value]],
[[description]], [[percents]], [[open]], labelText
Label Text String
[[category]].
Enable to set the thickness of the bullet
Bullet Border bulletBorderThickness
Number 2
Thickness border.
LEGEND
Enable to set whether to show/hide the
Visible in visibleInLegend
Boolean True
Legend graph in the legend.
Enabling this feature will hide the graph
switchable
Switchable Boolean True
when the user clicks on legend entry.
Provide the path of the image to set it as
Custom customMarker
String
Marker Custom Marker.
Enable to set the Legend Marker opacity,
by default Line alpha is set as Legend legendAlpha
Legend Alpha 100%
alpha.
73 | P a g e
____________________________________________________________________________________________________________
Enable to set the Legend Marker color. legendColor

Legend Color Color
This property enables to set the text of
Legend value. You can use tags like
[[value]], [[description]], [[percents]],
Legend Value legendValueText
String
Text [[open]], [[category]]. You can also use
custom fields from your data Provider. If
not set, uses Legend's value Text.
This property enables to set the text
which will be displayed in the value
portion of the legend when user is not
hovering above any data point. The tags
should be made out of two parts - the
name of a field (value / open / close / high
Legend Period legendPeriodValueText
String
Value Text / low) and the value of the period that
need to be shown- open / close / high /
low / sum / average / count.
Ex: [[value.sum]] means that sum of all
data points of value field in the selected
period will be displayed.
Enables to set the Marker Type of the
Legend for individual graphs from the
available list of options like circle,
String markerType
Marker Type
diamond, triangleUp, triangleDown,
triangleLeft, triangleDown, bubble, line,
none.
MISC
XY chart only. If you set this property to id
or reference of your X or Y axis, and the fill
String Alphas is > 0, the area between graph and fillToAxis
Fill to Axis
axis will be filled with color, like in this
demo.
You can set another graph here and if fill
alpha is >0, the area from this graph to Fill
String fillToGraph
Fill to Graph
To Graph will be filled (instead of filling
the area to the X axis). This feature is not
74 | P a g e
____________________________________________________________________________________________________________
supported by smoothed Line graphs.

Whether to include this graph when
Include in includeInMinMax
Boolean True
Min/Max calculating min and max value of the axis.
It is useful if you have really lots of data
points. Based on this property the graph
will omit some of the lines (if the distance
between points is less that minDistance, in
pixels). This will not affect the bullets or
indicator in anyway, so the user will not
Min. Line
Number 1
Distance see any difference (unless you set
minValue to a bigger value, let say 5), but
will increase performance as less lines will
be drawn. By setting value to a bigger
number you can also make your lines look
less jagged.
If you use different colors for your
negative values, a graph below zero line is
filled with negativeColor. With this
negativeBase
Negative Base Number 0
property you can define a different base
value at which colors should be changed
to negative colors.
This property can be used by step graphs -
you can set how many periods one periodSpan
Period Span Number 1
horizontal line should span.
Specifies where data points should be
placed - on the beginning of the period
(day, hour, etc) or in the middle (only
String middle when parseDates property of categoryAxis pointPosition
Point Position
is set to true). This setting affects Serial
chart only. Possible values are 'start',
'middle' and 'end'
If you want mouse pointer to change to
Show Hand on hand when hovering the graph, set this showHandOnHover
Boolean False
Hover
property to true.
Target to open URLs in, i.e. _blank, _top,
urlTarget
URL Target String
etc.
Negative Color If negativeLineColor and/or
Boolean False
if Down
75 | P a g e
____________________________________________________________________________________________________________
negativeFillColors are set and

useNegativeColorIfDown is set to true
(default is false), the line, step and column
graphs will use these colors for lines,
bullets or columns if previous value is
bigger than current value. In case you set
openField for the graph, the graph will
compare current value with openField
value instead of comparing to previous
value.
Axes
Guides
Guides enable to set a single value or a range as reference point in a Chart.
 Options: Enable to Add or Remove Guide. You can also add multiple guides to a Chart.
GENERAL
Specifies the General properties of Guide.

Unique id of a Guide. You don't need to set
Id String Guide id
Fill Color Color Fill color of Guide fillColor

Fill Alpha 100% Fill opacity of Guide fillAlpha
Value Axis of the Guide. As you can add
Value Axis guides directly to the chart, you might need valueAxis
to specify which value axis should be used.
Value of the Guide (in case the guide is for a
Value Axis).
Value... Value Type: Data Bound or Static Value value

'To' value of the guide (in case the guide is
for a Value Axis).
To Value Value Type: Data Bound or Static Value toValue

Category... Category of the guide (in case the guide is category
76 | P a g e
____________________________________________________________________________________________________________
for category axis).

'To' category of the guide (in case the guide
is for category axis).
...To Category toCategory
Works if the Guide is added to the 'Category
Axis' and this axis is non-date-based. If set,
Expand Boolean False the Guide will start (or be placed, if it's not a expand
fill) on the beginning of the category cell
and will end at the end of 'To Category' cell.
If you set it to true, the guide will be
Above Boolean False above
displayed above the graphs.
LABEL
Enables to set the properties of the Guide Labels

Set the label text which will be displayed
label
Label String
near the guide.
#000000 Sets the color of a Guide label. color
Color Color
Specifies the Position of guide label.
Possible values are 'left' or 'right' for
center labelPosition
Label Position String
horizontal axis and 'top' or 'bottom' for
vertical axis.
Enable to set the Rotation angle of a guide
labelRotation
Label Rotation Number
label.
Enable to set the font size of Guide label.
Font Size Number
fontsize
Specifies if Guide label should be displayed
Label Inside Boolean False
inside the chart or not.
Specifies if Guide label should be bold or
boldLabel
Bold Label Boolean False
not.
77 | P a g e
____________________________________________________________________________________________________________
BALLOON
Specifies the Balloon properties of Guide.

Enable to set the text which will be
balloonText
Balloon Text String
displayed if the user rolls-over the guide.
Specifies the Balloon Fill Color balloonColor
Balloon Color Color
LINE
Enables to Customize the Guide Line.

lineThickness
Line Thickness Number Enable to set Line Thickness.
Enables to set the Line Color. lineColor
Line Color Color
Specifies the Line Opacity. lineAlpha
Line Alpha 100%
If the value is > 0 the line will be displayed
as dashed. The length of the Dash length dashLength
Dash Length Number
depends on the value given.
Enables to set the Tick Length of the guide.
tickLength
Tick Length Number
Value 0 hides the Tick.
Value Axes
This is a Chart axis that displays scaled numerical values.
A column chart will have only one Value axis where as a combination chart may contain 2 value axis to scale each
graph.
ChartsPLUS 2.0 enables to customize these value axes under Value Axes section using the below properties.
Options: Enables to add or Remove a Single or Dual value axis.
 Add Value Axis: Adds a Single value axis.

 Create Dual Axes: Adds Dual Axes (Primary and Secondary) and the properties of each axis can
be modified individually.
 Remove All: Remove all axes that are added.
78 | P a g e
____________________________________________________________________________________________________________
GENERAL
Unique id of value axis. It is required to set
Id String Value Axis it, if you need to tell the graph which exact
Id
value axis it should use.
Title String Specifies the title of the axis

Displays the Axis Title in Bold. titleBold
Title Bold Boolean False
Specifies Color of axis title. Will use text
titleColor
Title Color Color
color of chart if not set any.
Specifies Font size of axis title. Will use font
titleFontSize
Title Font Size Number
size of ChartsPLUS 2 pixels if not set any
If you don't want min value to be calculated
value might still be adjusted so that it would minimum
Minimum Number
intervals.
If you don't want max value to be calculated
value might still be adjusted so that it would maximum
Maximum Number
intervals.
If you set minimum and maximum for your
axis, chart adjusts them so that grid would
start and end on the beginning and end of
Strict plot area and grid would be at equal
Boolean False
Min/Max
intervals. If you set strict Min/Max to true,
the chart will not adjust minimum and
maximum of value axis
Specifies if this value axis scale should be
logarithmic
Logarithmic Boolean False
logarithmic.
Specifies if value axis should be reversed
reversed
Reversed Boolean False
(smaller values on top).
Possible values are: 'top', 'bottom', 'left',
'right'. If axis is vertical, default position is
position
Position Number Left
'left'. If axis is horizontal, default position is
'bottom'.
Stacking mode of the axis. Possible values stackType
Stack Type Number
79 | P a g e
____________________________________________________________________________________________________________
are: 'none', 'regular', '100%', '3D'. Note,

only graphs of one type will be stacked.
Specifies whether number of Grid Count is
Auto Grid specified automatically, according to the autoGridCount
Boolean False
Count
axis size.
If auto Margins of a chart is set to true, but
you want this axis not to be measured when
Ignore Axis ignoreAxisWidth
Boolean False
Width calculating margin, set ignore Axis Width to
true.
The distance of the axis to the plot area, in
0 offset
Offset Number
pixels. Negative values can also be used.
GRID AND FILLS

Enables to select Grid Type for Radar chart.
String polygons Possible values are: 'polygons' and 'circles'. gridType
Grid Type
For polar charts ‘circles’ can be set.
Grid Opacity Number Specifies the opacity of grid lines.

Specifies color of grid lines. gridColor
Grid Color Color
Number of grid lines. In case this is value
axis, or your categoryAxis parses dates, the
5 number is approximate. The default value is gridCount
Grid Count Number
5. If you set auto Grid Count to true, this
1 Specifies thickness of grid lines. gridThickness
Grid Thickness Number
Specifies opacity of minor grid. In order
Minor Grid 0.07 minor to be visible, you should set minor minorGridAlpha
Number
Alpha
Grid Enabled to true.
Minor Grid Specifies if minor grid should be displayed. minorGridEnabled
Boolean False
Enabled
AXIS APPERANCE
1 axisAlpha
Axis Opacity Number Specifies the opacity of Axis
#000000 Enable to set the color of Axis axisColor
Axis Color Color
Axis Thickness Number 1 Specifies thickness of Axis axisThickness
80 | P a g e
____________________________________________________________________________________________________________
0 Enables to set the Base value of the axis. baseValue

Base Value Number
Specifies the Length of a dash. 0 means line
0 dashLength
Dash Length Number
is not dashed.
If your values represents time units, and
you want value axis labels to be formatted
as duration, you have to set the duration duration
Duration String
unit. Possible values are: 'ss', 'mm', 'hh' and
'DD'.
be filled with color. Set fill Alpha to a value fillAlpha
Fill Opacity Number
be filled with color. Set fill Alpha to a value fillColor
Fill Color Color
Enable to set the length of the tick marks. tickLength
Tick Length Number
LABELS
Specifies whether axis displays category
Labels labelsEnabled
Boolean False
Enabled axis' labels and value axis' values.
Frequency at which labels should be placed.
Label 1 Doesn't work for Category Axis if parse labelFrequency
Number
Frequency
Dates is set to true.
Enables to adjust position of axes labels.
15 Works both with Category Axis and Value labelOffset
Label Offset Number
Axis.
Enables to Rotate the angle of a label. Only
horizontal axis' values can be rotated. If you
labelRotation
Label Rotation Number
set this for vertical axis, the setting will be
ignored. Possible values from -90 to 90.
Specifies if axis labels should be bold or not. boldLabels
Bold Labels Boolean False
Specifies the color of axis value labels. Will
color
Text Color Color
use chart's color by default.
Sets the size of value labels text. Will use
12 fontSize
Font Size Number
chart's font Size by default.
81 | P a g e
____________________________________________________________________________________________________________
Whether to show first axis label or not. This

works properly only on Value Axis.
Show First showFirstLabel
Boolean False
Label With Category Axis it won’t work 100%, it
Whether to show last axis label or not. This
works properly only on Value Axis.
Show Last showLastLabel
Boolean False
Label With Category Axis it will not work 100%, it
Specifies whether values should be placed
inside
Inside Boolean False
inside or outside plot area.
Min count (when auto Grid Count is true). It
75 minHorizontalGap
Horizontal Number
specifies minimum cell width required for
Gap
count (when autoGridCount is true). It
Min Vertical 35 minVerticalGap
Number
Gap specifies minimum cell height required for
Specifies if graph’s values should be
Recalculate to
Boolean False
Percent’s recalculated to percent’s.
Specifies whether values on axis can only be
integersOnly
Integers Only Boolean False
integers or both integers and doubles.
-1 Precision (number of decimals) of values. precision
Precision Number
Unit which will be added to the value label. unit
Unit String
Position of the unit. Possible values are 'left'
String right unitPosition
Unit Position
and 'right'.
If true, prefixes will be used for big and
small numbers. You can set arrays of
prefixes directly to the chart object via usePrefixes
Use Prefixes Boolean False
prefixes of Small Numbers and prefixes of
Big Numbers.
If true, values will always be formatted
using scientific notation (5e+8, 5e-8...)
Use Scientific Otherwise only values bigger then 1e+21 useScientificNotation
Boolean False
Notation
and smaller then 1e-7 will be displayed in
scientific notation.
82 | P a g e
____________________________________________________________________________________________________________
MISC
Specifies whether guide values should
Include Guides be included when calculating min and
Boolean False
in Min/Max
max of the axis.
If true, the axis will include hidden
Include graphs when calculating min and max includeHidden
Boolean False
Hidden
values.
If set value axis scale (min and max
numbers) will be multiplied by it. I.e. if
Min/Max
Number
Multiplier set to 1.2 the scope of values will
increase by 20%.
Radar chart only. Specifies if
Radar
categories (axes' titles) should be radarCategoriesEnabled
Categories Boolean False
Enabled displayed near axes)
In case you synchronize one value axis
with another, you need to set the
Synchronizatio synchronization multiplier. Use synchronizationMultiplier
Number
n Multiplier
synchronize With Axis method to set
with which axis it should be synced.
One value axis can be synchronized
with another value axis. You can use
both reference to your axis or id of the
Synchronize String synchronizeWith
With axis here. You should set
synchronization Multiplier in order for
this to work.
If this value axis is stacked and has
columns, setting value Axis. totalText
totalText
Total Text String
= '[[total]]' will make it to display total
value above the most-top column.
Total Text Specifies color of total text. totalTextColor
Color
Color
Specifies distance from data point to
Total Text 0 totalTextOffset
Number
Offset total text.
This allows you to have logarithmic
value axis and have zero values in the
0 treatZeroAs
Treat Zero As Number
data. You must set it to >0 value in
order to work.
83 | P a g e
____________________________________________________________________________________________________________
CONGIF PROPERTIES OF SLICED CHARTS

Under General Properties you can select the Chart type, Customize Chart Font, Size of Chart, Customize Chart
Background, Number formatting etc.
Appearance
BASICS
Name of the field in chart's data
Description String Provider which holds a string with descriptionField
Field
description.
String Enables to set the Title Field. titleField
Title Field All Dimensions
String Enables to set the Value Field. valueField

Value Field
When enabled, will allow aggregation
to take place by the 'Title Field'
designated on in the configuration.
Value String valueFieldAggregation
Summarize
Aggregation This allows you chart one dimension
even when the data source contains
more than one dimension in its rows.
Opacity 100% Sets the opacity of all slices.

Angle of the first slice, in degrees. This
will work properly only if 'Depth 3D' is
set to 0. If 'Depth 3D' is greater than 0, startAngle
Start Angle Number 90
then there can be two angles only: 90
and 270. Value range is 0-360.
RADIUS
pieMinRadius
Pie Radius Number 20 Minimum Pie Radius
Inner radius of the pie, in pixels or
0 innerRadius
Inner Radius Number
percentage.
Radius of a pie, in pixels or percents.
By default, radius is calculated radius
Radius Number 0
automatically.
OTHER
Name of the field in chart's
String dataProvider which holds slice's alphaField
Opacity Field
Opacity.
84 | P a g e
____________________________________________________________________________________________________________
The following tags can be used:
[[title]]: [[value]], [[title]], [[percents]],

[[percents]]% [[description]] or any other field name balloonText
Balloon Text String
([[value]])[[descript
ion]] from your data provider. HTML tags
can also be used.
Name of the field in chart's
String colorField
Color Field
dataProvider which holds slice's color.
Sometimes, because of a rounding,
percent of a sum of all slices is not
equal to 100%. If you set this to true,
Adjust adjustPrecision
Boolean False
Precision when this case happens, number of
decimals will be increased so that sum
would become 100%.
3D APPEARANCE
 Pie Angle: Pie lean angle (for 3D effect). Valid range is 0 - 90.
 3D Pie Depth: Depth of the pie (for 3D effect).
INTERACTIVITY
float
Hover Opacity 100% Opacity of a hovered slice. hoverAlpha
Pull Duration Number 1 Pull out duration, in seconds. pullOutDuration

Pull Effect String Bounce Pull out effect.
Pull out radius, in pixels or percentage. You
Pull Radius Number 20 can set the value either in Pixels or pullOutEffect
Percentage.
OUTLINE
Outline float
0% Outline opacity. outlineAlpha
Opacity
Outline Color Color #FFFFFF Outline color. outlineColor
Outline Pie Outline Thickness. outlineThickness
Number 1
Thickness
ANIMATION
Sequenced Boolean 1 Specifies whether the animation should be coordSequence
85 | P a g e
____________________________________________________________________________________________________________
Animation sequenced or all slices should appear at dAnimation

once.
Initial opacity of all slices. Slices will fade in
float coordStartAlpha
Start Opacity 0%
from start Opacity.
Radius of the positions from which the
startRadius
Start Radius Number 500
slices will fly in.
Pie Start Duration of the animation, in seconds.
Number 0
Duration
Pie Start Effect Start Effect
Grouped Slice
Grouped Slice float groupedAlpha
100% Sets the opacity of the group slice.
Opacity
Color of the group slice. The default value is
Grouped Slice not set - this means the next available color groupedColor
Color
Color
from 'colors' property will be used.
If this is set, the group slice will be pulled
Grouped Slice groupedDescription
String
Description out when the chart loads.
If this is set, the group slice will be pulled
Grouped Slice groupedPulled
Boolean False
Pulled out when the chart loads.
Other Title of the group slice. groupedTitle
Grouped Title String
If there is more than one slice whose
percentage of the pie is less than this
Group Slice number, those slices will be grouped groupPercent
Number 0
Percent
together into one slice. This is the 'other'
slice. It will always be the last slice in a pie.
Labels
Slices with percent less then 'Hide Labels
Percent' won't display labels This is useful to
avoid cluttering up the chart, if you have a hideLabelsPercent
Hide Percent Number 0
lot of small slices. 0 means all labels will be
shown.
The distance between the label and the
slice, in pixels. You can use negative values labelRadius
Label Radius Number 20
to put the label on the slice.
86 | P a g e
____________________________________________________________________________________________________________
Name of the field in data Provider which

specifies the length of a tick. Note, the chart
Label Field
will not try to arrange labels automatically if
this property is set.
Labels Specifies whether data labels are visible. labelsEnabled
Boolean True
Enabled
The following tags can be used: [[value]],
[[title]]: [[title]], [[percents]], [[description]] or any labelText
Label Text String
[[percents]]%
other field name from your data provider.
Label tick opacity. Value range is 0 - 1. labelTickAlpha
Label Opacity 20%
Sets Label tick color. labelTickColor
Label Color Color #000000
If width of the label is bigger than Maximum
maxLabelWidth
Max Width Number 200
Label Width, it will be wrapped.
Positioning
Pie Bottom Number 10 Bottom margin of the pie.
Pie Top Number 10 Top margin of the pie.
Pie Left Number 0 Left margin of the pie.
Pie Right Number 0 Right margin of the pie.
PIE CENTER
pieX
You can set fixed position of a pie center, in
Pie X Number 0
pixels or in percentage.
You can set fixed position of a pie center, in pieY
Pie Y Number 0
pixels or in percentage.
CONGIF PROPERTIES OF GAUGE CHARTS

A Gauge enables to display a single value KPI against a meaningful alert track.
The CONFIG properties of Gauge Charts differ from other Charts and were listed below.
Appearance
BEHAVIOR
adjustSize
Adjust Size Boolean False Uses the whole space of the canvas to draw
87 | P a g e
____________________________________________________________________________________________________________
the gauge.
Useful when you intend your gauge to act
Clockwise clockWiseOnly
Boolean False
Only as a clock.
Minimum radius of a gauge. minRadius
Min Radius Number 10
GUAGE FACE
float faceAlpha
Face Opacity 0% Gauge face opacity.
Face Border float Gauge Face Border Opacity faceBorderAlpha
0%
Opacity
Face Border Gauge Face Border Opacity
Color #555555
Color
Face Border Gauge Face Border Width faceBorderWidth
Number 1
Width
Gauge Face Color faceColor
Face Color Color #FAFAFA
Face Gauge Face Image Pattern
Pattern(Experi String
mental)
POSITION
Gauge's horizontal position in pixels, origin
gaugeX
Gauge X Number
is the center. Centered by default.
Gauge's vertical position in pixels, origin is
gaugeY
Gauge Y Number
the center. Centered by default.
MARGINS
Number of pixels between the container's
bottom border and plot area. This space
Margin can be used for bottom axis' values. If marginBottom
Number 20
Bottom
auto Margin is true and bottom side has
axis, this property is ignored.
top border and plot area. This space can
be used for top axis' values. If auto Margin marginTop
Margin Top Number 20
is true and top side has axis, this property
is ignored.
88 | P a g e
____________________________________________________________________________________________________________

top border and plot area. This space can
be used for top axis' values. If auto Margin marginLeft
Margin Left Number 20
is true and top side has axis, this property
is ignored.
right border and plot area. This space can
be used for Right axis' values. If auto marginRight
Margin Right Number 20
Margin is true and right side has axis, this
ANIMATION
Duration of
startDuration
Arrow Number 0
Duration of Arrow Animation
Animation
Transition effect of the arrows, possible
String effects: easeOutSine, easeInSine, elastic, startEffect
Start Effect Bounce
bounce.
Arrows
Options Enables to Add or Remove an Arrow.
Unique id of an Arrow. You don't need to
Id String Arrow id
set it, unless you want to
{"valueType" : Value that need to be shown in the

"static", Gauge. It can be Data bound or a Static
Value String value
"staticValue" : "10"
} one.
Gauge Axis String Gauge Axis Enables to set the Gauge Axis. axis
Alpha float 100% Sets the Arrow Opacity alpha
Border Alpha float 100% Sets the Arrow border opacity. borderAlpha
Clock wise Sets the Arrow to revolve clock wise only
Boolean False clockWiseOnly
only
Color Color #000000 Sets the color of the Arrow color
Sets Inner radius of the Gauge, you can set
Inner Radius Number innerRadius
either in Pixel or Percentage.
Nail Alpha 100% Sets the Opacity of Nail nailAlpha
89 | P a g e
____________________________________________________________________________________________________________
Nail Border Sets the Nail Border Thickness

Number nailBorderThickness
Thickness
Nail Radius Number Specifies the Nail Radius nailRadius
Sets the Length of Needle, you can set
Radius Number radius
either in Pixel or Percentage.
Start Width Number Sets Needle width startWidth
Axes
GENERAL PROPERTIES
Id String Gauge Axis Unique id of an axis. id
{"valueType" : "static", Axis start (min) value. It can be either
Start Value Number "staticValue" : "0" } static or Data bound startValueConfig
Axis end (max) value. It can be either

{"valueType" : "static",
End Value Number endValueConfig
"staticValue" : "100" } static or Data bound
Axis start angle. Valid values are from -
Start Angle Number -120 startAngle
180 to 180.
Axis end angle. Valid values are from -
End Angle Number 120 endAngle
180 to 180.
Number of grid lines. Note, Gauge Axis
doesn't adjust 'Grid Count', so you
Grid Count Number 5 should check your values and choose a gridCount
proper 'Grid Count' which would result
grids at round numbers.
A text value which can be placed next to
Unit String unit
axis labels
Unit Position String Right Position of the unit. unitPosition

Interval at which ticks with values
Value Interval Number Int valueInterval
should be placed.
APPEARANCE
float axisAlpha
Axis Opacity 100% Axis opacity.
Axis color. axisColor
Axis Color Color #000000
Thickness of the axis outline. axisThickness
Axis Thickness Number 1
X position of the axis, relative to the
Center X (px) Number
90 | P a g e
____________________________________________________________________________________________________________
center of the gauge. You can set either in

Pixel or Percentage.
Y position of the axis, relative to the
Center Y (px) Number center of the gauge. You can set either in
Pixel or Percentage.
Specifies if grid should be drawn inside or
gridInside
Grid Inside Boolean True
outside the axis.
Specifies if labels should be placed inside
inside
Inside Boolean True
or outside the axis.
Label Frequency of labels. labelFrequency
Number 1
Frequency
Distance from axis to the labels. labelOffset
Label Offset Number 15
Interval at which minor ticks should be
Minor Tick minorTickInterval
Number
Interval placed.
Minor Tick Length of the Minor Ticks minorTickLength
Number 5
Length
Axis radius. You can set either in Pixel or
radius
Radius Number
Percentage.
Specifies if the first label should be
Show First showFirstLabel
Boolean True
Label shown.
Show Last Specifies if the last label should be shown. showLastLabel
Boolean True
Label
Tick Opacity 100% Opacity of axis ticks.
Tick Color Color Color of axis ticks.

Length of a major tick. tickLength
Tick Length Number 10
Tick thickness. tickThickness
Tick Thickness Number 1
BANDS
Band Opacity 100% Opacity of band fills.
Band Outline Opacity of band outlines.
100%
Opacity
Band Outline Color Color #000000 Color of band outlines.
Band Outline Thickness of band outlines.
Number 0
Thickness
Balloon Text balloonTextConfig
Start Value Number Start value of a fill. startValueConfig
End Value Number End value of a fill. endValueConfig
Color Color Color of a band color
91 | P a g e
____________________________________________________________________________________________________________
Opacity of band fill. Will use axis's 'Band

Opacity 100% alpha
Opacity' if not specified here.
Inner radius of a band. If not set any, the
band will end with the end of minor
Inner Radius Number 85 innerRadius
ticks. Set 0 if you want the band to be
drawn to the axis center.
Band radius. If not set any, the band will
Radius Number 100 radius
start with the axis outline.
LABELS
Specifies if labels on the axis should be
labelsEnabled
Labels Enabled Boolean True
shown
Specifies if small and big numbers
should use prefixes to make them more usePrefixes
Use Prefixes Boolean False
readable.
Bottom Text Number Text displayed below the axis center.

Specifies if text should be bold. bottomTextBold
Bottom Text Bold Boolean True
Bottom text color. bottomTextColor
Bottom Text Color Color
Font size of bottom text. bottomTextFontSiz
Bottom Text Font Size Number e
Y offset of bottom text. bottomTextYOffset

Bottom Text Y-Offset Number
String Text displayed above the axis center. topText

Top Text
Specifies if text should be bold. topTextBold
Top Text Bold Boolean True
Color of top text. topTextColor
Top Text Color Color
Font size of top text. topTextFontSize
Top Text Font Size Number
Y offset of top text. topTextYOffset
Top Text Y-Offset Number 0
Gauges in ChartsPLUS 2.0:

Using ChartsPLUS 2.0 you can create Gauge with single and multiple band
Creating a Multiple Band and Multiple Axis Guage:
1. Add ChartsPLUS to the Analysis Application.

2. Now change the chart type to Gauge.
92 | P a g e
____________________________________________________________________________________________________________
3. Now navigate to CONFIG>> Axes>> Gauge Axis and set the Start Angle as -120 and End Angle as
45.
4. Set the Bands properties as below
5. To add Bands to the Gauge go to Options >> select Add Band.

6. Now set all the Band properties like Start Value, End Value, Opacity, Radius etc.( In this case
these properties as set as below)
7. Similarly you can add required number of Bands from Options>> Add Band and can customize
them (In this case two more Bands and added and their properties are customized as below)
93 | P a g e
____________________________________________________________________________________________________________
8. Now the Gauge with multiple Bands appears as below
Multiple Bands Gauge
9. Now go to options and select Add Gauge Axis. This will add another Gauge axis to the Chart. Give
the Id as Secondary Gauge, now set the Start Angle as 80 and End Angle as 140.
10. Set the Gauge Start Value as 0 by selecting Value Type as Static Value, similarly set End Value as
100.
11. Now go to section Arrows>> Options>> select Add Arrow.
12. Now set the property Gauge Axis as Secondary Gauge from the Dropdown.
13. You can set the other properties based on the requirement. ( In this case the Gauge appears as
below)
94 | P a g e
____________________________________________________________________________________________________________
Multiple Bands and Multiple Axis Gauge

14. Similarly you can build other gauges which appear as below.
GENERAL
Under General Properties you can select the Chart type, Customize Chart Font, Size of Chart, Customize Chart
Background, Number formatting etc.
General
Enables to select the Chart Type from the
available possible types: 'Serial', 'Pie', 'XY', chartType
Chart Type Serial
'Radar', 'Funnel', and 'Gauge'.
Text Color Color #000000 Enables to set the color of the chart Text.
CSS
Specifies if class names should be added to
Add Class addClassNames
Boolean False
Names chart elements.
This prefix is added to all class names which
Class Name are added to all visual elements of a chart in classNamePrefix
String ChartsPLUS2
Prefix
case 'Add Class Names' is enabled.
95 | P a g e
____________________________________________________________________________________________________________
BORDER & BACKGROUND

Enables to set the ‘Background
Background Opacity' of the chart, must be set over backgroundAlpha
0%
Opacity
0 to apply.
Enables to set the ‘Background color'
Background backgroundColor
Color #FFFFFF
Color of the chart. Ex: #A08888
Enables to set the Border Opacity of
Border borderAlpha
0%
Opacity the Chart.
Border Color, 'Border Opacity' must be
borderColor
Border Color Color #000000
set over 0 to apply.
NUMERIC FORMATS
Specify the Decimal Separator that
Decimal . decimalSeparator
String
Separator need to be used.
Precision of percent values. -1 means
Percent percent values won't be rounded at all percentPrecision
Number 2
Precision
and show as they are.
Precision of values. -1 means values
won't be rounded at all and show as precision
Precision Number -1
they are.
Specifies the Thousand Separator
Thousand thousandsSeparator
String ,
Separator character.
FONT
Enables to select the font family from
fontFamily
Font Family Calibri(Window)
the list of available options.
Specifies the Font size. fontSize
Font Size Number 12
HAND DRAWING
If set, the lines of the chart will be
distorted and will produce hand-
drawn effect. Try to adjust 'Hand Draw handDrawn
Hand Drawn Boolean False
Scatter' and 'Hand Draw Thickness'
properties for a more scattered result.
96 | P a g e
____________________________________________________________________________________________________________
Defines by how many pixels hand-

Hand Draw drawn line will fluctuate (when 'Hand handDrawScatter
Number 2
Scatter
Drawn' is set.)
Defines by how many pixels line
Hand Draw thickness will fluctuate (when 'Hand handDrawThickness
Number 1
Thickness
Drawn' is set.)
This setting affects touch-screen
devices only. If a chart is on a page,
and 'Enable Pan Events' is set, the
page won't move if the user touches
the chart first. If a chart is big enough
and occupies all the screen of your
Pan Events panEventsEnabled
Boolean True
Enabled touch device, the user won’t be able
to move the page at all. If you think
that selecting/panning the chart or
moving/pinching the map is a primary
purpose of your users, you should set
'Enable Pan Events'.
MICS/EXPERIMENTAL
Unset this if you don't want chart to
resize itself whenever its parent autoResize
Auto Resize Boolean True
container size changes.
Enables to specify a Theme. theme
Theme String
Enables the Responsive (Experimental)
responsive
Responsive Boolean False
mode.
97 | P a g e
____________________________________________________________________________________________________________
Number Prefixes
This section enables to add Prefixes to Small and Big Numbers in the Chart.

If set, prefixes will be used for big and
small numbers. You can specify the
types of prefixes via 'Prefixes of Small usePrefixes
Use Prefixes String
Numbers' and 'Prefixes of Big
Numbers' properties.
Enables to add or remove a prefix and
also to set the Default big and small
numbers.
Prefixes of Big
You can also change the order, prefixesOfBigNumbers
Numbers String
duplicate or delete a prefix, also can
assign a Scale of number to abbreviate
and can set a prefix to it.
Enables to add or remove a prefix and
also to set the Default big and small
Prefixes of numbers.
Small You can also change the order, prefixesOfSmallNumbers
String
Numbers
duplicate or delete a prefix, also can
assign a Scale of number to abbreviate
and can set a prefix to it.
Balloon
Balloons helps in displaying additional information when you hover your cursor on the graph. The text in these balloons
can be set as Static or Dynamic.

If this is set, border color instead of
background color will be changed
Adjust Border adjustBorderColor
Boolean True
Color when user rolls-over the slice, graph,
etc.
Duration of balloon movement from
Animation previous point to current point, in animationDuration
Number 0.3
Duration
seconds.
Balloon border opacity. Value range
Border
100%
Opacity is 0 - 1.
Border Color Color #FFFFFF Balloon border color. Will only be borderColor
98 | P a g e
____________________________________________________________________________________________________________
used when 'Adjust Border Color' is

not set.
Border Balloon border thickness. borderThickness
Number 2
Thickness
Text Color Color #000000 Color of text in the balloon.
Balloon corner radius. cornerRadius

Corner Radius Number 0
Duration of a fade out animation, in
Fade Out fadeOutDuration
Number 0.3
Duration seconds.
Fill Opacity 100% Balloon background opacity.

Balloon background color. Usually
balloon background color is set by
fillColor
Fill Color Color
the chart. Only if 'Adjust Border
Color' is set, this color will be used.
Specifies if balloon should follow
mouse when hovering the
slice/column/bullet or stay in fixed fixedPosition
Fixed Position Boolean False
position (this does not affect balloon
behavior if 'Chart Cursor' is used).
Size of text in the balloon. Chart's
'Font Size' is used by default if not fontSize
Font Size Number
specified here.
Horizontal Horizontal padding of the balloon. horizontalPadding
Number 8
Padding
Maximum width of a balloon. maxWidth
Max Width Number
Defines horizontal distance from
mouse pointer to balloon pointer.
NOTE: If you set it to a small value, offsetX
X Offset Number 1
the balloon might flicker, as mouse
might lose focus on hovered object.
Defines vertical distance from mouse
pointer to balloon pointer. NOTE: If
you set it to a small value, the offsetY
Y Offset Number 6
balloon might flicker, as mouse
might lose focus on hovered object.
The width of the pointer (arrow)
'root'. Only used if 'Corner Radius' is pointerWidth
Pointer Width Number
0.
Shadow 100% Opacity of a shadow.
99 | P a g e
____________________________________________________________________________________________________________
Opacity
Color of a shadow. shadowColor
Shadow Color Color #000000
If 'Corner Radius' of a balloon is > 0,
'Show Bullet' is set for value balloons
when 'Chart Cursor' is enabled. If you showBullet
Show Bullet Boolean False
don't want the bullet near the
balloon, disable this.
Text alignment, possible values are
Text textAlign
String Center
Alignment Left, Middle, and Right.
Vertical Vertical padding of the balloon. verticalPadding
Number 4
Padding
Free Labels
Free Labels enables to show data labels that are very much needed on the Dashboard without the need to hover over
the charts. In ChartsPLUS 2.0 you can add any number of free labels as required and place their position using
Positioning properties.

Unique id of a Label. You don't need to set
Id String Label id
Text String Label Title Text of label. text

URL which will be accessed if user clicks on
URL String url
the label.
Color Color Color of label. color

Alpha 100% Specifies opacity of label alpha
Size Number Sets the Label Text size. size
Bold Boolean False Specifies if the label is bold or not. bold
Align String Left Text alignment of label align
POSITIONING
Rotation Number 0 Enables to set the angle of the Label.
X Number X position of label. X
Y Number Y position of label. Y
Add a Free Label in ChartsPLUS 2.0:

1. Add a Doughnut Chart to the analysis application and assign a data source to it.
100 | P a g e
____________________________________________________________________________________________________________
2. After customization of chart to add Free Labels navigate to GENERAL>> Free Labels>> Options>>
Select Add Label.
3. Set the required text under Text property. (In this case the “Kiwis Sales are Low among all the
Products” is added.
4. Set required color, Font size of the Text, whether the Label should appear Bold or Not. (In this case
the color is set as #352020, and Font size is set to 13, Bold is enabled)
5. To place the Label at the required position use the properties X and Y under POSITIONING.( In this
case X value is set to 400 and Y value is set to 370)
6. If you want to set the label at an angle you set the rotation angle.
ChartsPLUS 2.0 with Free Label
Export
Enables to export the Chart in any of the following formats.

Enabled Boolean False Enables the function to export the Chart. enabled
File Name String ChartsPLUS Specifies the name of the export file. fileName
Enables set the bottom margin while position
Position String Right
exporting.
Export JPG Boolean True Enables to export the chart in JPG format. exportJPG
Export PNG Boolean True Enables to export the chart in PNG format. exportPNG
Export PDF Boolean True Enables to export the chart in PDF format. exportPDF
Export SVG Boolean False Enables to export the chart in SVG format. exportSVG
Export CSV Boolean False Enables to export the chart in CSV format. exportCSV
Allow Allows the comments to get printed. exportAnnotate
Boolean True
Annotation
Allow Print Boolean False Enables to print the Chart component.
101 | P a g e
____________________________________________________________________________________________________________
How to Annotate and Export in ChartsPLUS 2.0

1. Add ChartsPLUS component to the analysis application and assign the required Data source to it.
2. To enable Export and Annotate in ChartsPLUS 2.0 navigate to GENERAL>> Export>> Enable the
property Enabled.
3. Now select the required export options (In this case Export JPN, Export PNG, Export PDF are
selected) from the available properties.
4. Make sure Allow Annotation properties is enables to provide option to add comment/notes in the
graph.
5. Execute the Application, now you can see a Download symbol as below. Hover on it and you can
find the options Download and Annotate. Hover on Download and you can see the Different
formats available (Which you have selected in the previous step under Export Tab in Additional
Properties) to download the chart.
6. If you want to add a comment click on Annotate. Hover on the symbol and you can find the below
options:
 Color: Enables to select the required color to Annotate from the available list of colors.
 Edit: You can Undo, Redo or can cancel the Annotations.
102 | P a g e
____________________________________________________________________________________________________________
 Save as: Enables to save the Chart after Annotation in the available formats.
Titles
Enables to add and customize Titles, sub titles to the chart. You can also add multiple title if there is any such
requirement.
CHART TITLES
Options Enables to Add or Remove a Title/Subtitle
Sets a unique id of a Title. You don't need to
Id String Chart Title id
set it, unless you want to.
Text String Chart Title Sets the Text of a title. text

Color Color Sets the Text color of a title. color
Alpha 100% Specifies the opacity of a title. alpha
Size Number 24 Sets the text size of a title. size
Bold Boolean False Specifies if title should be bold or not. bold
COLORS
Colors category enables to set the required color set to the bars in the chart.
COLOR PALETTE
 Options: Enables options to select the Color type like Single Color, SAP Color, and Color Brewer or
to remove all the selected colors.
 Single Color: You can specify a single color either by using a Hex code or RGB code or by selecting
from the Palette. You can set the order of the colors by using Insert Before, Insert After and Delete
buttons.
 Save Colors as Favorite: Enables to save the selected color as a favorite by giving a Present Name.
These saved colors favorites can be seen under Options>>Favorites.
103 | P a g e
____________________________________________________________________________________________________________
 Colors SAP and Color Brewer provides many options to select the color set for the Chart.
LEGEND
Legend is the Key to the data that is graphically represented in the Graph. ChartsPLUS 2.0 enables to customize this key
feature as per the requirement of the user from the available wide range of options.
GENERAL PROPERTIES
enabled
Enabled Boolean True Specifies if legend is enabled or not.
Legend markers can mirror graph’s settings,
displaying a line and a real bullet as in the
Use Graph useGraphSettings
Boolean False
Settings graph itself. Set this property to true if you
want to enable this feature.
Specifies if each of legend entry should be
equal to the widest entry. Won't look good if equalWidths
Equal Widths Boolean True
legend has more than one line.
The text which will be displayed in the legend.
[[title]] Tag [[title]] will be replaced with the title of the labelText
Label Text String
graph.
If width of the label is bigger than label Width,
labelWidth
Label Width Number
it will be wrapped.
Maximum number of columns in the legend. If
Legend's position is set to 'right' or 'left', max maxColumns
Max Columns Number
Columns is automatically set to 1.
The text which will be displayed in the value
portion of the legend when user is not hovering
above any data point. The tags should be made
out of two parts - the name of a field (value /
open / close / high / low) and the value of the
Period Value periodValueText
String
Text period you want to be show - open / close /
high / low / sum / average / count. For
example: [[value.sum]] means that sum of all
data points of value field in the selected period
will be displayed.
Specifies whether legend entries should be
Reversed reversedOrder
Boolean True
Order placed in reversed order.
When you roll-over the legend entry, all other
Roll-over graphs can reduce their opacity, so that the rollOverGraphAlpha
100%
Graph Alpha
graph you rolled-over would be distinguished.
104 | P a g e
____________________________________________________________________________________________________________
This style specifies the opacity of the graphs.

You can use this property to turn all the legend
showEntries
Show Entries Boolean True
entries off.
Whether showing/hiding of graphs by clicking
on the legend marker is enabled or not. In case
switchable
Switchable Boolean True
legend is used with ChartsPLUS 2, this is set to
false automatically.
Legend switch type (in case the legend is
switchType
Switch Type String X
switchable). Possible values are 'x' and 'v'.
If true, clicking on the text will show/hide
balloon of the graph. Otherwise it will
Text Click textClickEnabled
Boolean False
Enabled show/hide graph/slice, if switchable is set to
true.
Alignment of the value text. Possible values are
valueAlign
Value Align String Right
'left' and 'right'.
Width of the value text. valueWidth
Value Width Number 50
APPEARANCE
Opacity of legend's background. Value range is
Background backgroundAlpha
100%
Alpha 0-1
Background color. You should set background
Alpha to >0 value in order background to be
Background backgroundColor
Color #FFFFFF
Color visible.
Opacity of chart's border. Value range is 0 - 1. borderAlpha

Border Alpha 100%
Color of legend's border. You should set border
borderColor
Border Color Color #000000
Alpha >0 in order border to be visible.
Text Color Color #000000 Text color.

Font size. fontSize
Font Size Number 11
Horizontal space between legend item and
Horizontal horizontalGap
Number 0
Gap left/right border.
Vertical space between legend items also
between legend border and first and last legend verticalGap
Vertical Gap Number 10
row.
Roll-over Legend item text color on roll-over.
Color #CC0000 rollOverColor
Color
105 | P a g e
____________________________________________________________________________________________________________
Legend switch color. switchColor

Switch Color Color #FFFFFF
POSITIONING
Alignment of legend entries. Possible values
align
Align String Left
are: 'left', 'center', 'right'.
Used if chart is Serial or XY. In case true,
margins of the legend are adjusted and made autoMargins
Auto Margins Boolean True
equal to chart's margins.
Position of a legend. Possible values are:
'bottom', 'top', 'left', 'right' and 'absolute'. In
case 'absolute', you should set left and top
properties too. (This setting is ignored in Stock position
Position String Bottom
charts). In case legend is used with
ChartsPLUS™ 2.0 Map, position is set to
'absolute' automatically.
In case legend position is set to 'absolute', you
top
Top Number
can set distance from top of the chart, in pixels.
can set distance from bottom of the chart, in bottom
Bottom Number
pixels.
can set distance from left side of the chart, in left
Left Number
pixels.
can set distance from right side of the chart, in right
Right Number
pixels.
Top margin. marginTop
Margin Top Number 0
Bottom margin. marginBottom
Margin Bottom Number 0
Left margin. This property will be ignored if
chart is Serial or XY and auto Margins property marginLeft
Margin Left Number 20
of the legend is true (default).
Right margin. This property will be ignored if
chart is Serial or XY and auto Margins property marginRight
Margin Right Number 20
of the legend is true (default).
106 | P a g e
____________________________________________________________________________________________________________
Horizontal space between legend items, in

spacing
Spacing Number 10
pixels.
Width of a legend, when position is set to
width
Width Number
absolute.
MARKERS
Shape of the legend marker (key). Possible
values are: square, circle, diamond, triangle Up,
markerType
Marker Type String Square
triangle Down, triangle Left, triangle Down,
bubble, line, none.
Marker Border Marker border opacity. markerBorderAlpha
100%
Alpha
Marker border color. If not set, will use the
Marker Border markerBorderColor
Color #FFFFFF
Color same color as marker.
Thickness of the legend border. The default
value (0) means the line will be a 'hairline' (1 markerBorderThick
Marker Border
Number 1 ness
Thickness px). In case marker type is line, this style will be
used for line thickness.
The color of the disabled marker (when the markerDisabledCol
Marker
Color #AAB3B3 graph is hidden). or
Disabled Color
Space between legend marker and legend text,

Marker Label markerLabelGap
Number 5
Gap in pixels.
Size of the legend marker (key). markerSize
Marker Size Number 16
Use Marker Labels will use marker color if you set this to useMarkerColorFor
Color for Boolean False true. Labels
Labels
Use Marker Specifies if legend values should be use same useMarkerColorFor
Color for Boolean False color as corresponding markers. Values
Values
Enabling a Graph using Legend:

1. Add a ChartsPLUS to the Analysis application and assign a data source to it. (In this case the
assigned data source has two measures Sales and Quantity)
2. Now initially on startup of the application Hide the Quantity graph by navigating in to CONFIG>>
Graphing>> Graphs>> Select Quantity and enable the Hidden property under General.
3. Make sure the Legend is Enabled.
4. Execute the application.
107 | P a g e
____________________________________________________________________________________________________________
5. Now you can see the Chart as Below on startup of the application showing only Sales graph, hiding
the Quantity graph.
6. Now click on Quantity in the Legend and this will displays Quantity Graph.
7. You can Hide/show the graph whenever required on the Chart using ChartsPLUS Legend.
108 | P a g e
____________________________________________________________________________________________________________
EVENTS
Events help in triggering actions using BIAL script that are defined in the script editor of the property.
The following table outlines the available events in ChartsPLUS 2.0

Enables to set the script that will be
On Graph ScriptText executed on clicking the Graph of selectOnGraphClick
Click
ChartsPLUS™ 2.0 component.
Fires when the chart is zoomed or
On Zoom ScriptText scrolled with either the Chart Cursor or zoomScroll
Scroll
Chart Scrollbar.
Executes the script when a Hierarchy
On Hierarchy ScriptText onHExpand
Expand Node is expanded.
Executes the script when a Hierarchy
On Hierarchy ScriptText onHCollapse
Collapse Node is collapsed.
Filtering Data on Charts Using Events in ChartsPLUS 2.0

1. Add 2 ChartsPLUS 2.0 Charts to the Analysis Application and assign a Country_Sales data to Chart1
and Region_Sales data to Chart2.
2. Under Events section of Chart1 click on button for the Property On Graph Click to open Script
Editor.
3. In the Script Editor give the below BIAL script that enables to filter data in Chart2 based on the
Category Value Clicked on Chart1.
REGION_SALES.setFilter("Country", CHARTSPLUS2_1.getCategoryValueClicked());
109 | P a g e
____________________________________________________________________________________________________________
4. Now in this case select a category value in Chart1 which filters data in DS_2 and is displayed in
Chart2.
On Startup of the Application
5. On the Start up of the application you can see the Region Sales graph displays all Region sales.
110 | P a g e
____________________________________________________________________________________________________________
On Clicking Graph on USA
6. On clicking USA in Chart1 the DS_2 got filtered and the Regions corresponding to Country USA are
displayed in Chart2.
7. Similarly you can assign events from different API available in ChartsPLUS 2.0
WIZARDS
ChartsPLUS Wizards helps building complex graphs like Bullet Charts, Combination charts (Column Line Dual Axes and
Stacked Column Line Charts) in a few steps which helps in better analysis and time saving.
Bullet Chart
A bullet graph is a variation of a bar graph, inspired by the traditional thermometer charts and progress bars found in
many dashboards, the bullet graph serves as a replacement for dashboard gauges and meters.
WIZARD PARAMETERS
 Rotate: Select the Check box to rotate the chart as Bar Chart.
 Target Value: Set the value that acts Target value.

 Quantitative Scale: Set the Achieved value.
 Apply: Click on Apply to enable the applied Changes.
QUALITATIVE COLORS
 Options: Enables to select the Color type like Single Color, SAP Color, Color Brewer, from
favorites or to remove all the selected colors.
111 | P a g e
____________________________________________________________________________________________________________
Bullet Chart displaying Actual Vs Planned Revenue
Combination Chart
A Combo Chart consists of a chart that has more than one type of graph and/or more than one value axis.
Column Line Dual Axes
WIZARD PARAMETERS
Select the Check box to rotate the chart as
rotate
Rotate Boolean False
Bar Chart
Text String Enable to set the Title of the Axis

Enables to select the graph from the
possible values: Column, Line, Area, and graphType
Graph Type
Smoothed Line.
112 | P a g e
____________________________________________________________________________________________________________
Whether the graphs should be stacked or

stackable
Stackable Boolean False
not.
Secondary Enables to show Secondary axis in graph.
Boolean False
Axis
Click on Apply to enable the applied
Apply
Changes.
Stacked Column Line Combo with dual axes
113 | P a g e
____________________________________________________________________________________________________________
Chapter 5: ChartsPLUS 2.0 Favorites

WORKING ON FAVORITES
Favorites enable to save the custom format and enables to reload them whenever required which helps in
reducing the design time.
Saving Colors as Favorite

In this case for the PIE Chart after setting the desired colors click on Favorites Icon>> Save>> Give desired
name (in this case it was given as “My Colors”) in Save as New input box and click Enter.
Saving Graph as Favorite

In this case a ChartsPLUS 2.0 is added to the analysis application, assigned a data source named
SALES_DATA to it and changed the chart type to Line and formatted the chart as below:
Now in the additional properties of Graphs click on favorites button and from the context menu click on
Save>> Save as New>> Set the name as “Custom Line Graph”
114 | P a g e
____________________________________________________________________________________________________________
Favorites are stored in your browser's Local Storage which is persistent unless you clear your cache. For
this reason, you may wish to export your favorites from time to time as a backup. Your exported favorites
can always be re-imported into ChartsPLUS, and even shared with others.
Applying a Saved Favorite
Add a ChartsPLUS 2.0 to the analysis application and assign the data source WEB_TRAFFIC to it
Now under Additional properties of ChartsPLUS 2.0>> CONFIG>>Graphing>>Graphs>> Set the Chart type as
Line and it appears as below initially:
Now click on Favorites and from the context menu click Load>> Load Custom Line Graph.
Now the Graph format changes and appears as it was set earlier in the selected favorite.
115 | P a g e
____________________________________________________________________________________________________________
Deleting a saved Favorite

Click on Favorites>> Delete>> Delete the required Favorite (If you select Delete All the favorites pertaining
to Line Graph category are deleted)
Exporting Favorites
Click on Favorites button at the top of the Additional properties of ChartsPLUS 2.0 and click Export
Favorites.
Now select the required favorites that need to be exported (In this case My Colors and Custom Line Graph
Favorites are selected) and click Export.
116 | P a g e
____________________________________________________________________________________________________________
Now in the File Download dialogue box click on Save and give the required location where the file need to
be saved and click save this will enable to save the file in the Json format in the desired location.
117 | P a g e
____________________________________________________________________________________________________________
Click on Open folder button to see the file in the saved location.
Importing Saved Favorites
Click on Favorites and select Import Favorites
In the Import Favorites dialog box click on browse and select the file from the local system where the
Favorites were exported earlier and click Open.
Select the required favorites that need to be imported and click on Import Now.
118 | P a g e
____________________________________________________________________________________________________________
This enables to import the favorites that are selected in to the ChartsPLUS 2.0
119 | P a g e
____________________________________________________________________________________________________________
120 | P a g e

ChartsPLUS 2.0 User Guide PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

ChartsPLUS 2.0 User Guide PDF

Transféré par

Droits d'auteur :

Formats disponibles

Archius ChartsPLUS 2.

CHARTSPLUS 2.0 USER GUIDE

CONFIG PROPERTIES OF COLUMN/BAR/LINE/AREA 19

CHAPTER 5: CHARTSPLUS 2.0 FAVORITES 114

About ChartsPLUS 2.0

Charts available in ChartsPLUS 2.0

Chart Type Available Charts

Gauge  Angular Gauge

Chapter 1: ChartsPLUS 2.0 Installation and Updating

Installing ChartsPLUS 2.0 on Design Studio

 Select the ChartsPLUS 2.0 check box and click Next.

 Review the Item and Click Next.

First Look of Installed ChartsPLUS 2.0

Installing ChartsPLUS 2.0 on BI Platform

Updating ChartsPLUS 2.0 on BI Platform

Chapter 2: Working With ChartsPLUS 2.0

Adding ChartsPLUS 2.0 to Analysis Application

This will add ChartsPLUS 2.0 component to the Analysis Application

Assigning Data Source to ChartsPLUS 2.0

Chapter 3: General Properties of ChartsPLUS 2.0

Chapter 4: Additional Properties of ChartsPLUS 2.0

Display the list of available charts in ChartsPLUS 2.0

PROPERTY TYPE DEFAULT DESCRIPTION API

PROPERTY TYPE DEFAULT DESCRIPTION API

Whether to automatically filter Hierarchy Node

Setting Hierarchy in ChartsPLUS 2.0:

Hierarchies Displayed in ChartsPLUS 2.0

CONFIG PROPERTIES OF COLUMN/BAR/LINE/AREA

PROPERTY TYPE DEFAULT DESCRIPTION API

PROPERTY TYPE DEFAULT DESCRIPTION API

hard-coded targets. 'By Name' is useful

PROPERTY TYPE DEFAULT DESCRIPTION API

Axis Position Left If axis is vertical, default position is 'left'. If

Title String Enable to set the title of the axis. title

PROPERTY TYPE DEFAULT DESCRIPTION API

Tick Length Number 0 Specifies the length of Tick Marks. tickLength

PROPERTY TYPE DEFAULT DESCRIPTION API

Works only with non-date-based data.

PROPERTY TYPE DEFAULT DESCRIPTION API

Grid Position cell. Possible values are: 'start' and gridPosition

Grid Alpha Sets the opacity of Grid lines. gridAlpha

Minor Grid Whether to display minor grid or not. minorGridEnabled

PROPERTY TYPE DEFAULT DESCRIPTION API

To enable Guides in ChartsPLUS 2.0 the following properties need to be set.

PROPERTY TYPE DEFAULT DESCRIPTION API

Fill Color Color Fill color of Guide fillColor

Value Axis of the Guide. As you can add

Value Axis guides directly to the chart, you might need

Value... Value Type: Data Bound or Static Value

To Value Value Type: Data Bound or Static Value

PROPERTY TYPE DEFAULT DESCRIPTION API

Color Color Sets the color of a Guide label. color

PROPERTY TYPE DEFAULT DESCRIPTION API

Balloon Color Color Specifies the Balloon Fill Color balloonColor

PROPERTY TYPE DEFAULT DESCRIPTION API

Adding a Guide in ChartsPLUS 2.0

Here Avg.Revenue acts as Guide

9. Similarly you can add more than one Guide to a graph.

Here Goal and Industry Avg. acts as Guides

 Options: Enables to add or Remove a Single or Dual value axis.

Title String Specifies the title of the axis title

Specifies Font size of axis title. Will use font

Minimum Number value might still be adjusted so that it would minimum