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 ICONS

14 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Export

101

Titles

103

COLORS

103

LEGEND

104

EVENTS

109

WIZARDS

111

CHAPTER 5: CHARTSPLUS 2.0 FAVORITES WORKING ON FAVORITES

114 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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 Wizards

Available Charts   

Column

  

Bar

  

Line

  

Area

  

XY

 

Sliced

Gauge

Bullet Charts Combination Chart Clustered Column Stacked Column 100% Stacked Column Clustered Bar Stacked Bar 100% Stacked Bar Clustered Line Stacked Line 100% Stacked Line Clustered Area Stacked Area 100% Stacked Area Scatter Charts Bubble Charts



Pie Charts Donut Charts Funnel Charts



Angular Gauge



5|Page

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Ignore Totals

required data from the available data source. Boolean

True

data

When set, ChartsPLUS will ignore results in the data source that are sub-totals and overall totals.

ignoreTotals

When set, ChartsPLUS will ignore hierarchy Ignore Expanded Nodes

Boolean

True

nodes that have been expanded, essentially then

ignoreExpandedNodes

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. Dimension Separator

String

_bs_

Use Mock Data

Boolean

True

Character string used between each dimension field in the resulting concatenated string.

dimensionSeparator

Uses internal placeholder data when no data source is specified.

useMockData

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Specify a hierarchy dimension to activate

Hierarchy Dimension (Optional)

drilldown navigation on the Design Studio data

dimHierarchy

source.

Hierarchy Level

Number

1

Plot Nodes Above

Boolean

False

Plot Nodes Below

Boolean

False

Starting Hierarchy Level for Chart to focus on.

currentLevel

Whether to plot collapsed nodes above current hierarchy level focus.

useHigherNodes

Whether to plot collapsed nodes below current hierarchy level focus.

useLowerNodes

17 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Filter on Hierarchy Drill

Whether to automatically filter Hierarchy Node Boolean

False

during drilldown.

filterOnDrill

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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 End Index

Number Number

0

Enable to set the Start index zoom

startIndex

20

Enable to set the End index zoom

endIndex

CATEGORIES

Enables to specify the Category field that need to be assigned for Aggregation. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to select the Field that acts as Category Axis and for aggregation. Field Type: Filed type 'By Name' maps a field Category Field

String

Filed Type: Name Field Name: All Dimensions

by its key (e.g. 0AMOUNT). 'By Position' maps a field by its ordinal position

categoryField

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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' Category Aggregation

designated on the category axis. This allows Boolean

True

categoryAggregation

you chart one dimension even when the data source contains more than one dimension in its rows.

Max Visible Categories

Maximum number of visible categories. (0 = Number

0

maxSelectedSeries

All)

GENERAL

Enables to customize Category Axis and Category Title of the Chart. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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

Title Bold

Boolean

Title Color

Color

Enable to set the title of the axis. False

Specifies if the title should be bold or not.

title titleBold

Enables to set the color of axis title. Will use text color of chart if not set any.

titleColor

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

APPEARANCE

Enables to customize the Appearance of the Category Axis. PROPERTY

TYPE

Axis Alpha

DEFAULT 100%

Axis Color

Color

#000000

Axis Thickness

Number

1

DESCRIPTION

API

Sets the opacity of the Axis.

axisAlpha

Enables to set the color of Axis.

axisColor

Enables to set the Thickness of Axis.

axisThickness

Position of an axis tick. Works only with Tick Position Tick Length

Middle Number

0

non-date-based data. Specifies the length of Tick Marks.

tickPosition tickLength

LABELS

Enables to customize the Labels of the Category Axis PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Specifies whether axis displays category axis'

Labels Enabled

Boolean

False

Label Color

Color

#000000

Label Character Limit

Number

labels and value axis' values.

labelsEnabled

Enable to set the color of axis value labels. Will use chart's color if not set.

labelColor

Enables to restrict the characters in the labels. Specifies if axis labels (only when it is horizontal) should be wrapped if they don't fit

Auto Wrap

Boolean

False

in the allocated space. Wrapping won't work

autoWrap

for rotated axis labels. Rotation angle of a label. Only horizontal axis' values can be rotated. If you set this for Label Rotation

Number

vertical axis, the setting will be ignored.

labelRotation

Possible values from -90 to 90. Angle of label rotation, if the number of series Auto-Rotate Angle

Number

exceeds auto Rotate Count and parse Dates is

autoRotateAngle

set to false. If the number of category axis items exceed

Auto-Rotate Count

the auto Rotate Count, the labels will be Number

rotated by auto Rotate Angle degree. Works

autoRotateCount

only if parse Dates is false. Label Color Field

Color

You can use it to set color of an axis label.

labelColorField

21 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Works only with non-date-based data. Whether to show first axis label or not. This works properly only on Value Axis. With Show First Label

Category Axis it won’t work 100%, it depends Boolean

False

on the period, zooming, etc. There is no

showFirstLabel

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 Show Last Label

Category Axis it won’t work 100%, it depends Boolean

False

on the period, zooming, etc. There is no

showLastLabel

guaranteed way to force category axis to show or hide last label. Every second space between grid lines can be Fill Color

filled with color. Set fill Alpha to a value

Color

fillColor

greater than 0 to see the fills Whether to set Axis labels should be bold or Bold Labels

Boolean

Font Size

Number

Inside

Boolean

False

not.

boldLabels

Size of value labels text. Will use chart's font Size if not set.

fontSize

Enables to specify whether values should be False

placed inside or outside plot area.

inside

Frequency at which labels should be placed. Label Frequency

Number

Doesn't work for Category Axis if parse Dates

labelFrequency

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. Horizontal Gap

count (when auto Grid Count is true). It Number

specifies minimum cell width required for one

minHorizontalGap

span between grid lines. This property is used when calculating grid Min. Vertical Gap

count (when auto Grid Count is true). It Number

specifies minimum cell height required for

minVerticalGap

one span between grid lines.

22 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

GRID

Enables to Customize the Category Axis Grid PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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

Grid Position

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

the value is set as Zero then the line is

Number

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

Sets the color of Grid lines.

gridColor

Color

#000000

Specifies whether number of grid Count Auto-Grid Count

Boolean

False

is specified automatically, according to

autoGridCount

the axis size. Number of grid lines. In case this is value axis, or your category Axis parses

Manual Grid Count

dates, the number is approximate. The

Number

default value is 5. If you set auto Grid Count to true, this property is ignored.

Grid Above Graphs

Boolean

Whether to show grid above lines or

Grid Thickness

Number

Minor Grid Enabled

Boolean

False

not. Enables to set the Thickness of gridline.

False

gridAboveGraphs

Whether to display minor grid or not.

gridThickness minorGridEnabled

Sets the opacity of Minor grid. In order Minor Grid Alpha

100%

minor to be visible, you should set

minorGridAlpha

minor Grid Enabled to true.

23 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

DATES

Enables to specify the properties of Dates PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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

you want dates to be parsed, but data

parseDates

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 Two Line Mode

it to true, at the position where bigger Boolean

False

period changes, category axis will

twoLineMode

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

Boolean

False

beginning of the periods, like month, in

boldPeriodBeginning

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 on Full Period

Boolean

False

set to false. In case you set it to false, labels will never be centered between

centerLabelOnFullPeriod

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 Week

Number

Sets first day of the week. 0 is Sunday, 1

firstDayOfWeek

24 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ is Monday, etc. If you set it to false, the start of longer Mark Period Change

Boolean

False

periods won't use a different date

markPeriodChange

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,

Minimum Period

mm - minutes, hh - hours, DD - days, String

minPeriod

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 Time

Number

259200000 will limit selection to 3 days.

0

maxSelectedTime

Works if equal Spacing is set to false (default). The shortest time span allowed to select

Min Selected Time

(in milliseconds) for example, 1000 will Number

0

minSelectedTime

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Unique id of a Guide. You don't need to set Id

String

Fill Color

Color

Fill Alpha

Number

Guide

100%

it, unless you want to. Fill color of Guide

fillColor

Fill opacity of Guide

fillAlpha

25 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Value Axis of the Guide. As you can add guides directly to the chart, you might need

Value Axis

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

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). Value Type: Data Bound or Static Value

To Value

Row Binding: Position or Name Column Binding: Position or Name Category of the guide (in case the guide is for category axis). Value Type: Data Bound or Static Value Category...

Row Binding: Position or Name Column Binding: Position or Name Labe Format: [[value]] 'To' category of the guide (in case the guide is for category axis). Value Type: Data Bound or Static Value

...To Category

Row Binding: Position or Name Column Binding: Position or Name Labe Format: [[value]] 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

LABEL

Enables to set the properties of the Guide Labels. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Set the label text which will be displayed near Label

String

Color

Color

the guide. Sets the color of a Guide label.

label color

Specifies the Position of guide label. Possible Label Position

values are 'left' or 'right' for horizontal axis and

String

labelPosition

'top' or 'bottom' for vertical axis. Enable to set the Rotation angle of a guide Label Rotation

Number

Font Size

Number

Label Inside

Boolean

False

Bold Label

Boolean

False

labelRotation

label. Enable to set the font size of Guide label.

fontSize

Specifies if Guide label should be displayed inside the chart or not. Specifies if Guide label should be bold or not.

inside boldLabel

BALLOON

Specifies the Balloon properties of Guide. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enable to set the text which will be Balloon Text

String

Balloon Color

Color

displayed if the user rolls-over the guide. Specifies the Balloon Fill Color

balloonText balloonColor

LINE

Enables to Customize the Guide Line. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Line Thickness

Number

Enable to set Line Thickness.

Line Color

Color

Enables to set the Line Color.

lineColor

Specifies the Line Opacity.

lineAlpha

Line Alpha

100%

lineThickness

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

Value 0 hides the Tick.

tickLength

27 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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

Title Bold

Boolean

Title Color

Color

Specifies the title of the axis False

Displays the Axis Title in Bold.

title titleBold

Specifies Color of axis title. Will use text color of chart if not set any.

titleColor

29 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Specifies Font size of axis title. Will use font Title Font Size

Number

size of ChartsPLUS 2 pixels if not set any

titleFontSize

If you don't want min value to be calculated by the chart, set it using this property. This Minimum

value might still be adjusted so that it would

Number

minimum

be possible to draw grid at rounded intervals. If you don't want max value to be calculated by the chart, set it using this property. This Maximum

value might still be adjusted so that it would

Number

maximum

be possible to draw grid at rounded 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 Min/Max

Boolean

False

plot area and grid would be at equal

strictMinMax

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

Reversed

Boolean

False

logarithmic. Specifies if value axis should be reversed

logarithmic reversed

(smaller values on top). Possible values are: 'top', 'bottom', 'left', 'right'. If axis is vertical, default position is

Position

Number

Left

'left'. If axis is horizontal, default position is

position

'bottom'. Stacking mode of the axis. Possible values Stack Type

are: 'none', 'regular', '100%', '3D'. Note,

Number

only graphs of one type will be stacked.

stackType

Specifies whether number of Grid Count is Auto Grid Count

Boolean

False

specified automatically, according to the

autoGridCount

axis size. If auto Margins of a chart is set to true, but

Ignore Axis Width

you want this axis not to be measured when Boolean

False

calculating margin, set ignore Axis Width to

ignoreAxisWidth

true.

30 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ The distance of the axis to the plot area, in Offset

Number

pixels. Negative values can also be used.

offset

GRID AND FILLS PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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

Grid Type

gridType

For polar charts ‘circles’ can be set. Grid Opacity

Number

Grid Color

Color

Specifies the opacity of grid lines.

gridAlpha

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 is approximate. The default value is

Number

gridCount

5. If you set auto Grid Count to true, this property is ignored. Grid Thickness

Specifies thickness of grid lines.

Number

gridThickness

Specifies opacity of minor grid. In order Minor Grid Alpha

Number

Minor Grid Enabled

Boolean

minor to be visible, you should set minor

minorGridAlpha

Grid Enabled to true. False

Specifies if minor grid should be displayed.

minorGridEnabled

AXIS APPERANCE PROPERTY

TYPE

DEFAULT

DESCRIPTION

axisAlpha

Enable to set the color of Axis

axisColor

Axis Opacity

Number

Axis Color

Color

#000000

Axis Thickness

Number

1

Specifies thickness of Axis

0

Enables to set the Base value of the axis.

Base Value

Number

Dash Length

Number

API

Specifies the opacity of Axis

axisThickness baseValue

Specifies the Length of a dash. 0 means line is not dashed.

dashLength

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Every second space between grid lines can Fill Color

be filled with color. Set fill Alpha to a value

Color

fillColor

greater than 0 to see the fills. Tick Length

Enable to set the length of the tick marks.

Number

tickLength

LABELS PROPERTY

TYPE

DEFAULT

Labels Enabled

Boolean

False

DESCRIPTION Specifies whether axis displays category axis' labels and value axis' values.

API

labelsEnabled

Frequency at which labels should be Label Frequency

placed. Doesn't work for Category Axis if

Number

labelFrequency

parse Dates is set to true. Enables to adjust position of axes labels.

Label Offset

Works both with Category Axis and Value

Number

labelOffset

Axis. Enables to Rotate the angle of a label. Only horizontal axis' values can be Label Rotation

rotated. If you set this for vertical axis, the

Number

labelRotation

setting will be ignored. Possible values from -90 to 90. Specifies if axis labels should be bold or Bold Labels

Boolean

Text Color

Color

Font Size

Number

False

not.

boldLabels

Specifies the color of axis value labels. Will use chart's color by default.

color

Sets the size of value labels text. Will use chart's font Size by default.

fontSize

Whether to show first axis label or not. Show First Label

This works properly only on Value Axis. Boolean

False

With Category Axis it won’t work 100%, it

showFirstLabel

depends on the period, zooming, etc. Whether to show last axis label or not. Show Last Label

This works properly only on Value Axis. Boolean

False

With Category Axis it will not work 100%,

showLastLabel

it depends on the period, zooming, etc. Specifies whether values should be placed Inside

Boolean

Min Horizontal

Number

False

inside or outside plot area. This property is used when calculating

inside minHorizontalGap

32 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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

Min Vertical Gap

grid count (when auto Grid Count is true). Number

It specifies minimum cell height required

minVerticalGap

for one span between grid lines. Specifies if graph’s values should be

Recalculate to Percent’s

Boolean

False

Integers Only

Boolean

False

Precision

Number

Unit

String

recalculated to percent’s.

recalculateToPercents

Specifies whether values on axis can only be integers or both integers and doubles. Precision (number of decimals) of values.

integersOnly precision

Unit which will be added to the value

unit

label. Position of the unit. Possible values are

Unit Position

'left' and 'right'.

unitPosition

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 Notation

Boolean

False

Otherwise only values bigger then 1e+21

useScientificNotation

and smaller then 1e-7 will be displayed in scientific notation.

MISC PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Specifies whether guide values should Include Guides in Min/Max

Boolean

False

be included when calculating min and

includeGuidesInMinMax

max of the axis. If true, the axis will include hidden

Include Hidden

Boolean

Min/Max Multiplier

Number

False

graphs when calculating min and max

includeHidden

values. If set value axis scale (min and max numbers) will be multiplied by it. I.e. if

minMaxMultiplier

33 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ set to 1.2 the scope of values will increase by 20%. Radar Categories Enabled

Radar chart only. Specifies if Boolean

False

categories (axes' titles) should be

radarCategoriesEnabled

displayed near axes) In case you synchronize one value axis with another, you need to set the

Synchronizatio n Multiplier

Number

synchronization multiplier. Use

synchronizationMultiplier

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 With

axis here. You should set

synchronizeWith

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

= '[[total]]' will make it to display total

totalText

value above the most-top column. Total Text Color

Color

Total Text Offset

Number

Specifies color of total text.

totalTextColor

Specifies distance from data point to total text.

totalTextOffset

This allows you to have logarithmic value axis and have zero values in the Treat Zero As

Number

data. You must set it to >0 value in

treatZeroAs

order to work.

34 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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. PROPERTY

TYPE

Selected Graph ID

String

Selected Graph Index

Number

DEFAULT

DESCRIPTION Enables to select the Graph by ID

0

Enables to select the Graph by Index

API selectedGraphId selectedGraphIndex

40 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

GENERAL

PROPERTY

TYPE

Value Color

fillColor

selected column. Enable to set the border color of the selected

Color

outlineColor

column. Enable to set the color of the Label that is

Label Color

Color

labelColor

selected. 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

Dash Length

API

Enable to set the color to be displayed on Color

Line Color

Bullet Size

DESCRIPTION Sets the Color to Values in the Selected graph.

Color

Fill Color

Alpha

DEFAULT

String

bullet

be shown on selection. Set the size of the bullet selected.

Number

bulletSize

Displays and sets the border line of select column 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 PROPERTY

TYPE

DEFAULT

DESCRIPTION Enables to select the type of graph from the

Graph Type

API

graphType

Dropdown.

Value Aggregation

Enables to select the projection method.

valueFieldAggregation

Enables to set the Value axis to the graph, by default first value axis is set to the graph. You Value Axis

can use reference of the Value axis object or

valueAxis

can set value axis id. Value Precision

Enables to set the Precision of values, by Number

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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

item or chart's indicator is over on any of the

showBalloon

series.

CONDITIONAL FORMATTING PROPERTY Fill Color Conditional Formatting Line/Bullet Conditional Formatting

TYPE

DEFAULT

DESCRIPTION

API

Enables to select the condition that is String

defined in the Conditional Formatting tab. Enables to select the condition for

String

Line/Bullet Chart that is defined in the Conditional Formatting tab.

42 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

DATA FIELDS PROPERTY Alpha Field

TYPE

DEFAULT

DESCRIPTION

API

Enables to select the Alpha field from the

String

available fields of the data source.

alphaField

Enables to select the Bullet field from the Bullet Field

available fields of the data source.

bulletField

Enables to set up the Bullet size field from

Bullet Size Field

the data provider.

bulletSizeField

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 Color Field Custom Bullet Field

Number

1

the first column (0). Name of the color field in your dataProvider.

fieldPosition

colorField

Name of the custom bullet field in your dataProvider.

bullet

Name of the dash length field in the data Provider. This property adds a possibility to Dash Length Field

change graphs’ line from solid to dash on any

dashLength

data point. You can also make columns border dashed using this setting. Name of error value field in your data

Error Field

provider.

errorField

Name of the fill colors field in your dataProvider. This property adds a possibility Fill Colors Field

to change line graphs’ fill color on any data

fillColorsField

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ You can force graph to show gap at a desired data point using this feature. Label Color Field Line Color Field

Name of label color field in data provider.

labelColor

Name of line color field in data provider.

lineColor

Name of the URL field in your data Provider.

URL Field

urlField

APPEARANCE PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to set a fixed Column width of the

Fixed Column Width

Number

Font Size

Number

graph.

fixedColumnWidth

Enables to set the size of value labels text. By default chart's fontSize is set.

fontSize

Enables to set the size of value labels text.

Gradient Orientation

By default chart's font Size is set.

gradientOrientation

Enables to set the opacity of the Line Line Alpha

100%

Line Color

Color

Line Thickness

Number

(Column border). Enable to set the color of the Line

1

Enables to set the thickness of the Line

lineAlpha lineColor lineThickness

44 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ (Column border). Enables to fill opacity of negative part of the

Negative Fill Alpha

100%

graph. Will use fill Alphas by default.

negativeFillAlphas

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to set the opacity of the negative

Negative Line Alpha

portion of the graph Line (Column border).

negativeLineAlpha

Enables to set the color of the negative portion of the graph Line. In case the graph Negative Line Color

type is candlestick or OHLC,

negativeLineColor

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

cylinder will be lowered down so that the

showOnAxis

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 can make columns look like cones (set

Top Radius

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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enable to select the type of bullet from the list of available options like 'none', Bullet

'round', 'square', 'triangleUp',

bullet

'triangleDown', 'triangleLeft',

45 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 'triangleRight', 'bubble', 'diamond', 'xError', 'yError' and 'custom'. Enable to select the color of the Bullet Bullet Color

color. By default bullet color is set

Color

bulletColor

same as Line color. Bullet Size

Number

Bullet Alpha

8 100%

Enable to set the Bullet Size. Enable to set the opacity of the Bullet

bulletSize 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

when bullet axis should be set. Besides

bulletAxis

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 Alpha

100%

bulletBorderAlpha

Border. Enable to set the color of the Bullet

Bullet Border Color

Border. By default Line color is set to this

Color

bulletBorderColor

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

Show Bullets At

showBulletsAt

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 Alpha

100%

You can set opacity of each graphs bullet.

cursorBulletAlpha

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

Custom Bullet

String

Hide Bullets Count

Number

customBullet

used as custom bullet. 0

The Bullet counts can be hidden if there

hideBulletsCount

46 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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 Show All Value Labels

set, graph hides labels which do not fit Boolean

False

showAllValueLabels

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.

Label Offset

Offset of data label. Enable to set the position of the label as

Number

0

labelAnchor labelOffset

'bottom', 'top', 'right', 'left', 'inside', 'middle'. Sometimes position is changed

Label Position

labelPosition

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

[[description]], [[percents]], [[open]],

String

labelText

[[category]]. Bullet Border Thickness

Enable to set the thickness of the bullet Number

2

bulletBorderThickness

border.

LEGEND PROPERTY

TYPE

DEFAULT

Visible in Legend

Boolean

True

Switchable

Boolean

True

Custom Marker

String

DESCRIPTION

API

Enable to set whether to show/hide the graph in the legend.

visibleInLegend

Enabling this feature will hide the graph when the user clicks on legend entry.

switchable

Provide the path of the image to set it as Custom Marker.

customMarker

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 Legend Value Text

[[value]], [[description]], [[percents]], String

[[open]], [[category]]. You can also use

legendValueText

custom fields from your data Provider. If not set, uses Legend's value Text.

47 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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 Legend Period Value Text

name of a field (value / open / close / high String

/ low) and the value of the period that

legendPeriodValueText

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

diamond, triangleUp, triangleDown,

markerType

triangleLeft, triangleDown, bubble, line, none.

MISC PROPERTY

TYPE

DEFAULT

Behind Columns

Boolean

False

DESCRIPTION Enabling this feature will place the Line graph behind column graphs.

API

behindColumns

If you set this to true before chart is Animation Played

Boolean

False

drawn, the animation of this graph

animationPlayed

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

filling the area to the X axis). This feature

fillToGraph

is not supported by smoothed Line graphs. Whether to include this graph when Include in Min/Max

Boolean

Min. Line Distance

Number

True

calculating min and max value of the axis. It is useful if you have really lots of data

1

points. Based on this property the graph

48 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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

property you can define a different base

negativeBase

value at which colors should be changed to negative colors. Enable this feature to have a step line No Step Risers

Boolean

False

graph without risers.

noStepRisers

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 when parseDates property of

Point Position

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 Pro Candlesticks

candlestick will be empty, otherwise Boolean

False

filled with color. If previous close is less

proCandlesticks

than current close, the candlestick will use positive color, otherwise - negative color.

49 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Specifies graphs value at which cursor is showed. This is only important for Show Balloon At

candlestick and OHLC charts, also if

showBalloonAt

column chart has 'open' value. Possible values are: 'open', 'close', 'high', 'low'. If you want mouse pointer to change to

Show Hand on Hover

Boolean

False

hand when hovering the graph, set this

showHandOnHover

property to true. Step graph only. Specifies to which

Step Direction

direction step should be drawn.

stepDirection

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 if Down

Boolean

False

lines, bullets or columns if previous value is bigger than current value. In

useNegativeColorIfDow n

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

 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: PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

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

result in ChartsPLUS selecting an

String

title

appropriate graph title automatically. Type of the graph. Possible values are: 'line', Graph Type

'column', 'step', 'smoothedLine',

String

graphType

'candlestick', 'OHLC'. XY and Radar charts can only display 'line' type graphs.

Value Field

Column to use for the value of the graph.

String

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' Field Type

String

which can serve useful for hard-coded

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. Position of Column to map to, beginning at Field Position

Number

0

the first column (0).

fieldPosition

Appearance PLOT AREA PROPERTY Rotate

TYPE

DEFAULT

boolean

false

DESCRIPTION Enabling the check box will rotate the graph by 90 degrees, for instance rotating a

API

rotate

Column chart will make it as Bar chart.

51 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Column Spacing

int

3D Column Spacing

int

0

Enables to set the gap between two columns of same category.

0

Enables to set the gap between two 3D

columnSpacing columnSpacing3D

columns of same category. Enables to set the depth of the 3D part of

3D Depth

int

0

the plot area. If this value is greater than

depth3D

zero it will set 3D effect to the chart. Enables to set the angle to the 3D part of 3D Angle

int

45

the plot area. If this value is greater than

angle

zero it will set 3D effect to the chart. Plot Area Border Opacity

float

0

#000000 Plot Area Border Color

String

Plot Area Fill Opacity

float

Sets the opacity of plot area's border.

plotAreaBorderAlpha

Sets the color of plot area's border.

plotAreaBorderColor

0

Sets the opacity of plot area.

plotAreaFillAlphas

PLOT AREA FILL COLORS  Plot Area Gradient Angle: Sets the color gradient angle of the plot area. ANIMATION PROPERTY Sequenced Animation Start Opacity

TYPE

DEFAULT

Boolean

float

True

a sequence.

API

coordSequencedAni mation

Enables to set the opacity of the Chart on 100%

0 Start Duration

DESCRIPTION Select the Check box to enable Animation in

Number

start-up.

coordStartAlpha

Specifies the time the animation need to be extended.

coordStartDuration

Enables to select the effect that need to be Start Effect

String

bounce

displayed on start up. The available values

startEffect

are: Ease Out, Easy In, Elastic and Bounce.

52 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

MARGINS PROPERTY

TYPE

DEFAULT

Auto-Margin Offset

Number

10

DESCRIPTION

API

Enable to set the Auto-Margin offset. Specifies if margins of a chart should be calculated automatically so that labels of axes would fit. The chart will adjust only

Auto-Margins

Boolean

autoMargins

margins with axes. Other margins will use

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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Specifies whether cursor is enabled.

Enabled

Specifies if the user can zoom-in the Zoomable

boolean

true

chart. If pan is set to true, zoomable is

zoomable

switched to false automatically. Enable to set the color of Text.

Text Color

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 Position

String

middle

categoryAxis is set to true). If you want

cursorPosition

the cursor to follow mouse and not to glue to the nearest data point, set 'mouse' here. Possible values are: start, middle, mouse.

Cursor Line Color Cursor Line

Enable to set the ccolor of the cursor line. Specifies the opacity of the cursor line.

53 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Alpha Selection Alpha

Sets the opacity of the selection.

float

selectionAlpha

If this is set to true, the user will be Pan

boolean

false

able to pan the chart (Serial only)

pan

instead of zooming. If set to true, instead of a cursor line user will see a fill which width will Full Width

boolean

false

always be equal to the width of one data item. We'd recommend setting

fullWidth

cusrsorAlpha to 0.1 or some other small number if using this feature. Specifies if cursor should be left at it's Leave Cursor

boolean

false

last position. Useful for touch devices user might want to see the balloons

leaveCursor

after he moves finger away. If this is set to true, only one balloon at One Balloon Only

boolean

false

a time will be displayed. Note, this is

oneBalloonOnly

quite CPU consuming. If true, the graph will display balloon

Show Next Available

boolean

false

on next available data point if currently hovered item doesn't have

showNextAvailable

value for this graph. Specifies if cursor should only mark Select without Zooming

boolean

false

selected area but not zoom-in after

selectWithoutZooming

user releases mouse button. Axis of value line. If you set valueLineBalloonEnabled to true, but

Value Line Axis

String

you have more than one axis, you can

valueLineAxis

use this property to indicate which axis should display balloon. Specifies whether value balloons are

Value Balloons Enabled

enabled. In case they are not, the

boolean

true

balloons might be displayed anyway,

valueBalloonsEnabled

when the user rolls-over the column or bullet.

Value Line Enabled

boolean

false

Specifies if cursor of Serial chart should display horizontal (or vertical if chart is

valueLineEnabled

54 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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 Value Balloons Enabled

axis labels should be displayed. If you

boolean

true

have more than one axis, set

valueBalloonsEnabled

valueLineAxis property to indicate which axis should display the balloon. Specifies if value balloon next to value axis labels should be

Value Line Balloon Enabled

boolean

false

displayed. If you have more than one axis, set valueLineAxis

valueLineBalloonEnabled

property to indicate which axis should display the balloon. Specifies if value balloon next to value Category Balloon Enabled

axis labels should be displayed. If you

boolean

true

have more than one axis, set

categoryBalloonEnabled

valueLineAxis property to indicate which axis should display the balloon.

Category Balloon Alpha

float

Category Balloon Color

String

Specifies the opacity of the category

categoryBalloonAlpha

balloon. Specifies color of the category balloon.

categoryBalloonColor

cursorColor is used if not set. Category balloon date format (used

Category Balloon Date Format

String

MMM DD, YYYY

only if category axis parses dates). Check this page for instructions on

categoryBalloonDateForm at

how to format dates. Specifies if cursor should arrange Avoid Balloon Overlapping

boolean

true

balloons so they won't overlap. If chart

avoidBalloonOverlapping

is rotated, it might be good idea to turn this off.

Animation Duration Balloon Pointer Orientation

Sets the duration of animation of a

float

animationDuration

line, in seconds. Defines if the balloon should be shown

String

horizontal

above the data point or sideways

balloonPointerOrientation

55 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Bullets Enabled

boolean

false

Specifies if bullet for each graph will

bulletsEnabled

follow the cursor. Size of a graph's bullet (if available) at

Bullet Size

the cursor position. If you don't want

int

bulletSize

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

Bullet Alpha

float

1

setting their opacity to 0 and will set

bulletAlpha

graph Bullet Alpha to 1, the bullets will only appear at the cursor's position.

Scrollbar PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Specifies if scrollbar is enabled. You Enabled

boolean

true

can hide/show scrollbar using this

enabled

property without actually removing it. Resize Enabled

boolean

true

Specifies whether scrollbar has a resize

resizeEnabled

feature. Specifies which graph will be displayed

Graph

String

in the scrollbar. Only Serial chart's

graph

scrollbar can display a graph. Specifies whether number of grid Auto Grid Count

boolean

Background Alpha

float

Background Color

String

false

Count is specified automatically,

autoGridCount

according to the axis size. Sets the Background opacity.

#D4D4D4

Sets the Background color of the

backgroundAlpha backgroundColor

scrollbar. Sets the color of Text.

Text Color

Height of resize grip image. Note, you should also update the image in Drag Icon Height

int

ChartsPLUS/images folder if you don't

dragIconHeight

want it to be distorted because of resizing.

56 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Width of resize grip image. Note, you should also update the image in Drag Icon Width

int

ChartsPLUS images folder if you don't

dragIconWidth

want it to be distorted because of resizing.

Graph Fill Alpha Graph Line Color

float String

#BBBBBB

Set the opacity of Graph fill color.

graphFillAlpha

Specifies the Graph line color.

graphLineColor

By default the graph type is the same as the original graph's type, however in case of candlestick or OHLC you Graph Type

String

might want to show line graph in the

graphType

scrollbar. Possible values are: line, column, step, smoothedLine, candlestick, OHLC. Grid Alpha Grid Color Grid Count

Set the Grid opacity. Value range is 0 -

float

gridAlpha

1.

String int

#FFFFFF

Sets the Grid color.

gridColor

Enable to sets the number of grid lines.

gridCount

Specifies whether resize grips are Hide Resize Grips

boolean

hidden when mouse is away from the

hideResizeGrips

scrollbar. Maximum value of Value Axis of Chart

Maximum

float

Scrollbar. Calculated automatically, if

maximum

not set. Minimum value of Value Axis of Chart Minimum

float

Scrollbar. Calculated automatically, if

minimum

not set. Offset Scrollbar Height

int

Distance from plot area to scrollbar, in

offset

pixels.

int

Height (width, if chart is rotated) of a

scrollbarHeight

scrollbar. Duration of scrolling, when the user clicks on scrollbar's background, in

Scroll Duration

int

seconds. Note, update On Release

scrollDuration

Only should be set to false in order animation to happen.

57 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Selected Background Alpha Selected Background Color Selected Graph Fill Alpha Selected Graph Fill Color Selected Graph Line Alpha Selected Graph Line Color

Selected background opacity.

float String

#EFEFEF

Selected background color.

selectedBackgroundAlpha selectedBackgroundColor

Selected graph's fill opacity. Value

float String

selectedGraphFillAlpha

range is 0 - 1.

#888888

Selected graph's fill color.

Selected graph's fill opacity. Value

float

selectedGraphFillColor selectedGraphLineAlpha

range is 0 - 1.

String

#888888

Selected graph's line color.

selectedGraphLineColor

Specifies if the chart should be Update on Release Only

boolean

true

updated while dragging/resizing the

updateOnReleaseOnly

scrollbar or only at the moment when user releases mouse button.

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to set the angle to the 3D part of the plot area. If this value is 3D Angle

Number

45

angle

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

3D Depth

Number

0

depth3D

greater than zero it will set 3D effect to the chart. Sets the opacity of plot area's

float

Plot Area Border Opacity Plot Area Border Color

0%

Color

Plot Area Fill Opacity

#000000

float

0%

int

Plot Area Gradient Angle

0

plotAreaBorderAlpha

border. Sets the color of plot area's border. Sets the opacity of plot area. Sets the color gradient angle of the

plotAreaBorderColor plotAreaFillAlphas plotAreaGradientAngle

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 PROPERTY Enabled

TYPE Boolean

DEFAULT False

DESCRIPTION

API

Specifies whether cursor is enabled. Specifies if the user can zoom-in the

Zoomable

Boolean

True

chart. If pan is set to true, zoomable

zoomable

is switched to false automatically. Text Color

Color

#FFFFFF

Enable to set the color of Text.

color

61 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Specifies where the cursor line should be placed - on the beginning of the period (day, hour, etc) or in the middle (only when parseDates Cursor Position

String

middle

property of categoryAxis is set to

cursorPosition

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.

Cursor Line Color

Enable to set the ccolor of the cursor Color

line. Specifies the opacity of the cursor

Cursor Line Alpha Selection Alpha

#4A89E8

100%

float

100%

line. Sets the opacity of the selection.

selectionAlpha

If this is set to true, the user will be Pan

Boolean

False

able to pan the chart (Serial only)

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 Full Width

Boolean

False

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

Leave Cursor

Boolean

False

leaveCursor

devices - user might want to see the balloons after he moves finger away. If this is set to true, only one balloon

One Balloon Only

Boolean

False

at a time will be displayed. Note, this

oneBalloonOnly

is quite CPU consuming. If true, the graph will display balloon

Show Next Available

on next available data point if Boolean

False

showNextAvailable

currently hovered item doesn't have value for this graph.

Select without Zooming

Specifies if cursor should only mark Boolean

False

selectWithoutZooming

selected area but not zoom-in after

62 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ user releases mouse button. Axis of value line. If you set valueLineBalloonEnabled to true, but Value Line Axis

String

Primary Axis

you have more than one axis, you

valueLineAxis

can use this property to indicate which axis should display balloon. Specifies whether value balloons are

Value Balloons Enabled

enabled. In case they are not, the Boolean

True

balloons might be displayed anyway,

valueBalloonsEnabled

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

Value Line Enabled

might help users to compare distant Boolean

False

valueLineEnabled

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.

Value Balloons Enabled

If you have more than one axis, set Boolean

False

valueLineAxis property to indicate

valueBalloonsEnabled

which axis should display the balloon.

Specifies if value balloon next to value axis labels should be displayed. Category Balloon Enabled

If you have more than one axis, set Boolean

True

categoryBalloonEnabled

valueLineAxis property to indicate which axis should display the balloon.

Category Balloon Alpha

float

Specifies the opacity of the category 100%

categoryBalloonAlpha

balloon. Specifies color of the category

Category Balloon Color

Color

balloon. cursorColor is used if not

categoryBalloonColor

set.

63 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Category balloon date format (used Category Balloon Date Format

only if category axis parses dates). String

MMM DD, YYYY

categoryBalloonDateFormat

Check this page for instructions on how to format dates. Specifies if cursor should arrange

Avoid Balloon Overlapping

balloons so they won't overlap. If Boolean

True

avoidBalloonOverlapping

chart is rotated, it might be good idea to turn this off.

Animation Duration

Sets the duration of animation of a Number

0.3

animationDuration

line, in seconds. Defines if the balloon should be

Balloon Pointer Orientation

Bullets Enabled

String

horizontal

shown above the data point or

balloonPointerOrientation

sideways

Specifies if bullet for each graph will Boolean

False

bulletsEnabled

follow the cursor. Size of a graph's bullet (if available) at the cursor position. If you don't

Bullet Size

Number

8

bulletSize

want the bullet to change it's size, set this property to 1. Size of a graph's bullet (if available)

Bullet Size (Hovered)

at the cursor position. If you don't Number

1.7

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

Bullet Alpha

float

100%

set graph Bullet Alpha to 1, the

bulletAlpha

bullets will only appear at the cursor's position.

Scrollbar PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Specifies if scrollbar is enabled. You can Enabled

Boolean

False

hide/show scrollbar using this property

enabled

without actually removing it. Resize Enabled

Specifies whether scrollbar has a resize Boolean

False

resizeEnabled

feature.

64 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Specifies which graph will be displayed Graph

String

in the scrollbar. Only Serial chart's

graphs

scrollbar can display a graph. Specifies whether number of grid Count

Auto Grid Count Background Alpha

Boolean

False

is specified automatically, according to

autoGridCount

the axis size.

float

Background Color

Color

Text Color

Color

100%

#FFFFFF

Sets the Background opacity. Sets the Background color of the

backgroundAlpha backgroundColor

scrollbar.

#000000

Sets the color of Text.

color

Height of resize grip image. Note, you should also update the image in Drag Icon Height

Number

35

ChartsPLUS/images folder if you don't

dragIconHeight

want it to be distorted because of resizing. Width of resize grip image. Note, you should also update the image in

Drag Icon Width

Number

35

ChartsPLUS images folder if you don't

dragIconWidth

want it to be distorted because of resizing.

Graph Fill Alpha Graph Line Color

float Color

100%

#BBBBBB

Set the opacity of Graph fill color.

graphFillAlpha

Specifies the Graph line color.

graphLineColor

By default the graph type is the same as the original graph's type, however in Graph Type

case of candlestick or OHLC you might

String

graphType

want to show line graph in the scrollbar. Possible values are: line, column, step, smoothedLine, candlestick, OHLC.

Grid Alpha

float

Grid Color

Color

Grid Count

Number

Hide Resize Grips

Boolean

Maximum

Number

100%

#000000 5

Set the Grid opacity. Value range is 0 - 1.

gridAlpha

Sets the Grid color.

gridColor

Enable to sets the number of grid lines.

gridCount

Specifies whether resize grips are hidden False

hideResizeGrips

when mouse is away from the scrollbar. Maximum value of Value Axis of Chart

maximum

65 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Scrollbar. Calculated automatically, if not set. Minimum value of Value Axis of Chart Minimum

Scrollbar. Calculated automatically, if

Number

minimum

not set. Offset

Number

Scrollbar Height

Number

0

Distance from plot area to scrollbar, in

offset

pixels.

20

Height (width, if chart is rotated) of a

scrollbarHeight

scrollbar. Duration of scrolling, when the user clicks on scrollbar's background, in

Scroll Duration

Number

1

seconds. Note, update On Release Only

scrollDuration

should be set to false in order animation to happen.

Selected Background Alpha Selected Background Color Selected Graph Fill Alpha Selected Graph Fill Color Selected Graph Line Alpha Selected Graph Line Color

Number

Color

Number

Color

Number

Color

1 #EFEFEF 1

Selected background opacity.

Selected background color.

Selected graph's fill opacity. Value range

selectedBackgroundAlpha selectedBackgroundColor selectedGraphFillAlpha

is 0 - 1.

#888888 0

Selected graph's fill color.

Selected graph's fill opacity. Value range

selectedGraphFillColor selectedGraphLineAlpha

is 0 - 1.

#888888

Selected graph's line color.

selectedGraphLineColor

Specifies if the chart should be updated Update on Release Only

while dragging/resizing the scrollbar or Boolean

False

updateOnReleaseOnly

only at the moment when user releases mouse button.

66 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

Graphing Default Graph GENERAL PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to select the type of graph from the Graph Type

Dropdown.

ID

String

Title

String

Value Aggregation X Field

id title Summarize

String

Enables to select the projection method. XY chart only. Name of the x field in your

xField

data Provider. 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'

Field Type

String

which can serve useful for hard-coded

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 Position of Column to map to, beginning at Fixed Position

the first column (0). 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'

Y Field

String

which can serve useful for hard-coded

yField

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 Type

String

Type of Field. 'By Name' maps a field by its

fieldType

67 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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 Position of Column to map to, beginning at Fixed Position Bullet Size

the first column (0). Bullet size.

int

bulletSize

Type of the bullets. Possible values are: 'none', 'round', 'square', 'triangleUp', Bullet

String

none

'triangleDown', 'triangleLeft', 'triangleRight',

bullet

'bubble', 'diamond', 'xError', 'yError' and 'custom'. Bullet color. Will use lineColor if not set.

Bullet Color

Color

Bullet Size

Number

8

Min Bullet Size

Number

0

Max Bullet Size

Number

50

X Axis

Y Axis Value Precision

Bullet size. Specifies minimum size of the bullet (XY

bulletSize minBulletSize

chart). Specifies size of the bullet which value is the

maxBulletSize

biggest (XY chart). XY chart only. A horizontal value axis object

String

bulletColor

xAxis

to attach graph to. XY chart only. A vertical value axis object to

String

yAxis

attach graph to. Enables to set the Precision of values, by Number

default chart’s precision is set. 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. Connect

Boolean

True

Specifies whether to connect data points if

connect

68 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ data is missing. By default this property is enabled. Enables to show or Hide the graph, but it is Hidden

Boolean

False

hidden

recommended to use hide Graph(graph) and show Graph(graph) methods instead. Specifies whether the value balloon of this

Show Balloon

boolean

true

showBalloon

graph is shown when mouse is over data item or chart's indicator is over some series.

CONDITIONAL FORMATTING PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to select the condition for

Line/Bullet Conditional Formatting

Line/Bullet Chart that is defined in the Conditional Formatting tab.

DATA FIELDS PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to select the Alpha field from the Opacity Field

Bullet Field

Color Field Custom Bullet Field

available fields of the data source.

String

Enables to select the Bullet field from the

bulletField

available fields of the data source.

String

Name of the color field in your data

colorField

Provider.

String

Name of the custom bullet field in your data

customBulletField

Provider. Name of the dash length field in the data Provider. This property adds a possibility to

Dash Length Field

String

change graphs’ line from solid to dash on

dashLengthField

any data point. You can also make columns border dashed using this setting.

Description Field

Error Field

String

Name of the description field in your data

descriptionField

Provider.

String

Name of error value field in your data

errorField

provider. Name of the fill colors field in your data

Fill Colors Field

String

Provider. This property adds a possibility to

fillColorsField

change line graphs’ fill color on any data point to create highlighted sections of the

69 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ graph. Works only with ChartsPLUS Serial Chart. Name of the gap field in your data Provider. Gap Field

String

gapField

You can force graph to show gap at a desired data point using this feature.

Label Color Field URL Field

String

Name of label color field in data provider.

String

Name of the URL field in your data Provider.

labelColorField urlField

APPEARANCE PROPERTY

TYPE

Balloon Color

Color

DEFAULT

DESCRIPTION

API

Enable to set the color of the balloon. By

balloonColor

default the graph or data item color is set. Enable to set the column width for each

Column Width

float

100%

columnWidth

graph individually. Value ranges from 0%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

float

100%

Enables to set the opacity of Columns.

fillAlphas

FILL COLORS  Options: Enables options to select the Color type like Single Color, SAP Color, Color Brewer or to

Remove all the selected colors. PROPERTY

TYPE

DESCRIPTION Enables to set a fixed Column width of the

Fixed Column Width

Number

Font Size

Number

Gradient Orientation

String

Line Alpha

DEFAULT

API

fixedColumnWidth

graph.

12

Enables to set the size of value labels text.

fontSize

By default chart's fontSize is set.

vertical

Enables to set the size of value labels text.

gradientOrientation

By default chart's font Size is set.

float

Enables to set the opacity of the Line 100%

lineAlpha

(Column border).

70 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Line Color

Color

Line Thickness

Number

Enable to set the color of the Line Enables to set the thickness of the Line 1

100%

lineThickness

(Column border). Enables to fill opacity of negative part of

Negative Fill Alpha

lineColor

negativeFillAlphas

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to set the opacity of the negative Negative Line Alpha

float

portion of the graph Line (Column

negativeLineAlpha

border). Enables to set the color of the negative portion of the graph Line. In case the

Negative Line Color

String

graph type is candlestick or OHLC,

negativeLineColor

negativeLineColor is used when close value is less then open value. This property should be used together with topRadius (when columns look like

Show on Axis

boolean

false

cylinders). If this property is enabled, the

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).

Top Radius

int

You 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.

71 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

BULLETS AND LABELS PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enable to select the type of bullet from the list of available options like 'none', Bullet

String

none

'round', 'square', 'triangleUp',

bullet

'triangleDown', 'triangleLeft', 'triangleRight', 'bubble', 'diamond', 'xError', 'yError' and 'custom'. Enable to select the color of the Bullet

Bullet Color

color. By default bullet color is set

Color

bulletColor

same as Line color. Bullet Size

Number

Bullet Alpha

8 100%

Enable to set the Bullet Size. Enable to set the opacity of the Bullet

bulletSize bulletAlpha

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 Bullet Axis

determine the size of this bullet - that's

String

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.

Bullet Border Alpha

float

Enable to set the opacity of the Bullet 100%

bulletBorderAlpha

Border. Enable to set the color of the Bullet

Bullet Border Color

Border. By default Line color is set to this

Color

bulletBorderColor

property. This property works with candlestick graph type, you can set it to open, close,

Show Bullets At

String

close

high and low. If this is set to high, the

showBulletsAt

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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

Custom Bullet

String

customBullet

used as custom bullet. The Bullet counts can be hidden if there

Hide Bullets Count

Number

0

are more data points by using this feature.

hideBulletsCount

0 means the bullets will always be visible. If graph's type is column and label text is

Show All Value Labels

set, graph hides labels which do not fit Boolean

False

showAllValueLabels

into the column's space. If you don't want these labels to be hidden, set this to true.

Label Anchor Label Offset

String

auto

Number

0

Enable to set the data label text anchor.

labelAnchor

Offset of data label.

labelOffset

Enable to set the position of the label as 'bottom', 'top', 'right', 'left', 'inside', Label Position

String

top

'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

[[description]], [[percents]], [[open]],

String

labelText

[[category]]. Bullet Border Thickness

Enable to set the thickness of the bullet Number

2

bulletBorderThickness

border.

LEGEND PROPERTY

TYPE

DEFAULT

DESCRIPTION Enable to set whether to show/hide the

Visible in Legend

Boolean

True

Switchable

Boolean

True

Custom Marker

String

API

visibleInLegend

graph in the legend. Enabling this feature will hide the graph

switchable

when the user clicks on legend entry. Provide the path of the image to set it as

customMarker

Custom Marker. Enable to set the Legend Marker opacity,

Legend Alpha

100%

by default Line alpha is set as Legend

legendAlpha

alpha.

73 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Legend Color

Enable to set the Legend Marker color.

Color

legendColor

This property enables to set the text of Legend value. You can use tags like Legend Value Text

[[value]], [[description]], [[percents]], String

legendValueText

[[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

Legend Period Value Text

name of a field (value / open / close / high String

legendPeriodValueText

/ 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

Marker Type

available list of options like circle,

String

markerType

diamond, triangleUp, triangleDown, triangleLeft, triangleDown, bubble, line, none.

MISC PROPERTY

TYPE

DEFAULT

DESCRIPTION XY chart only. If you set this property to id

API

or reference of your X or Y axis, and the fill Fill to Axis

String

Alphas is > 0, the area between graph and

fillToAxis

axis will be filled with color, like in this demo. You can set another graph here and if fill Fill to Graph

String

alpha is >0, the area from this graph to Fill

fillToGraph

To Graph will be filled (instead of filling the area to the X axis). This feature is not

74 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ supported by smoothed Line graphs. Include in Min/Max

Whether to include this graph when Boolean

True

includeInMinMax

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

Min. Line Distance

indicator in anyway, so the user will not Number

1

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. 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

String

middle

when parseDates property of categoryAxis

pointPosition

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 Hover

Boolean

URL Target

String

Negative Color if Down

Boolean

False

hand when hovering the graph, set this

showHandOnHover

property to true. Target to open URLs in, i.e. _blank, _top,

urlTarget

etc. False

If negativeLineColor and/or

75 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Unique id of a Guide. You don't need to set Id

String

Fill Color

Color

Fill Alpha

Guide

100%

it, unless you want to.

id

Fill color of Guide

fillColor

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

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

toValue

Row Binding: Position or Name Column Binding: Position or Name Category...

Category of the guide (in case the guide is

category

76 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ for category axis). Value Type: Data Bound or Static Value Row Binding: Position or Name Column Binding: Position or Name Labe Format: [[value]] 'To' category of the guide (in case the guide is for category axis). Value Type: Data Bound or Static Value ...To Category

Row Binding: Position or Name

toCategory

Column Binding: Position or Name Labe Format: [[value]] 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.

above

LABEL Enables to set the properties of the Guide Labels PROPERTY

TYPE

DEFAULT

DESCRIPTION Set the label text which will be displayed

Label

String

Color

Color

API

label

near the guide.

#000000

Sets the color of a Guide label.

color

Specifies the Position of guide label. Label Position

String

center

Possible values are 'left' or 'right' for

labelPosition

horizontal axis and 'top' or 'bottom' for vertical axis. Enable to set the Rotation angle of a guide

Label Rotation

Number

Font Size

Number

Label Inside

Boolean

False

Bold Label

Boolean

False

labelRotation

label. Enable to set the font size of Guide label.

fontsize Specifies if Guide label should be displayed inside the chart or not. Specifies if Guide label should be bold or

boldLabel

not.

77 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

BALLOON Specifies the Balloon properties of Guide. PROPERTY

TYPE

DEFAULT

DESCRIPTION Enable to set the text which will be

Balloon Text

String

Balloon Color

Color

API

balloonText

displayed if the user rolls-over the guide. Specifies the Balloon Fill Color

balloonColor

LINE Enables to Customize the Guide Line. PROPERTY

TYPE

Line Thickness

Number

Line Color

Color

DEFAULT

Line Alpha

DESCRIPTION Enable to set Line Thickness.

100%

API lineThickness

Enables to set the Line Color.

lineColor

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.

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

GENERAL PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Unique id of value axis. It is required to set Id

String

Value Axis

it, if you need to tell the graph which exact value axis it should use.

Title

String

Title Bold

Boolean

Specifies the title of the axis False

Displays the Axis Title in Bold. Specifies Color of axis title. Will use text

Title Color

Color

Title Font Size

Number

Id

titleBold titleColor

color of chart if not set any. Specifies Font size of axis title. Will use font

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

value might still be adjusted so that it would

Number

minimum

be possible to draw grid at rounded intervals. If you don't want max value to be calculated by the chart, set it using this property. This Maximum

value might still be adjusted so that it would

Number

maximum

be possible to draw grid at rounded 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 Min/Max

Boolean

False

plot area and grid would be at equal 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

Reversed

Boolean

False

logarithmic

logarithmic. Specifies if value axis should be reversed

reversed

(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'.

Stack Type

Number

Stacking mode of the axis. Possible values

stackType

79 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ are: 'none', 'regular', '100%', '3D'. Note, only graphs of one type will be stacked. Specifies whether number of Grid Count is Auto Grid Count

Boolean

False

specified automatically, according to the

autoGridCount

axis size. If auto Margins of a chart is set to true, but

Ignore Axis Width

you want this axis not to be measured when Boolean

False

ignoreAxisWidth

calculating margin, set ignore Axis Width to true.

Offset

Number

0

The distance of the axis to the plot area, in

offset

pixels. Negative values can also be used.

GRID AND FILLS PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to select Grid Type for Radar chart. Grid Type

String

polygons

Possible values are: 'polygons' and 'circles'.

gridType

For polar charts ‘circles’ can be set. Grid Opacity

Number

Grid Color

Color

Specifies the opacity of grid lines. Specifies color of grid lines.

gridColor

Number of grid lines. In case this is value axis, or your categoryAxis parses dates, the Grid Count

Number

5

number is approximate. The default value is

gridCount

5. If you set auto Grid Count to true, this property is ignored. Grid Thickness

Number

1

Specifies thickness of grid lines.

gridThickness

Specifies opacity of minor grid. In order Minor Grid Alpha

Number

Minor Grid Enabled

Boolean

0.07

minor to be visible, you should set minor

minorGridAlpha

Grid Enabled to true. False

Specifies if minor grid should be displayed.

minorGridEnabled

AXIS APPERANCE PROPERTY

TYPE

Axis Opacity

Number

Axis Color

Color

Axis Thickness

Number

DEFAULT 1

#000000 1

DESCRIPTION Specifies the opacity of Axis Enable to set the color of Axis Specifies thickness of Axis

API axisAlpha

axisColor axisThickness

80 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

Base Value

Number

Dash Length

Number

0 0

Enables to set the Base value of the axis. Specifies the Length of a dash. 0 means line

baseValue dashLength

is not dashed. If your values represents time units, and you want value axis labels to be formatted

Duration

as duration, you have to set the duration

String

duration

unit. Possible values are: 'ss', 'mm', 'hh' and 'DD'. Every second space between grid lines can Fill Opacity

be filled with color. Set fill Alpha to a value

Number

fillAlpha

greater than 0 to see the fills. Every second space between grid lines can Fill Color

be filled with color. Set fill Alpha to a value

Color

fillColor

greater than 0 to see the fills. Tick Length

Enable to set the length of the tick marks.

Number

tickLength

LABELS PROPERTY Labels Enabled

TYPE

DEFAULT

DESCRIPTION Specifies whether axis displays category

Boolean

False

API

labelsEnabled

axis' labels and value axis' values. Frequency at which labels should be placed.

Label Frequency

Number

1

Doesn't work for Category Axis if parse

labelFrequency

Dates is set to true. Enables to adjust position of axes labels.

Label Offset

Number

15

Works both with Category Axis and Value

labelOffset

Axis. Enables to Rotate the angle of a label. Only horizontal axis' values can be rotated. If you Label Rotation

Number

labelRotation

set this for vertical axis, the setting will be ignored. Possible values from -90 to 90.

Bold Labels

Boolean

Text Color

Color

Font Size

Number

False

Specifies if axis labels should be bold or not. Specifies the color of axis value labels. Will

boldLabels color

use chart's color by default.

12

Sets the size of value labels text. Will use

fontSize

chart's font Size by default.

81 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Whether to show first axis label or not. This Show First Label

works properly only on Value Axis. Boolean

False

showFirstLabel

With Category Axis it won’t work 100%, it depends on the period, zooming, etc. Whether to show last axis label or not. This

Show Last Label

works properly only on Value Axis. Boolean

False

showLastLabel

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. This property is used when calculating grid

Min Horizontal Gap

Number

75

count (when auto Grid Count is true). It

minHorizontalGap

specifies minimum cell width required for one span between grid lines. This property is used when calculating grid

Min Vertical Gap

Number

35

count (when autoGridCount is true). It

minVerticalGap

specifies minimum cell height required for one span between grid lines. Specifies if graph’s values should be

Recalculate to Percent’s

Boolean

False

Integers Only

Boolean

False

Precision

Number

Unit

String

recalculated to percent’s. Specifies whether values on axis can only be

Unit Position

String

-1

Precision (number of decimals) of values. Unit which will be added to the value label.

right

integersOnly

integers or both integers and doubles.

Position of the unit. Possible values are 'left'

precision unit unitPosition

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 Notation

Boolean

False

Otherwise only values bigger then 1e+21

useScientificNotation

and smaller then 1e-7 will be displayed in scientific notation.

82 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

MISC PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Specifies whether guide values should Include Guides in Min/Max

Boolean

False

be included when calculating min and max of the axis. If true, the axis will include hidden

Include Hidden

Boolean

False

graphs when calculating min and max

includeHidden

values. If set value axis scale (min and max

Min/Max Multiplier

numbers) will be multiplied by it. I.e. if Number

set to 1.2 the scope of values will increase by 20%.

Radar Categories Enabled

Radar chart only. Specifies if Boolean

False

categories (axes' titles) should be

radarCategoriesEnabled

displayed near axes) In case you synchronize one value axis with another, you need to set the

Synchronizatio n Multiplier

synchronization multiplier. Use

Number

synchronizationMultiplier

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

Synchronize With

both reference to your axis or id of the

String

synchronizeWith

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

Total Text

String

totalText

= '[[total]]' will make it to display total value above the most-top column.

Total Text Color

Color

Total Text Offset

Number

Specifies color of total text.

0

Specifies distance from data point to

totalTextColor totalTextOffset

total text. This allows you to have logarithmic

Treat Zero As

Number

0

value axis and have zero values in the

treatZeroAs

data. You must set it to >0 value in order to work.

83 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Name of the field in chart's data Description Field Title Field Value Field

String

Provider which holds a string with

descriptionField

description.

String

All Dimensions

String

Enables to set the Title Field.

titleField

Enables to set the Value Field.

valueField

When enabled, will allow aggregation to take place by the 'Title Field' Value Aggregation

String

designated on in the configuration. Summarize

valueFieldAggregation

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

Start Angle

Number

90

set to 0. If 'Depth 3D' is greater than 0,

startAngle

then there can be two angles only: 90 and 270. Value range is 0-360.

RADIUS PROPERTY

TYPE

DEFAULT

Pie Radius

Number

20

Inner Radius

Number

0

DESCRIPTION Minimum Pie Radius Inner radius of the pie, in pixels or

API pieMinRadius

innerRadius

percentage. Radius of a pie, in pixels or percents.

Radius

Number

0

By default, radius is calculated

radius

automatically.

OTHER PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Name of the field in chart's Opacity Field

String

dataProvider which holds slice's

alphaField

Opacity.

84 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ The following tags can be used:

Balloon Text

String

[[title]]: [[percents]]% ([[value]])[[descript ion]]

[[value]], [[title]], [[percents]], [[description]] or any other field name

balloonText

from your data provider. HTML tags can also be used.

Color Field

Name of the field in chart's

String

colorField

dataProvider which holds slice's color. Sometimes, because of a rounding, percent of a sum of all slices is not

Adjust Precision

equal to 100%. If you set this to true, Boolean

False

adjustPrecision

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 PROPERTY

TYPE float

DEFAULT

Pull Duration

Number

1

Pull Effect

String

Bounce

Hover Opacity

100%

DESCRIPTION Opacity of a hovered slice. Pull out duration, in seconds.

API

hoverAlpha pullOutDuration

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 PROPERTY Outline Opacity Outline Color Outline Thickness

TYPE float

DEFAULT

Color

#FFFFFF

0%

Number

1

TYPE

DEFAULT

DESCRIPTION

API

outlineAlpha

Outline opacity. Outline color. Pie Outline Thickness.

outlineColor outlineThickness

ANIMATION PROPERTY Sequenced

Boolean

1

DESCRIPTION Specifies whether the animation should be

API

coordSequence

85 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Animation

sequenced or all slices should appear at

dAnimation

once. Start Opacity

float

Initial opacity of all slices. Slices will fade in 0%

Radius of the positions from which the Start Radius

Number

500

Pie Start Duration

Number

0

coordStartAlpha

from start Opacity.

startRadius

slices will fly in. Duration of the animation, in seconds. Start Effect

Pie Start Effect

Grouped Slice PROPERTY Grouped Slice Opacity

TYPE float

DEFAULT 100%

DESCRIPTION Sets the opacity of the group slice.

API groupedAlpha

Color of the group slice. The default value is Grouped Slice Color

Color

Grouped Slice Description

String

Grouped Slice Pulled

Boolean

Grouped Title

String

not set - this means the next available color

groupedColor

from 'colors' property will be used. If this is set, the group slice will be pulled

groupedDescription

out when the chart loads. If this is set, the group slice will be pulled False

Other

groupedPulled

out when the chart loads. Title of the group slice.

groupedTitle

If there is more than one slice whose percentage of the pie is less than this Group Slice Percent

Number

0

number, those slices will be grouped

groupPercent

together into one slice. This is the 'other' slice. It will always be the last slice in a pie.

Labels PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Slices with percent less then 'Hide Labels Percent' won't display labels This is useful to Hide Percent

Number

0

avoid cluttering up the chart, if you have a

hideLabelsPercent

lot of small slices. 0 means all labels will be shown. The distance between the label and the Label Radius

Number

20

slice, in pixels. You can use negative values

labelRadius

to put the label on the slice.

86 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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 Enabled

Boolean

True

Specifies whether data labels are visible.

labelsEnabled

The following tags can be used: [[value]], Label Text

String

Label Opacity

[[title]]: [[percents]]% 20%

labelText

[[title]], [[percents]], [[description]] or any other field name from your data provider. Label tick opacity. Value range is 0 - 1.

labelTickAlpha

Sets Label tick color.

labelTickColor

Label Color

Color

#000000

Max Width

Number

200

PROPERTY

TYPE

DEFAULT

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.

TYPE

DEFAULT

If width of the label is bigger than Maximum

maxLabelWidth

Label Width, it will be wrapped.

Positioning DESCRIPTION

API

PIE CENTER PROPERTY Pie X

Number

0

DESCRIPTION You can set fixed position of a pie center, in

API

pieX

pixels or in percentage. You can set fixed position of a pie center, in Pie Y

Number

0

pieY

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 PROPERTY

TYPE

DEFAULT

Adjust Size

Boolean

False

DESCRIPTION Uses the whole space of the canvas to draw

API adjustSize

87 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ the gauge. Useful when you intend your gauge to act

Clockwise Only

Boolean

False

Min Radius

Number

10

TYPE float

DEFAULT

clockWiseOnly

as a clock. Minimum radius of a gauge.

minRadius

GUAGE FACE PROPERTY Face Opacity Face Border Opacity Face Border Color Face Border Width

float

0% 0%

Color

#555555

Number

1

Face Color

Color

#FAFAFA

Face Pattern(Experi mental)

String

DESCRIPTION Gauge face opacity. Gauge Face Border Opacity

API faceAlpha

faceBorderAlpha

Gauge Face Border Opacity Gauge Face Border Width Gauge Face Color

faceBorderWidth faceColor

Gauge Face Image Pattern

POSITION PROPERTY

TYPE

DEFAULT

DESCRIPTION Gauge's horizontal position in pixels, origin

Gauge X

Number

Gauge Y

Number

API

gaugeX

is the center. Centered by default. Gauge's vertical position in pixels, origin is

gaugeY

the center. Centered by default.

MARGINS PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Number of pixels between the container's bottom border and plot area. This space Margin Bottom

Number

20

can be used for bottom axis' values. If

marginBottom

auto Margin is true and bottom side has axis, this property is ignored. Number of pixels between the container's top border and plot area. This space can

Margin Top

Number

20

be used for top axis' values. If auto Margin

marginTop

is true and top side has axis, this property is ignored.

88 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Number of pixels between the container's top border and plot area. This space can Margin Left

Number

20

be used for top axis' values. If auto Margin

marginLeft

is true and top side has axis, this property is ignored. Number of pixels between the container's right border and plot area. This space can Margin Right

Number

20

be used for Right axis' values. If auto

marginRight

Margin is true and right side has axis, this property is ignored.

ANIMATION PROPERTY

TYPE

DEFAULT

Duration of Arrow Animation

Number

0

DESCRIPTION

API

startDuration Duration of Arrow Animation Transition effect of the arrows, possible

Start Effect

String

Bounce

effects: easeOutSine, easeInSine, elastic,

startEffect

bounce.

Arrows PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to Add or Remove an Arrow.

Options

Unique id of an Arrow. You don't need to Id

Value

String

Arrow

String

{"valueType" : "static", "staticValue" : "10" }

set it, unless you want to

id

Value that need to be shown in the Gauge. It can be Data bound or a Static

value

one. Enables to set the Gauge Axis.

Gauge Axis

String

Gauge Axis

Alpha

float

100%

Sets the Arrow Opacity

Border Alpha

float

100%

Sets the Arrow border opacity.

Clock wise only

Boolean

False

Color

Color

#000000

Inner Radius

Number

Sets the Arrow to revolve clock wise only Sets the color of the Arrow

axis alpha borderAlpha clockWiseOnly color

Sets Inner radius of the Gauge, you can set

Nail Alpha

either in Pixel or Percentage. 100%

Sets the Opacity of Nail

innerRadius nailAlpha

89 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Nail Border Thickness

Number

Nail Radius

Number

Radius

Number

Start Width

Number

Sets the Nail Border Thickness Specifies the Nail Radius

nailBorderThickness nailRadius

Sets the Length of Needle, you can set either in Pixel or Percentage. Sets Needle width

radius startWidth

Axes GENERAL PROPERTIES PROPERTY Id

TYPE

DEFAULT

DESCRIPTION Unique id of an axis.

String

Gauge Axis

Axis start (min) value. It can be either

Start Value

Number

{"valueType" : "static", "staticValue" : "0" }

Number

{"valueType" : "static", "staticValue" : "100" }

Axis end (max) value. It can be either

End Value

Start Angle

Number

-120

End Angle

Number

120

static or Data bound

static or Data bound

API

id startValueConfig endValueConfig

Axis start angle. Valid values are from -

startAngle

180 to 180. Axis end angle. Valid values are from -

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 Position

String

Right

Value Interval

Number

Int

unit

axis labels Position of the unit.

unitPosition

Interval at which ticks with values should be placed.

valueInterval

APPEARANCE PROPERTY

TYPE float

DEFAULT

Axis Color

Color

#000000

Axis Thickness

Number

1

Center X (px)

Number

Axis Opacity

100%

DESCRIPTION Axis opacity. Axis color. Thickness of the axis outline.

API axisAlpha

axisColor axisThickness

X position of the axis, relative to the

90 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ center of the gauge. You can set either in Pixel or Percentage. Y position of the axis, relative to the Center Y (px)

center of the gauge. You can set either in

Number

Pixel or Percentage. Specifies if grid should be drawn inside or Grid Inside

Boolean

True

Inside

Boolean

True

Label Frequency

Number

1

Label Offset

Number

15

Minor Tick Interval

Number

Minor Tick Length

Number

Radius

Number

Show First Label

Boolean

True

Show Last Label

Boolean

True

gridInside

outside the axis. Specifies if labels should be placed inside

inside

or outside the axis. Frequency of labels. Distance from axis to the labels. Interval at which minor ticks should be

labelFrequency labelOffset minorTickInterval

placed. Length of the Minor Ticks

5

Axis radius. You can set either in Pixel or

minorTickLength radius

Percentage. Specifies if the first label should be

Tick Opacity

showFirstLabel

shown. Specifies if the last label should be shown.

showLastLabel

Opacity of axis ticks.

100%

Color of axis ticks.

Tick Color

Color

Tick Length

Number

10

Tick Thickness

Number

1

Length of a major tick. Tick thickness.

tickLength tickThickness

BANDS PROPERTY

TYPE

DEFAULT

Band Opacity

100%

Band Outline Opacity

100%

Band Outline Color

Color

#000000

Band Outline Thickness

Number

0

DESCRIPTION

API

Opacity of band fills. Opacity of band outlines. Color of band outlines. Thickness of band outlines.

balloonTextConfig

Balloon Text 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Opacity of band fill. Will use axis's 'Band Opacity

100%

Opacity' if not specified here.

alpha

Inner radius of a band. If not set any, the band will end with the end of minor Inner Radius

Number

85

ticks. Set 0 if you want the band to be

innerRadius

drawn to the axis center. Band radius. If not set any, the band will Radius

Number

100

start with the axis outline.

radius

LABELS PROPERTY

TYPE

DEFAULT

Labels Enabled

Boolean

True

DESCRIPTION Specifies if labels on the axis should be

API

labelsEnabled

shown Specifies if small and big numbers

Use Prefixes

Boolean

False

should use prefixes to make them more

usePrefixes

readable. Bottom Text

Number

Bottom Text Bold

Boolean

Bottom Text Color

Color

Bottom Text Font Size

Number

Bottom Text Y-Offset

Number

Top Text

Text displayed below the axis center. True

Boolean

Top Text Color

Color

Top Text Font Size

Number

Top Text Y-Offset

Number

bottomTextBold

Bottom text color.

bottomTextColor

Font size of bottom text.

bottomTextFontSiz e

Y offset of bottom text.

bottomTextYOffset

Text displayed above the axis center.

String

Top Text Bold

Specifies if text should be bold.

True

0

topText

Specifies if text should be bold.

topTextBold

Color of top text.

topTextColor

Font size of top text.

topTextFontSize

Y offset of top text.

topTextYOffset

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to select the Chart Type from the Chart Type

Serial

available possible types: 'Serial', 'Pie', 'XY',

chartType

'Radar', 'Funnel', and 'Gauge'. Text Color

Color

#000000

PROPERTY

TYPE

DEFAULT

Add Class Names

Boolean

False

Enables to set the color of the chart Text.

CSS DESCRIPTION Specifies if class names should be added to

API

addClassNames

chart elements. This prefix is added to all class names which

Class Name Prefix

String

ChartsPLUS2

are added to all visual elements of a chart in

classNamePrefix

case 'Add Class Names' is enabled.

95 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

BORDER & BACKGROUND PROPERTY

TYPE

DEFAULT

DESCRIPTION Enables

Background Opacity Background Color

0%

to

set

the

‘Background

Opacity' of the chart, must be set over

backgroundAlpha

0 to apply. Enables to set the ‘Background color' Color

#FFFFFF

0%

#000000

borderAlpha

the Chart. Border Color, 'Border Opacity' must be

Color

backgroundColor

of the chart. Ex: #A08888 Enables to set the Border Opacity of

Border Opacity Border Color

API

borderColor

set over 0 to apply.

NUMERIC FORMATS PROPERTY Decimal Separator

TYPE String

DEFAULT

.

DESCRIPTION Specify the Decimal Separator that

API

decimalSeparator

need to be used. Precision of percent values. -1 means

Percent Precision

Number

2

percent values won't be rounded at all

percentPrecision

and show as they are. Precision of values. -1 means values

Precision

Number

-1

won't be rounded at all and show as

precision

they are. Thousand Separator

Specifies the Thousand Separator String

,

TYPE

DEFAULT

thousandsSeparator

character.

FONT PROPERTY Font Family Font Size

Calibri(Window) Number

12

TYPE

DEFAULT

DESCRIPTION Enables to select the font family from

API

fontFamily

the list of available options. Specifies the Font size.

fontSize

HAND DRAWING

PROPERTY

DESCRIPTION

API

If set, the lines of the chart will be distorted and will produce handHand Drawn

Boolean

False

drawn effect. Try to adjust 'Hand Draw

handDrawn

Scatter' and 'Hand Draw Thickness' properties for a more scattered result.

96 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Defines by how many pixels handHand Draw Scatter

Number

2

drawn line will fluctuate (when 'Hand

handDrawScatter

Drawn' is set.) Defines by how many pixels line

Hand Draw Thickness

Number

1

thickness will fluctuate (when 'Hand

handDrawThickness

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

Pan Events Enabled

and occupies all the screen of your Boolean

True

panEventsEnabled

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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Unset this if you don't want chart to Auto Resize

Boolean

True

resize itself whenever its parent

autoResize

container size changes. Theme

String

Responsive

Boolean

Enables to specify a Theme. Enables the Responsive (Experimental) False

theme responsive

mode.

97 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

Number Prefixes This section enables to add Prefixes to Small and Big Numbers in the Chart. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

If set, prefixes will be used for big and small numbers. You can specify the Use Prefixes

types of prefixes via 'Prefixes of Small

String

usePrefixes

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 Numbers

You can also change the order,

String

prefixesOfBigNumbers

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 Small Numbers

numbers. You can also change the order,

String

prefixesOfSmallNumbers

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

If this is set, border color instead of Adjust Border Color

background color will be changed Boolean

True

adjustBorderColor

when user rolls-over the slice, graph, etc. Duration of balloon movement from

Animation Duration

Number

previous point to current point, in

animationDuration

seconds. Balloon border opacity. Value range

Border Opacity Border Color

0.3

100% Color

#FFFFFF

is 0 - 1. Balloon border color. Will only be

borderColor

98 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ used when 'Adjust Border Color' is not set. Border Thickness

Number

2

Text Color

Color

#000000

Corner Radius

Number

0

Fade Out Duration

Number

0.3

Balloon border thickness. Color of text in the balloon. Balloon corner radius. Duration of a fade out animation, in

Fill Opacity

100%

borderThickness

cornerRadius fadeOutDuration

seconds. Balloon background opacity. Balloon background color. Usually balloon background color is set by

Fill Color

Color

fillColor

the chart. Only if 'Adjust Border Color' is set, this color will be used. Specifies if balloon should follow mouse when hovering the

Fixed Position

Boolean

False

slice/column/bullet or stay in fixed

fixedPosition

position (this does not affect balloon behavior if 'Chart Cursor' is used). Size of text in the balloon. Chart's Font Size

'Font Size' is used by default if not

Number

fontSize

specified here. Horizontal Padding

Number

Max Width

Number

8

Horizontal padding of the balloon. Maximum width of a balloon.

horizontalPadding maxWidth

Defines horizontal distance from mouse pointer to balloon pointer. X Offset

Number

1

NOTE: If you set it to a small value,

offsetX

the balloon might flicker, as mouse might lose focus on hovered object. Defines vertical distance from mouse pointer to balloon pointer. NOTE: If Y Offset

Number

6

you set it to a small value, the

offsetY

balloon might flicker, as mouse might lose focus on hovered object. The width of the pointer (arrow) Pointer Width

'root'. Only used if 'Corner Radius' is

Number

pointerWidth

0. Shadow

100%

Opacity of a shadow.

99 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Opacity Shadow Color

Color

#000000

shadowColor

Color of a shadow. If 'Corner Radius' of a balloon is > 0, 'Show Bullet' is set for value balloons

Show Bullet

Boolean

False

showBullet

when 'Chart Cursor' is enabled. If you don't want the bullet near the balloon, disable this. Text alignment, possible values are

Text Alignment

String

Center

Vertical Padding

Number

4

textAlign

Left, Middle, and Right. Vertical padding of the balloon.

verticalPadding

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Unique id of a Label. You don't need to set Id

String

Label

Text

String

Label Title

URL

String

Color

Color

it, unless you want to. Text of label.

id text

URL which will be accessed if user clicks on

Alpha Number

Bold

Boolean

Align

Color of label.

color

Specifies opacity of label

alpha

Sets the Label Text size.

size

False

Specifies if the label is bold or not.

bold

Left

Text alignment of label

align

100%

Size

String

url

the label.

POSITIONING PROPERTY

TYPE

DEFAULT 0

DESCRIPTION

API

Enables to set the angle of the Label.

Rotation

Number

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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. PROPERTY

TYPE

DEFAULT

DESCRIPTION Enables the function to export the Chart.

API

Specifies the name of the export file.

enabled fileName

Enables set the bottom margin while

position

Enabled

Boolean

False

File Name

String

ChartsPLUS

Position

String

Right

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 Annotation

Boolean

True

Allow Print

Boolean

False

exporting.

Allows the comments to get printed.

exportAnnotate

Enables to print the Chart component.

101 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

 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 PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Enables to Add or Remove a Title/Subtitle

Options

Sets a unique id of a Title. You don't need to Id

String

Chart Title

Text

String

Chart Title

Color

Color

Alpha

100%

Size

Number

24

Bold

Boolean

False

set it, unless you want to.

id

Sets the Text of a title.

text

Sets the Text color of a title.

color

Specifies the opacity of a title.

alpha

Sets the text size of a title.

size

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

 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

PROPERTY

TYPE

DEFAULT

Enabled

Boolean

True

DESCRIPTION Specifies if legend is enabled or not.

API enabled

Legend markers can mirror graph’s settings, Use Graph Settings

displaying a line and a real bullet as in the Boolean

False

useGraphSettings

graph itself. Set this property to true if you want to enable this feature. Specifies if each of legend entry should be

Equal Widths

Boolean

True

equal to the widest entry. Won't look good if

equalWidths

legend has more than one line. The text which will be displayed in the legend. Label Text

String

[[title]]

Tag [[title]] will be replaced with the title of the

labelText

graph. If width of the label is bigger than label Width, Label Width

Number

labelWidth

it will be wrapped. Maximum number of columns in the legend. If

Max Columns

Legend's position is set to 'right' or 'left', max

Number

maxColumns

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 / Period Value Text

open / close / high / low) and the value of the String

periodValueText

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.

Reversed Order

Specifies whether legend entries should be Boolean

True

reversedOrder

placed in reversed order. When you roll-over the legend entry, all other

Roll-over Graph Alpha

100%

graphs can reduce their opacity, so that the

rollOverGraphAlpha

graph you rolled-over would be distinguished.

104 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ This style specifies the opacity of the graphs. You can use this property to turn all the legend Show Entries

Boolean

True

showEntries

entries off. Whether showing/hiding of graphs by clicking on the legend marker is enabled or not. In case

Switchable

Boolean

True

switchable

legend is used with ChartsPLUS 2, this is set to false automatically. Legend switch type (in case the legend is

Switch Type

String

X

switchType

switchable). Possible values are 'x' and 'v'. If true, clicking on the text will show/hide

Text Click Enabled

balloon of the graph. Otherwise it will Boolean

False

textClickEnabled

show/hide graph/slice, if switchable is set to true. Alignment of the value text. Possible values are

Value Align

String

Right

Value Width

Number

50

TYPE

DEFAULT

valueAlign

'left' and 'right'. Width of the value text.

valueWidth

APPEARANCE

PROPERTY

DESCRIPTION Opacity of legend's background. Value range is

Background Alpha

100%

API

backgroundAlpha

0-1 Background color. You should set background

Background Color

Alpha to >0 value in order background to be Color

Border Alpha

#FFFFFF

100%

Opacity of chart's border. Value range is 0 - 1. Color of legend's border. You should set border

Border Color

Color

#000000

Text Color

Color

#000000

Font Size

Number

11

Horizontal Gap

Number

0

backgroundColor

visible.

borderAlpha borderColor

Alpha >0 in order border to be visible. Text color. Font size. Horizontal space between legend item and

fontSize horizontalGap

left/right border. Vertical space between legend items also

Vertical Gap

Number

10

between legend border and first and last legend

verticalGap

row. Roll-over Color

Color

#CC0000

Legend item text color on roll-over.

rollOverColor

105 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

Switch Color

Color

#FFFFFF

TYPE

DEFAULT

Legend switch color.

switchColor

POSITIONING

PROPERTY

DESCRIPTION Alignment of legend entries. Possible values

Align

String

Left

API

align

are: 'left', 'center', 'right'. Used if chart is Serial or XY. In case true,

Auto Margins

Boolean

True

margins of the legend are adjusted and made

autoMargins

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 Position

String

Bottom

properties too. (This setting is ignored in Stock

position

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

Number

top

can set distance from top of the chart, in pixels. In case legend position is set to 'absolute', you

Bottom

can set distance from bottom of the chart, in

Number

bottom

pixels. In case legend position is set to 'absolute', you Left

can set distance from left side of the chart, in

Number

left

pixels. In case legend position is set to 'absolute', you Right

can set distance from right side of the chart, in

Number

right

pixels. Margin Top

Number

0

Margin Bottom

Number

0

Top margin. Bottom margin.

marginTop marginBottom

Left margin. This property will be ignored if Margin Left

Number

20

chart is Serial or XY and auto Margins property

marginLeft

of the legend is true (default). Right margin. This property will be ignored if Margin Right

Number

20

chart is Serial or XY and auto Margins property

marginRight

of the legend is true (default).

106 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Horizontal space between legend items, in Spacing

Number

Width

Number

10

spacing

pixels. Width of a legend, when position is set to

width

absolute.

MARKERS

PROPERTY

TYPE

DEFAULT

DESCRIPTION

API

Shape of the legend marker (key). Possible values are: square, circle, diamond, triangle Up, Marker Type

String

Square

markerType

triangle Down, triangle Left, triangle Down, bubble, line, none.

Marker Border Alpha Marker Border Color

100%

Marker border opacity. Marker border color. If not set, will use the

Color

#FFFFFF

markerBorderAlpha markerBorderColor

same color as marker. Thickness of the legend border. The default

Marker Border Thickness

value (0) means the line will be a 'hairline' (1 Number

1

px). In case marker type is line, this style will be

markerBorderThick ness

used for line thickness. The color of the disabled marker (when the

Marker Disabled Color

Color

#AAB3B3

Marker Label Gap

Number

5

Marker Size

Number

16

Use Marker Color for Labels

Boolean

False

Use Marker Color for Values

Boolean

False

graph is hidden). Space between legend marker and legend text,

markerDisabledCol or markerLabelGap

in pixels. Size of the legend marker (key). Labels will use marker color if you set this to true. Specifies if legend values should be use same color as corresponding markers.

markerSize useMarkerColorFor Labels useMarkerColorFor 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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 PROPERTY

TYPE

On Graph Click

ScriptText

DEFAULT

DESCRIPTION

API

Enables to set the script that will be executed on clicking the Graph of

selectOnGraphClick

ChartsPLUS™ 2.0 component. Fires when the chart is zoomed or

On Zoom Scroll

ScriptText

On Hierarchy Expand

ScriptText

On Hierarchy Collapse

ScriptText

scrolled with either the Chart Cursor or

zoomScroll

Chart Scrollbar. Executes the script when a Hierarchy

onHExpand

Node is expanded. Executes the script when a Hierarchy

onHCollapse

Node is collapsed.

Filtering Data on Charts Using Events in ChartsPLUS 2.0

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. 1.

REGION_SALES.setFilter("Country", CHARTSPLUS2_1.getCategoryValueClicked());

109 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ 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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

On Clicking Graph on USA

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 6.

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

PROPERTY

TYPE

DEFAULT

DESCRIPTION Select the Check box to rotate the chart as

Rotate

Boolean

Text

String

False

API

rotate

Bar Chart Enable to set the Title of the Axis Enables to select the graph from the

Graph Type

possible values: Column, Line, Area, and

graphType

Smoothed Line.

112 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________ Whether the graphs should be stacked or Stackable

Boolean

False

Secondary Axis

Boolean

False

stackable

not. Enables to show Secondary axis in graph. Click on Apply to enable the applied

Apply

Changes.

Stacked Column Line Combo with dual axes

113 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

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

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

This enables to import the favorites that are selected in to the ChartsPLUS 2.0

119 | P a g e

Archius ChartsPLUS 2.0 ____________________________________________________________________________________________________________

120 | P a g e