tcs digital software & solutions group...the framework utilizes d3.js (a javascript library for...

Tata Consultancy Services Visualization Framework User Guide v1.1

TCS Digital Software & Solutions Group

Connected Intelligence Platform

Visualization Framework v1.1

Tata Consultancy Services Ltd.

TCS House, Raveline Street, Fort, Mumbai - 400 001, India

Phone: +91-22-6778 9999 Fax: +91-22-6778 9000

E-mail: [email protected]

Jul 2019

mailto:[email protected]


TCS Confidential ii

Copyright Notice

This publication is Copyright © 2019 Tata Consultancy Services Limited and its licensors. All rights reserved.

Refer to the “Trademark Notices” section at the end of this publication for specific information about trademarks used in this publication.


TCS Confidential iii

Document Release Note

Project: TCS Connected Intelligence Platform

Document Details

Name Version Number Description

Visualization Framework User Guide

1.1 This document provides information about features, functionalities, and use cases to help end users become familiar with the Visualization Framework.

The documents or revised pages are subject to document control.

Keep them up-to-date using the release notices from the distributor of the document.

These are confidential documents. Unauthorized access or copying is prohibited.


TCS Confidential iv

Contents

1. Visualization Framework ................................................................................................................... 1

1.1. An Overview ............................................................................................................................. 1

1.2. Capabilities .............................................................................................................................. 1

1.3. System Requirements .............................................................................................................. 1

1.4. Browser Compatibility ............................................................................................................... 1

1.5. Data Format ............................................................................................................................. 1

1.6. Installation ................................................................................................................................ 2

1.7. Getting Started ......................................................................................................................... 2

2. Integrating Visualization Framework ................................................................................................. 4

2.1. Core Reporting API .................................................................................................................. 4

2.2. Renderer API ........................................................................................................................... 5

3. Standard Charts ............................................................................................................................... 7

3.1. Understanding Charts............................................................................................................... 7

3.2. Pre-built renderers.................................................................................................................... 8

3.3. Line chart ................................................................................................................................. 9

3.4. Bar chart ................................................................................................................................ 10

3.5. Pie chart ................................................................................................................................. 11

3.6. Bar/Line Combination Chart ................................................................................................... 13

3.7. Bubble Chart .......................................................................................................................... 13

3.8. Supported Data Sets .............................................................................................................. 14

3.9. Renderer Options ................................................................................................................... 16

3.9.1. Chart Area ...................................................................................................................... 16

3.9.2. Axis Styling ..................................................................................................................... 17

3.9.3. Grid Styling ..................................................................................................................... 18

3.9.4. Chart Colors ................................................................................................................... 19

3.9.5. Scaling and Precision ..................................................................................................... 20

3.9.6. Number of Labels (Ticks) ................................................................................................ 20

3.9.7. Zoom .............................................................................................................................. 20


TCS Confidential v

3.9.8. Legends ......................................................................................................................... 20

3.9.9. Tooltips .......................................................................................................................... 21

3.9.10. Bar Chart Customizations ............................................................................................... 23

3.9.11. Line Chart Customizations .............................................................................................. 24

3.9.12. Pie Chart Customizations ............................................................................................... 24

3.9.13. Bar/Line Combination Chart Customizations ................................................................... 26

3.9.14. Scatterplot Customizations ............................................................................................. 27

3.9.15. Bubble customizations .................................................................................................... 28

3.10. Framework Integration............................................................................................................ 28

3.10.1. Example to Render Bar Chart ......................................................................................... 29

3.10.2. Example to render Scatterplot Chart ............................................................................... 30

4. Advanced Charts ............................................................................................................................ 32

4.1. Treemap ................................................................................................................................ 32

4.1.1. Data Format ................................................................................................................... 33

4.1.2. Options ........................................................................................................................... 34

4.1.3. Example ......................................................................................................................... 36

4.2. Line with Data Driven Markers ................................................................................................ 37

4.2.1. Data Format ................................................................................................................... 37

4.2.2. Options ........................................................................................................................... 38

4.2.3. Example ......................................................................................................................... 39

4.3. Line and Bar Chart with Control Limits .................................................................................... 40

4.3.1. Data Format ................................................................................................................... 41

4.3.2. Options ........................................................................................................................... 41

4.3.3. Example ......................................................................................................................... 42

4.4. Line chart with brush control ................................................................................................... 44

4.4.1. Data Format ................................................................................................................... 45

4.4.2. Options ........................................................................................................................... 46

4.4.3. Example ......................................................................................................................... 47

4.5. Bullet chart ............................................................................................................................. 48

4.5.1. Data Format ................................................................................................................... 49


TCS Confidential vi

4.5.2. Options ........................................................................................................................... 49

4.5.3. Example ......................................................................................................................... 50

5. CSS Classes .................................................................................................................................. 52

5.1. Standard Charts ..................................................................................................................... 52

5.2. Advanced Charts .................................................................................................................... 53

6. Map Renderer ................................................................................................................................ 55

6.1. Overview ................................................................................................................................ 56

6.2. Map Initialization .................................................................................................................... 57

6.3. Render Layer ......................................................................................................................... 57

6.4. Render Point Layer ................................................................................................................ 59

6.5. Remove Layer ........................................................................................................................ 60

6.6. Render Rectangle Overlay ..................................................................................................... 61

6.7. Remove Rectangle Overlay .................................................................................................... 61

6.8. Add Icons ............................................................................................................................... 61

6.9. Get Map Reference ................................................................................................................ 62

6.10. Set Zoom ............................................................................................................................... 62

6.11. Set Custom Zoom Handler ..................................................................................................... 62

6.12. Set Map View ......................................................................................................................... 62

6.13. Set Map Center ...................................................................................................................... 63

7. Custom Renderers ......................................................................................................................... 64

7.1. Sample Custom Renderer ...................................................................................................... 64

Appendix A : Configuration (optional - required for direct access restful APIs) .................................. 67

Total number of pages in this document (including cover page): 78


TCS Confidential vii

List of Figures Figure 1: Line Chart on Web page ........................................................................................................... 3 Figure 2: Framework Components ........................................................................................................... 4 Figure 3: Chart Details ............................................................................................................................. 7 Figure 4: Line Chart - Regular Line .......................................................................................................... 9 Figure 5: Line Chart - Curved Line ........................................................................................................... 9 Figure 6: Normal Bar Chart .................................................................................................................... 10 Figure 7: Clustered Bar Chart ................................................................................................................ 10 Figure 8: Stacked Bar Chart................................................................................................................... 11 Figure 9: Horizontal Stacked Bar Chart .................................................................................................. 11 Figure 10: Normal Pie Chart .................................................................................................................. 12 Figure 11: Pie Chart with callouts ........................................................................................................... 12 Figure 12: Donut Chart .......................................................................................................................... 12 Figure 13 : Bar/ Line Combination Chart ................................................................................................ 13 Figure 16: Bubble Chart with Dimensions - Price, Count and Profit ........................................................ 14 Figure 17: Bubble Chart with Dimensions - Product, Role and Count ..................................................... 14 Figure 18: Rendering a Bar Chart .......................................................................................................... 29 Figure 19: Rendering a Scatterplot Chart ............................................................................................... 30 Figure 23: Treemap with no Children ..................................................................................................... 33 Figure 24: Treemap with some Nodes ................................................................................................... 33 Figure 25: Line Chart with Data Driven Markers ..................................................................................... 37 Figure 26: Line Chart with Control Limits ................................................................................................ 40 Figure 27: Bar Chart with Control Limits ................................................................................................. 40 Figure 28: Line chart with brush control – Time View ............................................................................. 45 Figure 29: Line Chart with Brush Control – Time Scale .......................................................................... 45 Figure 30: Bullet Chart ........................................................................................................................... 49 Figure 31: Map Renderer - Highlighted Required Areas ......................................................................... 55 Figure 32: Map Renderer - Customizations ............................................................................................ 55 Figure 33: Custom Renderer to Draw a Circle ........................................................................................ 64


TCS Confidential viii

List of Tables Table 1: Core Reporting API - Supporting Parameters ............................................................................. 5 Table 2: Renderer API - Supporting Parameters ...................................................................................... 5 Table 3: Pre-built Renderers .................................................................................................................... 8 Table 4 : Height and Width Adjustment .................................................................................................. 16 Table 5: Top and Bottom Adjustment ..................................................................................................... 16 Table 6: Common Axes Customizations................................................................................................. 17 Table 7: X-axis Customizations .............................................................................................................. 18 Table 8: Y-axis Customizations (Applicable Only to Bubble Chart) ......................................................... 18 Table 9: Grid Styling .............................................................................................................................. 18 Table 10: Values Used for Type of Chart ............................................................................................... 19 Table 11: Legends Attribute Name and Description................................................................................ 20 Table 12: Default Tooltip Customizations ............................................................................................... 21 Table 13: Advanced Tooltip Customizations........................................................................................... 22 Table 15: Bar Chart Customizations....................................................................................................... 23 Table 16: Bar Chart Label Customizations ............................................................................................. 23 Table 17: Line Chart Customizations ..................................................................................................... 24 Table 18: Line Chart Marker Customizations .......................................................................................... 24 Table 19: Pie Chart Customizations ....................................................................................................... 24 Table 20: Pie Chart Label Customizations ............................................................................................. 25 Table 21: Scatterplot Customizations ..................................................................................................... 27 Table 22: Bubble Customizations ........................................................................................................... 28 Table 23: Framework Integration Customization .................................................................................... 28 Table 24: Advanced Chart Customization .............................................................................................. 32 Table 31: Treemap Chart Customization ................................................................................................ 34 Table 32: Treemap Parameters Customization ...................................................................................... 36 Table 33: Line Chart with Data Driven Markers Customization ............................................................... 38 Table 34: Line Chart with Data Driven Markers Framework Parameters ................................................. 39 Table 35: Line/Bar Control Chart Customizations ................................................................................... 41 Table 36: Line/Bar Control Chart Framework Parameters ...................................................................... 42 Table 37: Line Chart with Data Driven Markers ...................................................................................... 46 Table 38: Line Chart - Framework Parameters ....................................................................................... 47 Table 39: Bullet Chart with Data Driven Markers Customization ............................................................. 49 Table 40: Bullet Chart Framework Parameters ....................................................................................... 50 Table 41: CSS Applicable for Standard Charts ....................................................................................... 52 Table 42: CSS Applicable for Specific Standard Charts .......................................................................... 52 Table 43: CSS Applicable for Advanced Charts ..................................................................................... 53 Table 44: Map Renderer Invocation through JS Files ............................................................................. 56 Table 45: Supported Customizations for Map Initialization...................................................................... 57 Table 46: Parameters for Render Layer ................................................................................................. 58 Table 47: Render Layer Customizations ................................................................................................ 58 Table 48: Parameters of Render Point Layer ......................................................................................... 59 Table 49: Render Point Layer Customizations ....................................................................................... 59 Table 50: Customizing the Icon .............................................................................................................. 61 Table 51: Custom Renderer Customizations .......................................................................................... 65 Table 52: Custom Renderer Framework Parameters ............................................................................. 66


TCS Confidential ix

List of Abbreviations

Abbreviation Expanded Form

API Application programming interface

CSS Cascading Style Sheets

DB Database

DOM Document Object Model

HTML Hypertext Markup Language

JS Javascript

JSON JavaScript Object Notation

SVG Scalable Vector Graphics

URL Uniform Resource Locator


TCS Confidential 1

1. Visualization Framework

1.1. An Overview

The Visualization framework is a client side library that helps to build charts and dashboards with standard and/or custom, rich and interactive visualizations. The subsequent sections describe the steps to integrate the framework into a web application. It also describes the available set of visualizations (renderers) and options to customize the visualizations based on individual application requirements.

1.2. Capabilities

The visualization framework provides a simple interface with multiple configurations to enable users to create reports and dashboards across the entire application.

The framework:

is loosely coupled with visualization libraries such as D3.js

includes set of renderers that are externalized and can be included on a need basis

provides configurable attributes that include Caching, Sorting and Pagination

supports basic responsive design

support for large data volume with lazy loading

is extensible to support custom visualizations

1.3. System Requirements

The framework is a client side JavaScript (JS) library that provides interfaces to render visualizations using HTML, CSS and SVG. The framework creates SVG based data visualizations. Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The framework utilizes D3.js (a JavaScript library for manipulating documents based on data) for visualizations and jQuery Sparkline (a jQuery based plugin) for inline/micro charts. Integration involves inclusion of one or more JS files as well CSS files. As a result framework can be run on any server that supports HTML or even locally from the file system.

1.4. Browser Compatibility

The visualization framework works on modern browsers that include:

Chrome 28.x & above

Firefox 24.x & above

1.5. Data Format

The framework expects data as well as options in JSON format. The framework processes the options and data and thereafter invokes the appropriate renderers. A simple example of data in JSON format is represented below:

https://en.wikipedia.org/wiki/XML

https://en.wikipedia.org/wiki/Vector_image_format


TCS Confidential 2

{ ‘dataOrder’:[‘Year’,’LA’],

‘data’:[ {"Year":2005,"LA":40},

{"Year":2006,"LA":50},

{"Year":2007,"LA":40}

]

}

1.6. Installation

Download the visualization framework package and install the JS and CSS files in your own domain. The framework is then ready to be used in your application.

1.7. Getting Started

To integrate the visualization framework into any custom application involves a set of steps. For example to render a line chart, do the following:

1. Create a div with an id on your webpage.

<div id="Container"></div>

2. Include appropriate JS files for framework:

<script type='text/javascript' src='js/jquery-1.11.2.min.js'></script>

<script type='text/javascript' src='js/custom_report_lib.js'></script>

3. Include JS and CSS files (with your own styles) for renderer:

<link rel="stylesheet" href="css/Theme.css">

<script type='text/javascript' src='js/d3.min.js'></script>

<script type='text/javascript' src='js/Chart.common.js'></script>

<script type='text/javascript' src='js/Chart.interactions.js'></script>

<script type='text/javascript' src='js/Chart.line.js'></script>

4. Retrieve the data in JSON format. You can assume that this is set to chartData variable.

var chartData = { 'dataOrder': ["Quarter" , "Region 1","Region 2","Region 3","Region 4"],

'data': [ {'Quarter':'Q1','Region 1' : 10,'Region 2' :35,'Region 3' : 75,'Region 4' :100},

{'Quarter':'Q2','Region 1' : 30,'Region 2' :65,'Region 3' : 105,'Region 4' :145},


{'Quarter':'Q4','Region 1' : 25,'Region 2' :45,'Region 3' : 100,'Region 4' : 160}

]

};

5. Set the options to render line chart.

var chartOptions = { 'height':400, 'width':500, 'zoom':false, 'type':'spline',

'decimal':2, 'legend': {'align':'horizontalBottom', 'position':'center'},

'grid':{'lineStyle':'dotted','gridOnAxis':true},

'markers':{shape:['circle','triangle-up','square','diamond','cross','triangle-down']}

};


TCS Confidential 3

6. Initialize the visualization framework and configure parameters that include type of chart, render data, render options and title.

var lineChart = $('#Container').customReport({ viewType: 'default', chartType: 'line',

reportData: data, options: options,

reportTitle : {'name':'Line Chart',

'class': 'reportTitle'

},

prepareD3ChartData:false

});

7. Invoke the framework to render the line chart.

lineChart.data('customReport').renderReport();

The following chart is displayed on your web page.

Figure 1: Line Chart on Web page


TCS Confidential 4

2. Integrating Visualization Framework

The Visualization Framework resides in the client and utilizes the data retrieved from the data services on the server to represent it in one or more data visualizations. The framework expects Data as well as configuration parameters that will determine how the data is consumed and passed to external renderers. Sections 8 to 10 of the document explain the integration for standard and advanced charts. Section 11 explains the integration with map renderer to view geographical maps. The framework comprises two main components as illustrated below.

a. Core Reporting API b. Renderer API

The Core API invokes the appropriate renderers with data and renderer options. Renderers are typically standard charts such as bar, line, pie as well as advanced charts such as bubble, scatterplot. A renderer can also be custom visualization that is specific to the application using the framework. Additionally renderer applies CSS styles to match the required look and feel.

2.1. Core Reporting API

The Core Reporting API processes the data and configuration parameters provided to render visualizations as per application requirements. It requires the following JS files:

custom_report_lib.js Core Reporting API

jquery-1.11.2.min.js JQuery JS library

Initialize the framework and configure required parameters.

var lineChart = $('#Container').customReport(

{ viewType: 'default', chartType: 'line',

reportData: data, options: options,

reportTitle : { 'name':'Line Chart',

'class': 'reportTitle' },

prepareD3ChartData:false

});

Renderer API

Core Reporting

API Standard Charts

Advanced Charts

Custom Visualizations

Data

Options

Styles

The div ID for DOM

Configurable Parameters

Figure 2: Framework Components


TCS Confidential 5

Core Reporting API supports the following parameters:

Table 1: Core Reporting API - Supporting Parameters

Parameter Type Description

reportData Mandatory Report Data in JSON format

options Mandatory Options to configure the renderers

viewType Mandatory Supports 2 values ‘default’ and ‘custom’. When set to ‘default’, is used in conjunction with chartType to invoke appropriate renderer

chartType Mandatory Set to the renderer type to be invoked. For example, ‘line’, ‘bar’, ‘custom’ and so on. The renderer sections list the appropriate value to be set for viewType and chartType.

reportTitle Optional Set visualization tile. Consists of 2 keys: Name – Title to be set, class – CSS style class that is applied to title

renderer Optional Renderer function that would be called when viewType=’default’ and chartType=’custom’

2.2. Renderer API

The core reporting API invokes renderer API to render the appropriate visualization. Renderers are external to the core reporting framework and hence can be built using any third party visualization library. The framework comprises several pre-built renderers that support both standard and advanced charts. The pre-built renderers are listed in the table below and are explained in the subsequent sections of the document.

Following table provides information about the supporting parameters of Renderer API.

Table 2: Renderer API - Supporting Parameters

Type Description

Bar chart Sunburst

Line chart Treemap

Bar/Line combination chart Line with data driven markers

Pie/Donut chart Line & Bar chart with control limits

Scatterplot Line chart with brush control

Bubble chart Bullet chart

Radar/Spider chart

Gauge/Dial chart

The reporting API accepts the following:

a. Data set


TCS Confidential 6

The JSON data set in a pre-defined format.

b. Renderer options Different options can be provided to customize the visualizations.

c. CSS style class Certain set of styles can be set via CSS style class.

The data set and renderer options for each of the pre-built renderers are explained in Section 8 (Standard Charts) and Section 9 (Advanced Charts). The CSS style classes exposed by each pre-built set of renders are listed in Section 10 (CSS Classes). The map renderer and its API are explained in Section 11 (Map Renderer).

Additionally, the visualization framework also supports integration with custom renderers that need to follow a set of guidelines as explained in Section 12 (Custom Renderers).


TCS Confidential 7

3. Standard Charts

3.1. Understanding Charts

A chart consists of different parts as explained in figure below.

Figure 3: Chart Details

Series

A series is a set of data across a column. The line chart comprises four data sets, one for each region.

Axes

Most charts have x and y axes to represent the data. Some charts such as pie chart do not have any axes. Also charts such as bar/line combination chart have multiple y axes to represent bar and line respectively.

Axis Label (Ticks)

Axes values are indicated with labels that are spaced as per the chart height/width. In most cases, the Y axis labels (also called ticks) are calculated from the range of the data provided.

Axes Legend

Tooltip

Series

Axis Title

Axis Label

Grid Lines


TCS Confidential 8

Axis Title

Axes can have a title to indicate their value.

Grid Lines

Grid lines provide a background to the chart and make it easier to analyze the data points. Most charts provide horizontal grid lines however, some charts can optionally render vertical grid lines.

Legend

The legend shows the series data in the chart (Region in the line chart example). The legends can be interactive allowing enable/disable of legends from the chart.

Tooltip

When you hover over the data point on the chart, tooltips are displayed with the description of the value on the chart.

3.2. Pre-built renderers

Pre-built renderers for standard charts are: Bar, Line, Pie, Bar/Line combination, Waterfall, Scatterplot and Bubble chart. To invoke the renderers from the framework, you need to include a set of common JS files as well as chart specific JS files as listed below:

Following table provides information about the pre-built renderers.

Table 3: Pre-built Renderers

Type File Name Description

Common JS files

d3.min.js Visualization library required for pre-built renderers

Chart.common.js Handles common chart features such as axis styles, grid display and legend positioning

Chart.interactions.js Handles interactions such as zoom, tooltip, interactive legends

Line chart Chart.line.js Line chart renderer

Bar chart Chart.bar.js Normal, Cluster and Stacked Bar chart renderer

Pie chart Chart.pie.js Pie or Donut chart renderer

Bar/Line combination chart

Chart.combination.js Bar/Line combination chart renderer

Scatterplot Chart.scatterplot.js Scatterplot chart

Bubble Chart.bubble.js Bubble chart


TCS Confidential 9

3.3. Line chart

A line chart represents single or series data across X and Y axes. Line can be represented as regular line or curved (spline).

Figure 4: Line Chart - Regular Line

Figure 5: Line Chart - Curved Line

Line

Spline


TCS Confidential 10

3.4. Bar chart

A bar chart can be normal bar for single data set. Series data can be rendered as clustered bar or stacked bar chart to show groups of data. The chart can be rendered vertically or horizontally.

Figure 6: Normal Bar Chart

Figure 7: Clustered Bar Chart

Normal

Clustered


TCS Confidential 11

Figure 8: Stacked Bar Chart

Figure 9: Horizontal Stacked Bar Chart

3.5. Pie chart

A pie chart is a circular chart with slices whose sizes represent the data they represent. A pie chart can also be represented as donut (with inner circle) chart. The labels can be displayed inside the pie or as callouts.

Stacked

Horizontal Stacked


TCS Confidential 12

Figure 10: Normal Pie Chart

Figure 11: Pie Chart with callouts

Figure 12: Donut Chart

Normal Pie

Pie with callouts

Donut


TCS Confidential 13

3.6. Bar/Line Combination Chart

A bar/line combination chart has two sets of data across the same X axis. One data set represents the bar chart while the other set represents the line chart. This chart has two Y axes – left y axis for bar data set and the right y axis for line data set. The bar chart can be normal/clustered/stacked.

Figure 13 : Bar/ Line Combination Chart

3.7. Bubble Chart

A bubble chart is a variation of scatter chart where the circles are replaced with bubbles. This chart is used when data is three dimensional. Two of the dimensions are shown on the X and Y axes respectively while the third dimension is shown as the size of the bubble.

Y axis for Bar Y axis for Line


TCS Confidential 14

Figure 14: Bubble Chart with Dimensions - Price, Count and Profit

Figure 15: Bubble Chart with Dimensions - Product, Role and Count

3.8. Supported Data Sets

Data set needs to be passed in JSON format to framework parameter ‘reportData’. The data formats differ for each type of data set as listed in table below.

Bubble chart with dimensions - Price,

Count and Profit (bubble size)

Bubble chart with dimensions - Product,

Role and Count (bubble size)


TCS Confidential 15

a. Single Data Set

Single Data set represents a range of values for a particular measure. For example, customer count across all Regions. For most charts, there is no need of Legend to be displayed. Pie chart is an exception where legend is displayed due to the absence of axes.

{"dataOrder":["region", "count"],

"data":[ {"count":"252.00","region":"Region 1"},

{"count":"33.00","region":"Region 2"},


{"count":"11.00","region":"Region 4"}

]

}

‘dataOrder’ is an optional key that indicates the key in ‘data’ that represents X and Y axes values. In single data set, if dataOrder is specified, the first key ‘region’ represents the X axis and the second key ‘count’ represents Y axis. If dataOrder is not specified, the keys for X and Y axes are selected from the first entry in ‘data’.

‘data’ is mandatory and contains the values to be rendered on the charts.

b. Series Data Set

Series Data set represents a set of values for a particular measure. For example, customer count for each Quarter across all Regions. The data sets are represented in different colors/styles and identified using Legends.

{ 'dataOrder': ["Quarter" , "Region 1","Region 2","Region 3","Region 4"],

'data': [ {'Quarter':'Q1','Region 1' : 10,'Region 2' :35,'Region 3' : 75,'Region 4' :100},



{'Quarter':'Q4','Region 1' : 25,'Region 2' :45,'Region 3' : 100,'Region 4' : 160}

]

};

c. Grouped Data Set

Grouped Data set represents a set of values for one or more measures across multiple groups. This is typically used for Scatterplot and Bubble charts.

For example, Scatterplot that represents Ratio of Height vs. Weight across groups of Males and Females.

{ 'dataOrder': ["height" , "weight", "group"],

'data': [ { 'height' : 154, 'weight' : 65, 'group':'Male'},

{ 'height' : 164, 'weight' : 75, 'group':'Male'},

{ 'height' : 159, 'weight' : 76, 'group':'Male'},

{ 'height' : 145, 'weight' : 64, 'group':'Female'}, S

{ 'height' : 160, 'weight' : 69, 'group':'Female'},

{ 'height' : 156, 'weight' : 71, 'group':'Female'}

]

};

For example, Bubble chart that represents Price vs. Count vs. Profit across multiple Product groups.


TCS Confidential 16

{ 'dataOrder': ["price","count",'group','profit'],

'data':[ {'price' : 100, 'count' : 224, 'group':'Product 1', 'profit':30},

{'price' : 20, 'count' : 256, 'group':'Product 2', 'profit':55},

{'price' : 40, 'count' : 333, 'group':'Product 2','profit':60},

{'price' : 140, 'count' : 220, 'group':'Product 3','profit':42} ,

{'price' : 30, 'count' : 235, 'group':'Product 3', 'profit':22}

]

};

d. Multiple Data Set

This data set is used for Bar/Line combination chart where different sets of data are used to represent bar and line on the chart. The example below lists two Single Data Sets - one for Line and the other for Bar.

{'line': { 'dataOrder':['Cell Site', 'Failure Count'],

'data': [{'Cell Site':'Cell10','Failure Count':600},

{'Cell Site':'Cell20','Failure Count':550},

{'Cell Site':'Cell30','Failure Count':350} ]},

'bar': { 'dataOrder':['Cell Site', 'Usage Count'],

'data': [{'Cell Site':'Cell10','Usage Count':200},

{'Cell Site':'Cell20','Usage Count':1167},

{'Cell Site':'Cell30','Usage Count':4150} ]}

};

3.9. Renderer Options

You can customize the chart through different options for styles and interactions. The customizations give better flexibility and control on rendering the chart.

3.9.1. Chart Area

Adjust the area/plot to render the chart by setting the height & width.

Table 4 : Height and Width Adjustment

Attribute Name Description

height Height of chart area (in pixels)

width Width of chart area (in pixels)

Additionally margins can be set to adjust the chart area. Default margins are applied if the options are not provided.

Table 5: Top and Bottom Adjustment


top top margin (in pixel)

bottom bottom margin (in pixel)


TCS Confidential 17


left left margin (in pixel)

right right margin (in pixel)

Examples:

a. Height/Width

var options = { 'width': 400, 'height': 350 };

b. Margin styles

var options = { 'marginStyles': { 'top':20, 'bottom':30, 'left':50, 'right':20 } };

3.9.2. Axis Styling

Set the appropriate JSON values in the options to customize both X and Y axes.

Common Axes Customizations

Table 6: Common Axes Customizations


color Color of the axis

visibility Enable or disable axis (true/false)

titleVisibility Visibility of chart axis title (true/false)

titleName Axis title name

titleColor Axis title color

titleFontSize Axis title font size (in pixel)

titleFontFamily Axis title font family

titleFontWeight Axis title font weight

labelVisibility Enable or disable axis labels (true/false)

labelColor Axis label color

labelRotation Axis label rotation angle (in degrees). Minimum rotation angle accepted is 0 and maximum is 360

labelFontSize Axis label font size (in pixels)

labelFontFamily Axis label font family

labelFontWeight Axis label font weight


TCS Confidential 18

X-axis Customizations Table 7: X-axis Customizations


position Position of X-axis. For horizontal bar chart, accepted values: top/bottom. For bubble/scatterplot, accepted values: top/bottom/both

labelWrap Simple word wrap for long X-axis labels (true/false)

labelDisplaySize Trim large labels to the size specified. Labels that are trimmed are suffixed with ellipsis and the full label shows up on mouse hover.

Y-axis Customizations (applicable only to bubble chart)

Table 8: Y-axis Customizations (Applicable Only to Bubble Chart)


labelWrap Simple word wrap for long Y-axis labels (true/false)

labelDisplaySize Trim large labels to the size specified. Labels that are trimmed are suffixed with ellipsis and the full label shows up on mouse hover.

Examples:

a. X-axis options

var options = { 'xAxis': { 'color':'grey', 'visibility':true, 'titleVisibility':true, 'titleName':'Title' } };

b. Y-axis options

var options = { 'xAxis': { 'color':'grey', 'visibility':true, 'titleVisibility':false } };

3.9.3. Grid Styling

Horizontal grid lines are displayed by default to identify the data points on Y axis. For horizontal bar chart (where Y axis is displayed horizontally), vertical grid lines are displayed. Grid lines can also be disabled.

Table 9: Grid Styling


color Color of the grid lines

lineStyle Style of grid lines (dotted/ solid)

width Width of grid lines in pixel

gridPos For scatterplot and bubble chart, horizontal and/or vertical grid lines can be rendered. Possible values for this option are horizontal/vertical/both.


TCS Confidential 19

Examples

a. Disable grid lines

var options = { 'grid':false };

b. Setting grid options

var options = { 'grid': { 'color':'red', 'width':1, 'lineStyle':'dotted' } };

c. Display horizontal and vertical grid lines for scatterplot/bubble chart

var options = { 'grid': { 'gridPos':'both' } };

3.9.4. Chart Colors

All charts use a default set of chart colors. However you can provide different colors to override the default chart colors. This applies to single or series data.

Examples

var options = { 'color': ["#7968D7" , "#FF9C40" , "#5DA858", "blue" ] };

A color JSON object can also be provided when the colors need to be consistent across multiple charts. The color JSON contains values and corresponding color to be used for that key. The table below lists the values used for each type of chart.

Table 10: Values Used for Type of Chart

Data Key Chart Types

X axis Bar, Line, Pie

Group name Scatterplot, Bubble

Examples

Here is sample data for Line chart.






]

}

Sample Color Object where the x-axis values are mapped to appropriate color.

var colorJson = { "Region 1":"#7968D7" , "Region 2":"#FF9C40" ,

"Region 3":"#5DA858", "Region 4":"#D65967" };

Set the option for colorObject as shown below.

var options = { 'colorObject': colorJson };


TCS Confidential 20

3.9.5. Scaling and Precision

You can scale the values for the Y-axis to represent large numeric data. Also, you can set the precision for floating point numbers.

Examples:

var options = { 'scale':10, 'decimal':2 };

3.9.6. Number of Labels (Ticks)

By default, ten labels (ticks) are displayed. However, you can specify the number of ticks in the options to approximately adjust the ticks. For scatterplot and bubble charts, ticks are applied to X-axis if the values are numeric.

Examples:

var options = { 'ticks':5 };

3.9.7. Zoom

Zoom in expands the chart to make the visibility better. By default zoom is enabled and can be disabled if required.

Examples:

a. Disable zoom

var options = { 'ticks':5 };

3.9.8. Legends

Legends enable the user to identify the data series in the chart. Each series is represented with a distinct color. The legends map the color to the respective series. Legends are enabled by default for series data. Legend styles, interactivity and positioning can be customized.

Table 11: Legends Attribute Name and Description


interactive Enable/disable the legend interaction. When enabled, you can

click the colored boxes in the legend to hide or display the

corresponding chart entity. By default interactive legends are

set to false.

align Alignment of legend. Accepted values are vertical (default)/ horizontal/ horizontalBottom.

position Position works in conjunction with align property. When

align=vertical, position can be top (default) / middle / bottom.

When align=horizontal/ horizontalBottom, position can be left

(default) / center / right.

fontSize Font size of the legend text (in pixel)


TCS Confidential 21


fontWeight Font weight of the legend text

fontFamily Font family of the legend text

borderWidth Width of the legend outer box border (in pixel). By default it set to 0.

borderColor Color of the legend outer box border

adjustTxtWidth For large legends that span multiple lines, adjustTxtWidth=true will adjust the length of each legend text to max legend text length. This aligns the legend values across multiple lines. Set to false by default.

labelDisplaySize Trim large legend text to the size specified. Text that is trimmed are suffixed with ellipsis and the full text shows up on mouse hover.

Examples:

a. Set interactive legend and adjust position

var options = { 'legend': { interactive:true, align:"horizontal", position:"middle", fontSize:12, fontFamily:"Arial"

borderWidth:2, borderColor:"black" } };

b. Disable legend

var options = { 'legend': false };

3.9.9. Tooltips

Tooltips are disabled on mouse hover on data point of the chart. Default tooltip for the data point is displayed. However, custom tooltip text is displayed. You can also customize the tooltip styles to suit your requirement.

Table 12: Default Tooltip Customizations


tooltipColor Tooltip text color

bgColor Background color for tooltip text

tooltipFontWeight Tooltip text font weight

tooltipFontSize Tooltip font size (in pixel)

tooltipFontFamily Tooltip font family

tooltipPrefix Prefix tooltip text with given value

tooltipSuffix Suffix tooltip text with given value

measurePrefix Prefix measure value in tooltip text with given value

measureSuffix Suffix measure value in tooltip text with given value


TCS Confidential 22


ignoreXData X-axis value is not displayed

ignoreYData Y-axis value is not displayed

Advanced Tooltip Customizations

For custom tooltips, you can invoke custom JS functions to return HTML text to set the tooltip.

Table 13: Advanced Tooltip Customizations


type Set to ‘function’

argument Set to JS function name to be invoked as mouse hover

of data point

Examples:

a. Set tooltip styles

var options = { 'tooltip': { 'tooltipColor':'black', 'bgColor':'white', 'tooltipPrefix': 'Tooltip: ' } };

b. Disable tooltip

var options = { 'tooltip': false };

c. Invoke custom function to set tooltip text. In the example below, on mouse hover on data point, JS function customTooltip is invoked with tooltip div ID and the data values.

For example, set the data to render a line chart as shown below.






]

}

Tooltip options are set as below:

var options = { 'tooltip': { 'type':'function', 'argument':'cutomTooltip' } };

The div ID for tooltip display is ‘chartTooltip’. On mouse hover, the custom JS function is invoked as:

function customTooltip( divID, data ) { … };

On mouse hover of data point {"count":"33.00","region":"Region 2"}, custom tooltip function is invoked as:

function customTooltip( '#chartTooltip', {"count":"33.00","region":"Region 2"} ) { … };


TCS Confidential 23

3.9.10. Bar Chart Customizations

Customizations specific to bar charts are listed below.

Table 14: Bar Chart Customizations


barWidth Set width of the bar (in pixels). All bars rendered use this bar width

only

orientation Set the chart orientation. By default, the vertical chart is rendered

wherein x-axis is at the bottom. Set the property to ‘horizontal’ to

render the horizontal chart in which the x-axis is on the left.

multiColor For single data set, all bars are rendered using the same color.

However, to render each bar in a different color, set this option to

true.

type Set the type of bar chart. Values are stacked/ clustered (default)

maxBarWidth Set the max bar width (in pixels) to the value mentioned below. The

bar width can be less than or equal to the given value

Examples:

var options = { 'maxBarWidth': 30, 'type':'stacked', 'orientation':'horizontal' };

Bar chart can display the measure values as labels on the bar. By default no labels are displayed on the bar. Labels can be customized with the options listed below:

Table 15: Bar Chart Label Customizations


enabled Enable display of measure value on bar

showLabels Labels can be displayed ‘inside’ or ‘outside’

prefix Prefix labels with given text

suffix Suffix labels with given text

Examples:

var options = { 'labelsOnBar': {'enabled': true, 'showLabels':'outside', 'prefix': '$', suffix': '%' } };


TCS Confidential 24

3.9.11. Line Chart Customizations

Customizations specific to line charts are listed below.

Table 16: Line Chart Customizations


lineWidth Set the line width (in pixels)

type The line chart data points are connected with straight lines.

However, it can be changed to draw a curve through data

points. To render curved lines, set type to ‘spline’

Examples:

var options = { 'lineWidth': 2, 'type': 'spline' };

The data points on line chart are represented by markers. By default, circle markers are rendered. However, markers can be customized as per the options listed below.

Table 17: Line Chart Marker Customizations


shape Shape of the marker - circle (default), triangle-up, triangle-

down, diamond, square

image Path of the custom image to be displayed as marker

size Size of marker/image (in pixel)

color Color of the marker (by default it takes the line color). Color

is not applied to image markers

Examples:

var options = { 'markers': { { 'shape': 'triangle-up', 'size':2 , 'color': 'red' } };

3.9.12. Pie Chart Customizations

Customizations specific to pie charts are listed below.

Table 18: Pie Chart Customizations


type Pie can be rendered in 2 ways – normal pie or donut chart.

If pie has to be rendered as donut then set type to ‘donut’.

zeroValueHandler When all data points are 0, no pie is displayed. In such a


TCS Confidential 25


case, a custom JS function can be invoked. The container

ID / div ID is passed to the function

ignoreZeroNullValues If set to true, ignore data values that are 0 or null

centerLabelKey Sometimes, measure/data is to be displayed at center of

donut chart. For this, set this option to the JSON key

whose value is picked up from data set

Examples:

a. Display pie as donut and ignore 0/null values

var options = { 'type': 'donut', 'ignoreZeroNullValues': true };

b. Center value for donut chart

data = { "dataOrder":["x-axis","count"],

"data":[ {"x-axis":"High Value","count":1053}, {"x-axis":"Medium Value","count":642}, {"x-axis":"Low Value","count":617} ],

"averageVal": 183};

var options = { 'cenerLabelKey': 'averageVal' };

c. Invoke custom JS function when all data values to render pie are 0

var options = { 'zeroValueHandler': 'handleZeroValues' };

function handleZeroValues( containerId ) { $('#'+containerId).html('No data found');

}

Pie chart can display labels. The customizations to display label are listed below.

Table 19: Pie Chart Label Customizations


format By default actual values are displayed as pie labels. However,

to display percentage values, set format to ‘percent’

color To set the color of the label

fontSize To set the font size of the label (in pixel)

fontWeight To set the font weight of the label

fontFamily To set the font family of the label

labelVisibility By default pie labels are visible. To hide the labels set to false

labelRotation Labels inside the pie slices are displayed horizontally. However,

set to true to rotate the labels to match the arcs


TCS Confidential 26


labelSmallArc By default labels are displayed for all pie slices. However, set

labelSmallArc to false to not display labels inside smaller arcs

labelCallout Set this option to true to display labels as callouts (labels

displayed outside the pie)

prefix Prefix given text to label value

suffix Suffix given text to label value

Examples:

a. Hide pie labels

var options = { 'label': { 'labelVisibility': false } };

b. Rotate pie labels to match the pie arc

var options = { 'label': { 'labelRotation': true } };

c. Display labels inside pie. For smaller arcs, display labels as callouts.

var options = { 'label': { 'labelSmallArc': true, 'labelCallout': true } };

d. Display all labels inside pie (irrespective of size of pie slice)

var options = { 'label': { 'labelSmallArc': false, 'labelCallout': false } };

e. Display all labels as callouts (labelRotation if set is ignored)

var options = { 'label': { 'labelSmallArc': false, 'labelCallout': true } };

3.9.13. Bar/Line Combination Chart Customizations

All options that apply to bar and line charts are applicable to bar/line combination chart. However, options that are specific to bar entity of the chart need to specified under ‘bar’ key. Similarly options that are specific to line entity of the chart need to be specified under ‘line’ key.

Examples:

Listed below is an example of options to render bar/line combination chart with horizontal orientation, maxBarWidth set, separate titles for Bar y-axis and Line y-axis.\

var options = { "zoom": false,"ticks":5, 'color':["#56aa1c"], "orientation":"horizontal",

"width": 500,"height": 500, "bar":{"maxBarWidth":30, "yAxis": {"titleVisibility":false, "titleName":"Usage Count

"line":{"yAxis": {"titleVisibility":false, "titleName":"Failure Count"},'color':["#0038a8"]}, "marginStyles": {"bottom": 60}

};


TCS Confidential 27

data = { 'dataOrder': ["x" , "y",'group'],

'data': [ { 'type':'lbl1', 'x' : 10, 'y' : 154 ,'group':'Group A' },

{ 'type':'lbl2', 'x' : 25, 'y' : 56 ,'group':'Group B' },

{ 'type':'lbl3', 'x' : 40, 'y' : 40, 'group':'Group C' }, …

]

};

3.9.14. Scatterplot Customizations

Customizations specific to Scatterplot are listed below.

Table 20: Scatterplot Customizations


size Size of scatterplot symbol can be adjusted

shape Shape of the symbol. By default circle is displayed. Other shape options are square, diamond, triangle-up, triangle-down

controlLine Scatterplot displays a trend line that starts from (0,0) to (maxX, maxY). However, the trend line can be changed to:

horizontal – (0, midY) to (maxX, maxY)

vertical – (midX, 0) to (midX, maxY)

quad – both horizontal and vertical lines are drawn to represent 4 quadrants

dispLabelKey For larger scatterplot symbols, text can be displayed inside the shape. This option contains the data key whose value is displayed inside the scatterplot symbol

borderWidth Border width of the scatterplot symbol to highlight it

borderColor Border color of the scatterplot symbol

fillOpacity Set opacity of symbol in order to display overlapping data points. Opacity should be a value between 0 and 1. By default opacity is set to 1

Examples:

1. Set size and shape for scatterplot symbols with horizontal and vertical control lines

var options = { 'size': 4, 'symbol': 'square', 'controlLine': 'quad' };

2. Display label within scatterplot symbol

var options = { 'dispLabelKey': 'type' };

3. Set border width, color and opacity for scatterplot symbol.

var options = { 'borderWidth': 2, 'borderColor': 'blue', 'fillOpacity':0.5 }


TCS Confidential 28

3.9.15. Bubble customizations

Customizations that are specific to bubble chart are listed below.

Table 21: Bubble Customizations


isNumeric For bubble chart, allows setting of numeric or non-numeric values for both X & Y axes

borderWidth Border width of the scatterplot symbol to highlight it

borderColor Border color of the scatterplot symbol

fillOpacity Set opacity of symbol in order to display overlapping data points

3.10. Framework Integration

To use the standard chart renderers, the framework should be invoked with the container/div ID under which the chart is rendered. Also, following framework options need to be set:

Data Set

Renderer Options

View type

Chart type

Renderer function (optional)

Table 22: Framework Integration Customization

Chart Type Data Format viewType chartType Renderer

Line Single or Series Data

‘default’ ‘line’ -

Bar Single or Series Data

‘default’ ‘bar’ -

Pie Single Data ‘default’ ‘pie’ -

Bar/Line combination

Multiple Data set (each set could be Single or Series)

‘default’ ‘linebar’ -

Scatterplot Grouped Data ‘default’ ‘custom’ ‘charts.drawScatterplot’

Bubble Grouped Data ‘default’ ‘custom’ ‘charts.drawBubble’


TCS Confidential 29

3.10.1. Example to Render Bar Chart

An example of rendering the bar chart is given below.

Figure 16: Rendering a Bar Chart

Here is the sample HTML code that uses the visualization framework to render the chart.

<!DOCTYPE html>

<html> <head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Sample Bar Chart</title>

<link rel="stylesheet" href="css/Theme.css"> <script type='text/javascript' src='common/jquery-1.11.2.min.js'></script>

<script type='text/javascript' src='renderer/custom_report_lib.js'></script> <script type='text/javascript' src='renderer/d3.min.js'></script>

<script type='text/javascript' src='renderer/Chart.common.js'></script> <script type='text/javascript' src='renderer/Chart.interactions.js'></script>

<script type='text/javascript' src='renderer/Chart.bar.js'></script> </head>

<body> <div id="Container"></div>

<script>

// Series Data Set

var data = { 'dataOrder': ["Quarter" , "Region 1","Region 2","Region 3","Region 4"],

'data': [{'Quarter':'Q1','Region 1' : 10,'Region 2' :35,'Region 3' : 75,'Region 4' :100}, {'Quarter':'Q2','Region 1' : 30,'Region 2' :65,'Region 3' : 105,'Region 4' :145},


{'Quarter':'Q4','Region 1' : 25,'Region 2' :45,'Region 3' : 100,'Region 4' : 160} ]

};

// Renderer Options var options = {'height': 400, 'width': 600, 'zoom': false, 'maxBarWidth': 30,

'xAxis': {'titleName': 'Quarter'}, 'yAxis': {'titleName': 'Customer Count'},

'labelsOnBar': {'enabled': true, 'showLabels':'outside', 'prefix': '$'}, 'legend': {'align':'horizontalBottom', 'position':'center'}

};


TCS Confidential 30

// Visualization framework - bar renderer invocation

var chart = $('#Container').customReport({ viewType: 'default',

chartType: 'bar', reportData: data,

options: options, prepareD3ChartData:false

});

chart.data('customReport').renderReport();

</script> </body>

</html>

3.10.2. Example to render Scatterplot Chart

Another example to render scatterplot chart as given below.

Figure 17: Rendering a Scatterplot Chart


<!DOCTYPE html>

<html> <head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Sample Scatterplot Chart</title> <link rel="stylesheet" href="css/Theme.css">

<script type='text/javascript' src='common/jquery-1.11.2.min.js'></script> <script type='text/javascript' src='renderer/custom_report_lib.js'></script>

<script type='text/javascript' src='renderer/d3.min.js'></script> <script type='text/javascript' src='renderer/Chart.common.js'></script>

<script type='text/javascript' src='renderer/Chart.interactions.js'></script> <script type='text/javascript' src='renderer/Chart.scatterplot.js'></script>

</head> <body>

<div id="Container"></div> <script>

// Sample Data var data={

'dataOrder': ["y" , "x",'group'],


TCS Confidential 31

'data': [ { 'x' : 65, 'y' : 154, 'group':'Male'},

{ 'x' : 67, 'y' : 146, 'group':'Male'}, { 'x' : 76, 'y' : 146, 'group':'Male'},

{ 'x' : 39, 'y' : 134, 'group':'Female'}, { 'x' : 45, 'y' : 145, 'group':'Female'},

{ 'x' : 55, 'y' : 151, 'group':'Female'}, { 'x' : 62, 'y' : 160, 'group':'Female'},

] };

// Renderer Options

var options= { 'width':600, 'height':400, 'zoom':true, 'size':5, 'ticks':5, 'marginStyles': {'bottom':60},

'xAxis': { 'titleName':'Height (cm)'}, 'yAxis': { 'titleName':'Weight (kg)'}

};


var chart = $('#Container').customReport({

viewType: 'default',

chartType: 'custom', reportData: data,

options: options, renderer: 'charts.drawScatterplot

});

chart.data('customReport').renderReport();

</script> </body>

</html>


TCS Confidential 32

4. Advanced Charts

Pre-built renderers also include advanced charts – Radar, Gauge/Dial chart, Sunburst, Sparkline charts and Control charts. These charts have their own set of options that can be customized. Each chart is explained in the subsections below.

To invoke the renderer from the framework, the chart specific JS needs to be included along with JS for common visualization library. The JS files are as listed below:

Table 23: Advanced Chart Customization

Type File name Description

Common JS jquery-1.11.2.min.js JQuery library

custom_report_lib.js Visualization framework core reporting JS

d3.min.js Visualization library required for pre-built renderers – Radar/Gauge/Sunburst

d3.tip.v0.6.3.js D3 tooltip library used for following chart:

Line with data driven markers

Bar chart with control limits

Line chart with brush control

Radar radar.js Radar or Spider chart renderer

Gauge/Dial chart gauge.js Gauge or Dial chart renderer

Sunburst sunburstChart.js Sunburst chart renderer

Treemap new.rectengular.tree.chart.js Treemap renderer


control.line.scatterplot.js A line chart with markers whose size is driven by data values

Line chart with control limits

control.multiline.chart.js Line chart with control limits that display threshold values

Bar chart with control limits

control.multibar.chart.js Bar chart with control limits that display threshold values


control.brush.multiline.chart.js Line chart with additional brush control or slider to adjust the time scale

Bullet chart progress.chart.js Bullet chart to render the current data value in comparison to actual and target values

4.1. Treemap

A Treemap is an advanced visualization to represent a data tree or hierarchical data. Each node of the data can have zero or more children but only one parent (except the root of tree that has no parent). The nodes are represented as rectangles that are colored and sized as per the data values.

Here is an example of Treemap with no children.


TCS Confidential 33

Figure 18: Treemap with no Children

Below is an example of Treemap where some nodes (‘zone1’ to ‘zone3’) have children.

Figure 19: Treemap with some Nodes

4.1.1. Data Format

Data where nodes do not have any children (except root)

var data={ "chartConfig":{"Title":"name","Size":"count "}, "data": {"parent": [{"name":"Tree",

"children":[ { "name": "Loan1", "count": 100 }, { "name": "Loan2", "count": 200 },

{ "name": "Loan3", "count": 300 }, { "name": "Loan4", "count": 400 },

{ "name": "Loan5", "count": 500 }, { "name": "Loan6", "count": 500 }

] }]

} };

‘chartConfig’ is a mandatory key that expects 2 options:


TCS Confidential 34

‘Title’ – this indicates the JSON data key that represents title for each node. In above example, ‘name’ is the ‘Title’

‘Size’ – this indicates the JSON data key that determines the size of the rectangle for each node. In above example ‘count is used to draw rectangle

‘data’ is mandatory and has the parent-child hierarchical data to render the treemap chart. Note that child data should be under “children” JSON key. Currently only two hierarchical levels are supported. Additional levels can be displayed on the tree map by using the onclickHandler renderer option.

Below is an example of data with child nodes.

var data={"chartConfig":{"Title":"name","Size":"size","Children":"children"},

"data": {"parent": [{ "name":"Tree", "children":[ { "name": "zone1", "size": 100 },

{ "name": "zone2", "size": 200 }, { "name": "zone3", "size": 300 },

{ "name": "zone4", "size": 400 }, { "name": "zone5", "size": 500 }

]

}],

"children": [{ "name": "zone1", "children": [{ "name": "DMA11", "size": 100 },

{ "name": "DMA12", "size": 200 },

{ "name": "DMA13", "size": 300 }, { "name": "DMA14", "size": 400 },

{ "name": "DMA15", "size": 500 } ]

}, { "name": "zone2",

"children": [{ "name": "DMA21", "size": 10 }, { "name": "DMA22", "size": 20 },

{ "name": "DMA23", "size": 30 }, { "name": "DMA24", "size": 40 }

] },

{ "name": "zone3", "children": [{ "name": "DMA31", "size": 100 },

{ "name": "DMA32", "size": 100 }, { "name": "DMA33", "size": 100 },

{ "name": "DMA34", "size": 100 } ]

}] }

};

4.1.2. Options

Treemap chart supports the following options.

Table 24: Treemap Chart Customization


width Width of chart

height Height of chart

top Top margin

left Left margin


TCS Confidential 35


right Right margin

bottom Bottom margin

rectangleColor Single or array of colors to render each rectangle. If not provided, default set of colors are used

label Option to adjust the rectangle labels (displayed on top of rectangle). It accepts 3 options – ‘dispValue’ to display the measure value, ‘valPrefix’ to prefix text to the lable and ‘valSuffix’ to append suffix text to label.

In the example below, measure value is displayed along with prefix of ‘Leakage’ and suffix of ‘Lt’.

label: {'dispValue':true, 'valPrefix':'Leakage',

'valSuffix':'Lt'}

GrandParentTxt Header text to be displayed on the top of the Treemap (and hence called Grandparent)

For example "GrandParentTxt":”NETWORK”

tooltip Enable or disable tooltip display on mouse hover (default=true)

onclickHandler Provide the JS function name to be invoked on click on the rectangle label header as well on rectangles. The click handler option can be used to display next set of child nodes on the tree map. The JS function invoked is passed following parameters:

isChild – true if child node

isGrandParent – true if it is the Treemap header (grand parent)

objChildTxt – Child text that includes the title and measure

objParentTxt – Parent text that includes title and measure

objGrandParentTxt – Grandparent text value

tooltip Tooltip is disabled by default. To enable set to true. The subsequent options (onmouseoverHandler and onmouseoutHandler) are only invoked if tooltip=true

onmouseoverHandler Provide JS function that is invoked on mouse hover of each rectangle. The mouseover event is passed as parameter to the JS function. This function overrides the default tooltip handler

onmouseoutHandler Provide JS function that is invoked on mouse out of each rectangle. The mouseout event is passed as parameter to the JS function


TCS Confidential 36

Framework parameters that need to be set are:

Table 25: Treemap Parameters Customization

Parameter Name Value

viewType ‘default’

chartType ‘rectengulartreechart’

reportData Data set (JSON)

options Renderer Options (JSON)

4.1.3. Example


<!DOCTYPE html>

<html> head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Sample Treemap Chart</title>



<script type='text/javascript' src='renderer/new.rectengular.tree.chart.js'></script> </head>


<script>

// Hierarchical Data Set var data = { "chartConfig":{"Title":"name","Size":"count"},

"data": {"parent": [{"name":"Tree", "children":[ { "name": "Loan1", "count": 100 },



{ "name": "Loan6", "count": 500 } ]

}] }

};

// Renderer Options

var options = { "top":0, "width" : 900, "height" : 300, "GrandParentTxt":"NETWORK", onclickHandler:nodeClickHandler,

onmouseoverHandler:nodeMouseoverHandler, onmouseoutHandler:nodeMouseoutHandler,

rectangleColor: ["#deebf7","#c6dbef","#9ecae1", "#6baed6","#4292c6","#2171b5","#08519c","#08306b"]

};

// Visualization framework var report = $('#Container’).customReport({

viewType:'default', chartType:'rectengulartreechart',

reportData:data, reportTitle:{'name':'Tree Chart', 'class':'reportTitle' },

options: options


TCS Confidential 37

});

report.data('customReport').renderReport();

// Custom node click handler function function nodeClickHandler( isChild, isGrandParent, objChildTxt,

objParentTxt, objGrandParentTxt ) { …

};

// Custom mouseover and mouseout handlers function mouseoverHandler( event ) {

… };

function mouseoutHandler ( event ) {

… };

</script>

</body> </html>

4.2. Line with Data Driven Markers

This visualization is a special case of Line chart wherein the data markers are sized based on the measure values (similar to size of bubble in a Bubble chart). Each circle can also be rendered in a specific color.

Figure 20: Line Chart with Data Driven Markers

4.2.1. Data Format

var data={"chartConfig":{"x-axis":"timeValue","y-axis":"alrIncident","Radius":"size","circleColor":"color"},


TCS Confidential 38

"data":[ { "timeValue":"JAN", "alrIncident":"8", "color":"ff1a00", "size":"8" }, { "timeValue":"FEB", "alrIncident":"2", "color":"B70030", "size":"11" },

{ "timeValue":"MAR", "alrIncident":"4", "color":"ff1a00", "size":"14" }, { "timeValue":"APR", "alrIncident":"3", "color":"B70030", "size":"8" },

{ "timeValue":"MAY", "alrIncident":"8", "color":"ff1a00", "size":"11" }, { "timeValue":"JUN", "alrIncident":"8", "color":"B70030", "size":"14" }

] };

‘chartConfig’ is a mandatory key that expects the following options:

‘x-axis’ – this indicates the JSON data key that determines the x-Axis value

‘y-axis’ – this indicates the JSON data key that determines the y-Axis value

‘Radius’ – JSON data key that determines the size of the data marker circle. If not provided, default size as provided in renderer options is used

‘circleColor’ – JSON data key that determines the color of the circle. If not provided, default color as provided in renderer options is used

‘data’ is mandatory and contains the actual data values to render the chart.

4.2.2. Options

The line chart with data driven markers supports the following options.

Table 26: Line Chart with Data Driven Markers Customization




top Top margin

left Left margin

right Right margin


defaultCircleColor Default color of circle marker that is applied if the color data is not provided

defaultRadius Default radius of circle marker that is applied if radius is not provide as part of data

lineColor Color of the line joining the data points. Default color of black is applied if this option is not provided

tooltipElements Data keys along with label that should be displayed as part of mouse hover on data points

"toolTipElements":{"No. of ALR Incident":"alrIncident",

"Time Value":"timeValue"}



TCS Confidential 39

Table 27: Line Chart with Data Driven Markers Framework Parameters



chartType ‘controllinewithsacatterplot’



4.2.3. Example


<!DOCTYPE html> <html>

<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Sample Line Chart with data driven markers</title> <link rel="stylesheet" href="css/Theme.css">


<script type='text/javascript' src='renderer/d3.min.js'></script> <script type='text/javascript' src='renderer/d3.tip.v0.6.3.js'></script>

<script type='text/javascript' src='renderer/control.line.scatterplot.js'></script> </head>


<script>

// Data Set var data={"chartConfig":{"x-axis":"timeValue","y-axis":"alrIncident",

"Radius":"size","circleColor":"color"}, "data":[ { "timeValue":"JAN", "alrIncident":"8", "color":"ff1a00", "size":"8" },

{ "timeValue":"FEB", "alrIncident":"2", "color":"B70030", "size":"11" }, { "timeValue":"MAR", "alrIncident":"4", "color":"ff1a00", "size":"14" },

{ "timeValue":"APR", "alrIncident":"3", "color":"B70030", "size":"8" }, { "timeValue":"MAY", "alrIncident":"8", "color":"ff1a00", "size":"11" },

{ "timeValue":"JUN", "alrIncident":"8", "color":"B70030", "size":"14" } ]

};

// Renderer Options var options = { "width" : 960, "height" : 500,

"defaultCircleColor":"blue", "defaultCircleRadius":5, "lineColor":"grey",

"toolTipElements":{"No. of ALR Incident":"alrIncident", "Time Value":"timeValue"}

};

// Visualization framework var report = $('#Container).customReport({

viewType:'default', chartType:'controllinewithsacatterplot',

reportData:data, options: options

}); report.data('customReport').renderReport();

</script>


TCS Confidential 40

</body> </html>

4.3. Line and Bar Chart with Control Limits

For certain cases, we need control limits to be displayed along with data values. These limits typically indicate the optimum value along with upper and/or lower limit values. The control limits help to identify data values that lie within the limits as well as any outliers. Click the specific legend to view selected data value and hide all other values.

Here is an example of a Line chart with control limits:

Figure 21: Line Chart with Control Limits

Here is an example of a Bar chart with control limits:

Figure 22: Bar Chart with Control Limits


TCS Confidential 41

4.3.1. Data Format

var data={"chartConfig":{"x-axis":"letter","y-axis":"frequency", "y-axis-order":["key1","key2","key3","key4","key5","key6"],

"line-order":["line1","line2","line3"]}, "lineData":{"line1":0.5,"line2":0.25,"line3":0.8},

"data":[{"letter": "JAN", "frequency": {"key1": 0.1, "key2": 0.2, "key3": 0.3,

"key4": 0.4, "key5": 0.5, "key6": 0.6 }}, {"letter": "FEB", "frequency": {"key1": 0.2, "key2": 0.3, "key3": 0.4,

"key4": 0.5, "key5": 0.6, "key6": 0.7 }}, {"letter": "MAR", "frequency": {"key1": 0.3, "key2": 0.4, "key3": 0.5,

"key4": 0.6, "key5": 0.7, "key6": 0.8 }}, {"letter": "APR", "frequency": {"key1": 0.4, "key2": 0.5, "key3": 0.6,

"key4": 0.7, "key5": 0.8, "key6": 0.9 }}, {"letter": "MAY", "frequency": {"key1": 0.44,"key2": 0.54,"key3": 0.63,

"key4": 0.74,"key5": 0.84,"key6": 0.93}} ]};

‘chartConfig’ is a mandatory key that expects the following options:



‘y-axis-order – Array that indicates the order of data values to be selected. As per above data format example, key1 is rendered followed by key2 and so on

‘line-order – Array that indicates the order of control line values to be picked up. As per above example, line1 data displays the optimum (middle) line followed by line2 as lower and line3 as upper limits


4.3.2. Options

The line/bar control chart supports the following options:

Table 28: Line/Bar Control Chart Customizations




top Top margin

left Left margin

right Right margin


line Enable/disable display of control limit lines (default=false and no control limit lines are displayed)

lineColor JSON data of colors to be used for each control limit line. The keys should be the control line data keys. Based on data format example:

"lineColor":{"line1":"#FF0000","line2":"#01DF3A","line3":"#0000FF"}


TCS Confidential 42


lineStrokeStyle Stroke style to be used for each control line. This options controls if the line is regular line or dotted or dashed array.

"lineStrokeStyle":{"line1":"1,1","line2":"3,3","line3":"2,2"}

linename If provided, this option contains the name to be displayed for each control line.

"linename":{"line1":"Middle","line2":"Lower","line3":"Upper"}

linestrokewidth In case of Line chart, this option is the stroke width of the series line (default=1)

In case of Bar chart, this option is the stroke width of the control line (default=1)

targetlinestrokewidth Stroke width of the control lines (default=1)

barColor JSON data of colors to be used for each data key to render the bars or series line.

"barColor":{"key1":"#788fb3",key2":"#a2be60", "key3":"#8a698a",

"key4":"#e38b81","key5":"#bca644","key6":"#577d01"}

legend Enable/disable display of legend. By default no legend is displayed (default=false)

legendText Legend text values to be displayed for each data key.

"legendText":{"key1":"DMA1","key2":"DMA2","key3":"DMA3",

"key4":"DMA4","key5":"DMA5","key6":"DMA6"}

maxYScale Maximum scale of y-axis. If not provided, y-axis scale is based on data values


Table 29: Line/Bar Control Chart Framework Parameters



chartType ‘multilinecontrolchart’ (for Line chart)

‘multibarcontrolchart’ (for Bar chart)



4.3.3. Example

Here is the sample HTML code that uses the visualization framework to render the line chart with control limits.



<title>Sample Line Chart with control limits</title>

<link rel="stylesheet" href="css/Theme.css">


TCS Confidential 43


<script type='text/javascript' src='renderer/d3.min.js'></script> <script type='text/javascript' src='renderer/control.multiline.chart.js'></script>

</head> <body>

<div id="Container "></div> <script>

// Data Set

var data ={ "chartConfig":{"x-axis":"letter","y-axis":"frequency", "

"y-axis-order":["key1","key2","key3","key4","key5","key6"], "line-order":["line1","line2","line3"]},

"lineData":{"line1":0.5,"line2":0.25,"line3":0.8}, "data":[{"letter": "JAN", "frequency": {"key1": 0.1, "key2": 0.2, "key3": 0.3,



"key4": 0.6, "key5": 0.7, "key6": 0.8 }},

{"letter": "APR", "frequency": {"key1": 0.4, "key2": 0.5, "key3": 0.6,


"key4": 0.74,"key5": 0.84,"key6": 0.93}} ]};

// Renderer Options

var options = {"line":true, "legend":true, "lineColor":{"line1":"#FF0000","line2":"#01DF3A","line3":"#0000FF"},

"barColor":{"key1":"#788fb3", "key2":"#a2be60", "key3":"#8a698a", "key4":"#e38b81","key5":"#bca644","key6":"#577d01"},

"legendText":{"key1":"DMA1", "key2":"DMA2","key3":"DMA3", "key4":"DMA4","key5":"DMA5","key6":"DMA6"},

"lineStrokeStyle":{"line1":"1,1","line2":"3,3","line3":"2,2"}, "linename":{"line1":"Middle","line2":"Lower","line3":"Upper"},

"linestrokewidth":2, "targetlinestrokewidth":1, "width" : 449, "height" : 250, "maxYScale":1

};

// Visualization framework

var report = $('#Container).customReport({ viewType:'default',

chartType:'multilinecontrolchart', reportData:data,

options: options });


</script> </body>

</html>

Here is the sample HTML code that uses the visualization framework to render the bar chart with control limits



<title>Sample Bar Chart with control limits</title> <link rel="stylesheet" href="css/Theme.css">

<script type='text/javascript' src='common/jquery-1.11.2.min.js'></script>


TCS Confidential 44


<script type='text/javascript' src='renderer/d3.tip.v0.6.3.js'></script> <script type='text/javascript' src='renderer/control.multibar.chart.js'></script>

</head> <body>

<div id="Container "></div> <script>

// Data Set

var data ={ "chartConfig":{"x-axis":"letter","y-axis":"frequency", "

"y-axis-order":["key1","key2","key3","key4","key5","key6"], "line-order":["line1","line2","line3"]},

"lineData":{"line1":0.5,"line2":0.25,"line3":0.8}, "data":[{"letter": "JAN", "frequency": {"key1": 0.1, "key2": 0.2, "key3": 0.3,



"key4": 0.6, "key5": 0.7, "key6": 0.8 }},

{"letter": "APR", "frequency": {"key1": 0.4, "key2": 0.5, "key3": 0.6,


"key4": 0.74,"key5": 0.84,"key6": 0.93}} ]};

// Renderer Options

var options = {"line":true, "legend":true, "lineColor":{"line1":"#FF0000","line2":"#01DF3A","line3":"#0000FF"},

"barColor":{"key1":"#788fb3", "key2":"#a2be60", "key3":"#8a698a", "key4":"#e38b81","key5":"#bca644","key6":"#577d01"},

"legendText":{"key1":"DMA1", "key2":"DMA2","key3":"DMA3", "key4":"DMA4","key5":"DMA5","key6":"DMA6"},

"lineStrokeStyle":{"line1":"1,1","line2":"3,3","line3":"2,2"}, "linename":{"line1":"Middle","line2":"Lower","line3":"Upper"},

"linestrokewidth":2, "width" : 500, "height" : 350, "maxYScale":1

};


var report = $('#Container).customReport({ viewType:'default',

chartType:'multibarcontrolchart', reportData:data,

options: options });


</script> </body>

</html>

4.4. Line chart with brush control

This visualization is a special case of Line chart wherein the x-axis time scale can be adjusted to change the data slice being visualized. The visualization is depicted in the example below. This chart expects the x-axis to be time dimension with a brush control or slider (depicted in grey below) that can be adjusted as per the time view required.


TCS Confidential 45

Figure 23: Line chart with brush control – Time View

Here is the example with the brush control/slider is adjusted to time scale of February to May 2014.

Figure 24: Line Chart with Brush Control – Time Scale

4.4.1. Data Format

var data ={

"chartConfig":{"x-axis":"timeValue","y-axis":"scoreCardKpiVolume",

"y-axis-order":["DMA1","DMA2","DMA4","DMA6","DMA8"], "line-order":["line1","line2","line3"]},

"lineData":{"line1":15,"line2":55,"line3":80}, "data":[{"timeValue": "20130101", "scoreCardKpiVolume": {"DMA2": 10,"DMA1": 20}},

{"timeValue": "20130201", "scoreCardKpiVolume": {"DMA2": 30,"DMA1": 10}},

{"timeValue": "20130301", "scoreCardKpiVolume": {"DMA8": 40,"DMA6": 50,"DMA4": 40,


TCS Confidential 46

"DMA2": 40,"DMA1": 30}}, {"timeValue": "20140401", "scoreCardKpiVolume": {"DMA8": 60,"DMA6": 30,"DMA4": 20,

"DMA2": 16.9,"DMA1": 76.07}}, {"timeValue": "20140501", "scoreCardKpiVolume": {"DMA2": 7.25,"DMA1": 76.07}},

{"timeValue": "20140601", "scoreCardKpiVolume": {"DMA1": 43.47} }]

};

‘chartConfig’ is a mandatory key that expects following options:



‘y-axis-order – Array that indicates the order of data values to be picked up. As per above data format example, key1 is rendered followed by key2 and so on

‘line-order – Array that indicates the order of control line values to be picked up. As per above example, line1 data displays the lower line followed by line2 as optimum (middle) line and line3 as upper limits


4.4.2. Options

The line chart with data driven markers supports the following options.

Table 30: Line Chart with Data Driven Markers




top Top margin for chart

left Left margin for chart

right Right margin for chart

bottom Bottom margin for chart

left2 Left margin for brush/slider control

top2 Top margin for brush/slider control

bottom2 Bottom margin for brush/slider control

enableBrush Display or hide brush/slider control

line Enable/disable display of control limit lines (default=false and no control limit lines are displayed)

lineColor JSON data of colors to be used for each control limit line. The keys should be the control line data keys. Based on data format example:

"lineColor":{"line1":"#FF0000","line2":"#01DF3A","line3":"#0000FF"}

lineStrokeStyle Stroke style to be used for each control line. This options controls if the line is regular line or dotted or dashed array.

"lineStrokeStyle":{"line1":"1,1","line2":"3,3","line3":"2,2"}


TCS Confidential 47


linename If provided, this option contains the name to be displayed for each control line.

"linename":{"line1":"Middle","line2":"Lower","line3":"Upper"}

linestrokewidth In case of Line chart, this option is the stroke width of the series line (default=1)

In case of Bar chart, this option is the stroke width of the control line (default=1)

targetlinestrokewidth Stroke width of the control lines (default=1)

barColor JSON data of colors to be used for each data key to render the bars or series line.

"barColor":{"key1":"#788fb3",key2":"#a2be60", "key3":"#8a698a",

"key4":"#e38b81","key5":"#bca644","key6":"#577d01"}

legend Enable/disable display of legend. By default no legend is displayed (default=false)

legendText Legend text values to be displayed for each data key.

"legendText":{"key1":"DMA1","key2":"DMA2","key3":"DMA3",

"key4":"DMA4","key5":"DMA5","key6":"DMA6"}

maxYScale Maximum scale of y-axis. If not provided, y-axis scale is based on data values


Table 31: Line Chart - Framework Parameters



chartType ‘controlmultilinechartwithbrush’



4.4.3. Example


<!DOCTYPE html>

<html> <head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Sample Line Chart with brush control</title>


<script type='text/javascript' src='renderer/custom_report_lib.js'></script>

<script type='text/javascript' src='renderer/d3.min.js'></script> <script type='text/javascript' src='renderer/d3.tip.v0.6.3.js'></script>

<script type='text/javascript' src='renderer/control.brush.multiline.chart.js></script> </head>

<body>


TCS Confidential 48


// Data Set

var data ={ "chartConfig":{"x-axis":"timeValue","y-axis":"scoreCardKpiVolume",

"y-axis-order":["DMA1","DMA2","DMA4","DMA6","DMA8"], "line-order":["line1","line2","line3"]},

"lineData":{"line1":15,"line2":55,"line3":80}, "data":[{"timeValue": "20130101", "scoreCardKpiVolume": {"DMA2": 10,"DMA1": 20}},

{"timeValue": "20130201", "scoreCardKpiVolume": {"DMA2": 30,"DMA1": 10}}, {"timeValue": "20130301", "scoreCardKpiVolume": {"DMA8": 40,"DMA6": 50,"DMA4": 40,

"DMA2": 40,"DMA1": 30}}, {"timeValue": "20140401", "scoreCardKpiVolume": {"DMA8": 60,"DMA6": 30,"DMA4": 20,

"DMA2": 16.9,"DMA1": 76.07}}, {"timeValue": "20140501", "scoreCardKpiVolume": {"DMA2": 7.25,"DMA1": 76.07}},

{"timeValue": "20140601", "scoreCardKpiVolume": {"DMA1": 43.47} }]

};

// Renderer Options

var options = {"width" : 1200, "height" : 500, "enableBrush":true, "line":true, "legend":true,

"lineColor":{"line1":"red","line2":"green","line3":"blue"}, "barColor":{"DMA1":"#92BC2A", "DMA2":"#F0C602", "DMA3":"#EB6353",

"DMA4":"#4D72A9","DMA5":"#713F72","DMA6":"#0896A2", "DMA7":"#A45802","DMA8":"#C14488"},

"legendText":{"DMA1":"DMA1", "DMA2":"DMA2","DMA3":"DMA3", "DMA4":"DMA4","DMA5":"DMA5","DMA6":"DMA6",

"DMA7":"DMA7","DMA8":"DMA8"}, "lineStrokeStyle":{"line1":"0,0","line2":"2,2","line3":"2,2"},

"linename":{"line1":"Lower","line2":"Middle","line3":"Upper"}, "linestrokewidth":2, "targetlinestrokewidth":2, "maxYScale":1

};

// Visualization framework var report = $('#Container').customReport({

viewType:'default', chartType:'controlmultilinechartwithbrush',


});


</script> </body>

</html>

4.5. Bullet chart

A bullet chart is a variation of the bar chart that has an inner bar also called bullet. This visualization helps to compare the actual and target vs the projected values. The actual/target is indicated by the outer bar while the projected value is indicated by the bullet (inner bar). This chart helps to gauge how the bullet compares to the bar.

An example listed below indicates an outer bar that represents the actual and target revenue while the bullet indicates the projected revenue. The target is also highlighted with a target line.


TCS Confidential 49

Figure 25: Bullet Chart

4.5.1. Data Format

var data ={

"chartConfig":{"ActualValue":"actual","TargetValue":"target","ProjectionValue":"projection"}, "data": {

"actual": 1000, "target": 2000,

"projection":1500 }

};

‘chartConfig’ is a mandatory key that expects following options:

‘ActualValue’ – this indicates the JSON data key that determines the start value for the outer bar

‘TargetValue’ – this indicates the JSON data key that determines the end value for the outer bar

‘ProjectionValue’ – this indicates the JSON data key that determines the value for the bullet (inner bar)


4.5.2. Options

The bullet chart with data driven markers supports the following options.

Table 32: Bullet Chart with Data Driven Markers Customization




top Top margin for chart

left Left margin for chart

right Right margin for chart

bottom Bottom margin for chart

text Expects an array of 3 values that represent the header text for

the chart

"text":["Actual","VS","Target"]

targetStrokeStyle Set the stroke style for the target line. Example below sets the

target line as a dotted line

"targetStrokeStyle":{"line1":"2,2"}


TCS Confidential 50


lineStroke Set the color for the target line

innerRectColor Set the color for bullet (inner bar)

outerRectColor Set the color for outer bar

currencySign Optional prefix to be appended to the actual and target values

that are displayed on the chart

rectxcoordinate Start position for the chart, the bars are shifted to right as per

the option set (default=100)


Table 33: Bullet Chart Framework Parameters



chartType ‘progressbarchart’



4.5.3. Example




<title>Sample Bullet Chart</title> <link rel="stylesheet" href="css/Theme.css">


<script type='text/javascript' src='renderer/d3.min.js'></script> <script type='text/javascript' src='renderer/ renderer/progress.chart.js></script>

</head> <body>


// Data Set var data ={

"chartConfig":{"ActualValue":"actual","TargetValue":"target","ProjectionValue":"projection"}, "data": {

"actual": 1000, "target": 2000,

"projection":1500 }

}; // Renderer Options

var options = {"width" : 250, "height" : 100, "rectxcoordinate":40, "targetStrokeStyle":{"line1":"2,2"}, "lineStroke":"red",

"text":["Actual","VS","Target"], "currencySign":"$", "innerRectColor":"#af4d98", "outerRectColor":"#e3edf6"

};


var report = $('#Container').customReport({


TCS Confidential 51

viewType:'default', chartType:' progressbarchart',



</script>

</body> </html>


TCS Confidential 52

5. CSS Classes

The pre-built renderers support multiple CSS classes that are available as part of the Theme file. Include ‘Theme.css’ to use the default styles for Standard charts and/or Advanced Charts.

5.1. Standard Charts

The CSS classes applicable to all the standard charts (described in Section 8) are:

Table 34: CSS Applicable for Standard Charts

CSS Class Description

.axis Common X and Y axis styling

.axis path line X and Y axis lines

.axis line Applies to X and Y tick lines

.tick Applies to both axes ticks

.xaxis, .xlabel Styles specific to X axis (overrides .axis styles)

.yaxis, .ylabel Styles specific to Y axis (overrides .axis styles)

.xtitle X axis title

.ytitle Y axis title

.grid Styles for the grid lines

#chartTooltip Tooltip related styles for default tooltip

.drill Click/Drill down styles

.legendText Styles for text displayed on legend

The CSS classes applicable to specific standard charts are:

Table 35: CSS Applicable for Specific Standard Charts

Renderer CSS Class Description

Line chart

.line Styles for the lines rendered

.lineMarker Line marker related styles

Bar chart

.bar Styles for bar

.barText Styles for text displayed on bar

Pie chart

.pieLabel Common styles for text displayed for pie slices

.pieInnerLabel Styles specific to labels displayed inside pie slices

.pieOuterLabel Styles specific to labels displayed as callouts

.arc path Styles related to each pie slice (arc)


TCS Confidential 53


Bar/Line combination

.ybaraxis For Bar Y axis

.ylineaxis For Line Y axis

Scatterplot

.scatterplot Styles for the scatter points

.scatterLblTxt For text that is displayed inside the scatter points

Bubble chart

.bubble Styles for the bubbles

.bubbleLblTxt For text that is displayed inside the bubbles

5.2. Advanced Charts

The CSS styles that apply to advanced charts (described in Section 9) are as listed below.

Table 36: CSS Applicable for Advanced Charts


Radar/Spider chart

.radarCircularSeg Styles for the circular chart levels

.radarLevelText Styles for text displayed for each level

.radarAxisLine Styles for the lines from center of chart to the outer labels

.radarAxisText Styles for the labels around the chart that represent the dimension values

.radarSeries Styles for the circles that indicate the data values

Gauge/Dial chart

.gaugeOuterCircle Styles for outer circle of Gauge/Dial chart

.gaugeInnerCircle Styles for inner circle

.gaugeLabel Styles for the label displayed inside the dial on the top

.gaugeMinorTick Styles for the minor ticks

.gaugeMajorTick Styles for the major ticks

.gaugeMajorTickLabel Styles for the minor tick labels

.gaugeNeedleContainer Styles for the container that hosts the needle/pointer

.gaugeNeedle Styles for the needle

.gaugeCurrentValue Styles for the data value displayed in the dial

Sunburst .sunburstLabel Styles for the Sunburst labels

Treemap .node Styles for each node (parent rectangle)

.childNode Styles for each child node

Line with data driven

.axis line Styles for the axis tick lines as well as the horizontal grid lines


TCS Confidential 54


markers Line & Bar chart with control limits


.tick line Styles for tick lines

.tick text Styles for the tick labels

.line Styles for the line that connects the data points as well as the grid lines

Line & Bar chart with control limits


.legendDefault Styles for the bottom legend display

.legendActive Styles for the legend that is active on click (interactive legends)


.brush .extent

Styles for the brush component of the chart

Bullet chart

.progChartActualTrgetVSTxt Styles for the header text displayed

.progChartActualTrgetTxtAmount Styles for the actual and target measure values


Line & Bar chart with control limits

.d3-tip

.d3-tip:after

.d3-tip.n:after

Tooltip related CSS classes for specified charts


TCS Confidential 55

6. Map Renderer

The map renderer is a special case of visualization that can be integrated directly without the need for visualization framework. It provides several API to set the exact view of the map, highlight required areas and customize interactions and styles.

Figure 26: Map Renderer - Highlighted Required Areas

Figure 27: Map Renderer - Customizations


TCS Confidential 56

6.1. Overview

Rendering interactive geographical maps typically involves the following main components:

1. Map

The first step is to use the latest geographical map that is available. For the map renderer supported, Open Street Map is being used to display the map. (https://www.openstreetmap.org).

The URL for the map along with details such as the initial latitude/longitude, zoom level and so on is required to set the exact map view required.

2. Geographical Data

To highlight areas on the map, to draw rectangles or markers, provide geographical data that can be interpreted and rendered as a layer on top of the map. The map renderer supported, expects this data in GeoJSON format. GeoJSON is a format for encoding a variety of geographic data structures. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon. Geometric objects with additional properties are Feature objects. Sets of features are contained by FeatureCollection objects. (http://geojson.org). A simple example is given below:

{

"type": "Feature", "geometry": {

"type": "Point", "coordinates": [125.6, 10.1]

}, "properties": {

"name": "Dinagat Islands" }

}

3. Creating interactive maps

Using the map and GeoJSON data, you can create interactive maps. The map renderer uses leaflet.js which is a JS library for interactive maps. (http://leafletjs.com).

4. Map Renderer

The renderer provides a simple yet flexible framework to initialize, customize and create interactive maps using leaflet.js. These are explained in the subsections below. Some of the API have options that invoke a JS function during rendering of layers/overlays/icons on the map. The user is expected to write leaflet.js related code to access and customize the layers on the map. The JS files required to invoke the map renderer are:

Table 37: Map Renderer Invocation through JS Files

File Name Description

realtimechart.js Core map renderer file

leaflet.js JS library for interactive maps

leaflet.css CSS classes provided by Leaflet JS library

https://www.openstreetmap.org/

http://geojson.org/

http://leafletjs.com/


TCS Confidential 57

6.2. Map Initialization

Map initialization consists of following steps:

1. Ensure that div with an id (For example ‘MapContainer’) as well as height is created under which the map is rendered.

<div style="height: 800px;" id="MapContainer" />

2. The first step is to initialize and set the map to the desired view. Invoke the API ‘_realtimechart’ with the container/div ID that holds the map and set the required options. The supported options are listed in table below:

Table 38: Supported Customizations for Map Initialization


center Mandatory option to set the initial geographical center of the map. It is an array consisting of latitude/longitude to set the initial view of the map

center:[47.21834, -1.55677]

defaultZoom Default zoom level for the map (default zoom=11)

minZoom Minimum zoom level allowed for the map (default=7)

maxZoom Maximum zoom level allowed for the map (default=18)

mapOpacity Opacity of the map, should be a value from 0 to 1 (default=1)

mapid Id for the map layers created

attributions Attribution that appears on the bottom right corner of map (default is the attribution for Open Street Map)

overlay For any rectangles/overlays that are to be created, this option contains the latitude/longitude for the top/left and right/bottom corners of rectangle. The overlay needs to be rendered by explicitly invoking API to render rectangle overlay (Section 11.6)

overlayClass The CSS style class to be applied to the rectangle overlay

3. Retain the map renderer reference (‘mapRef’ in example below) to invoke other API.

var mapRef = $('Container')._realtimechart( { center:[47.21834, -1.55677], defaultZoom:11 } );

6.3. Render Layer

This API renders vector layers such as Polygon or Polyline on the map. This helps highlight the map area and set custom styles and interactions on it. It expects data to be GeoJSON format. GeoJSON is a standard format to encode various geographical data structures.

The API is invoked as:

mapRef.data('_realtimechart').renderLayer.data('_realtimechart').renderLayer(data, options, name);


TCS Confidential 58

The parameters to this API are as listed below:

Table 39: Parameters for Render Layer

Parameter Name Description

data GeoJSON data to draw every feature/layer on the map

options Layer options to set styles and interactions

name Name for the layer

The options that can be set to customize zoom levels, styles and interactions are listed in table below:

Table 40: Render Layer Customizations


zoomlevel Set the required minimum and maximum zoom levels

zoomlevel:{min:11,max:11}

The layer is redrawn when the map is zoomed in or out but within the min/max zoom level.

style Provide the JS function name that is invoked to set the styles for every layer that is rendered on the map. The JS function is passed to the feature object. Feature in map is the GeoJSON geometry along with its properties. Use leaflet.js API to access and customize feature.

onEachFeature Similar to style option, provide the JS function name that is invoked while rendering every GeoJSON feature. This function is passed to the feature and layer being rendered. Use leaflet.js API to access and customize feature/layer.

The GeoJSON data is set as given below:

var zoneData={

"type": "FeatureCollection",

"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [

{ "type": "Feature", "properties": { "sdma_name": "Bellevue - Chantenay - Sainte Anne", "subdma_id": "FR_NAN_SD2", "dma_id": "FR_NAN_DMA2", "zone_id": "FR_NAN_ZONE1" },

"geometry": { "type": "Polygon", "coordinates": [ [ [ -1.571022115281618, 47.206084628049759 ], [ -1.571204953500345, 47.205974848887102 ], [ -1.572169140496113, 47.205140624258192 ], [ -

1.572627784250998, 47.204648690674411 ], [ -1.572629498773655, 47.204646831128258 ],] ] } } …] };

Set the required options to the API:

var zoneOptions={ style: customStyles, onEachFeature: onEachZoneFeature,

zoomlevel:{ min:11, max:11 } };

The JS functions provided for ‘style’ and ‘onEachFeature’ options should be defined as below:


TCS Confidential 59

function customStyles( feature ) { … };

function onEachZoneFeature( feature, layer) { … };

Use the JS object created after the map has been initialized to invoke this API:

mapRef.data('_realtimechart').renderLayer(zoneData, zoneOptions, "zones");

6.4. Render Point Layer

This API is specifically for rendering points on the map. The GeoJSON data to render the point on map is the latitude/longitude along with any properties for the point. You can customize the required styles, interactions and markers for rendering the point.


mapRef.data('_realtimechart').renderPointLayer(data, options, name);

The parameters to this API are as listed below:

Table 41: Parameters of Render Point Layer

The options that can be set to customize styles, interactions and markers are listed in table below:

Table 42: Render Point Layer Customizations




The layer is redrawn when the map is zoomed in or out but within the min/max zoom level.

style Provide the JS function name that is invoked to set the styles for every layer that is rendered on the map. The JS function is passed the feature object for the point being rendered. Use leaflet.js API to access and customize feature.

onEachFeature Similar to style option, provide the JS function name that is invoked while rendering every GeoJSON feature. This function is passed the feature and layer being rendered. Use leaflet.js API to access and customize feature/layer.

pointToLayer Provide the JS function name that is invoked to create the marker for the point. If this option is not set, a simple marker is created. The function is passed the feature and point latitude/longitude. Use leaflet.js API to access and customize feature.

Parameter Name Description

data GeoJSON data to draw every feature/layer on the map

options Layer options to set styles and interactions

name Name for the layer


TCS Confidential 60

The GeoJSON data is set as given below:

var meterData = {

"type": "FeatureCollection",

"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [

{ "type": "Feature", "properties": { "DC_ID": "M1","subdma_id":"FR_NAN_SD2", "ELEVATION": 10.000000, "DEMAND": 0.000000, "RESULT_DEM": 0.000000,

"RESULT_HEA": -172.301620, "RESULT_PRE": -182.301620, "RESULT_QUA": 0.000000 },

"geometry": { "type": "Point", "coordinates": [ -1.63542017085654, 47.190753654156744 ] } }

… ] };

Set the required options to the API:

var meterOptions={ style: customStyles, onEachFeature: onEachPointFeature,

pointToLayer: customPointToLayer, zoomlevel:{ min:11, max:11 } };

The JS functions provided for ‘style’, ‘onEachFeature’ and ‘pointToLayer’ options should be defined as below:

function customStyles( feature ) { … };

function onEachZoneFeature( feature, layer) { … };

function customPointToLayer( feature, latlng ) { … };

Use the JS object created after the map has been initialized to invoke this API:

mapRef.data('_realtimechart').renderPointLayer(meterData, meterOptions, "meters");

6.5. Remove Layer

This API removes the required layer from the map. The layer could have been drawn using API for render layer or render point layer (Section 11.3 or 11.4). The API expects the name of the layer provided during rendering.

To remove the layer rendered for zones and meters, API is invoked as:

mapRef.data(‘_realtimechart’).removeLayer(“zones”);

mapRef.data(‘_realtimechart’).removeLayer(“meters”);


TCS Confidential 61

6.6. Render Rectangle Overlay

This API is specifically for rendering rectangle overlays on the map. This API uses the overlay and overlayClass options that were set during map initialization (Section 11.2). The overlay is redrawn when map is zoomed in or out (but within minimum/maximum zoom levels).


mapRef.data('_realtimechart').createOverlay();

An example of the overlay option set during map initialization is:

overlay: [[54.559322, -5.767822], [56.1210604, -3.021240]]

6.7. Remove Rectangle Overlay

This API removes overlay created on the map.

mapRef.data('_realtimechart').removeOverlay();

6.8. Add Icons

This API adds icons to the geographical points provided in the data. The icon image as well as the icon styles can be customized as per requirements.


mapRef.data('_realtimechart').addIcons(data, options);

The data is provided as a JSON array of latitude/longitude for each point. Additional details can be provided in the JSON. These are passed to the JS function that creates the icon.

var data = [ {"latlng":[47.249034627953165,-1.568062918435587]}, {"latlng":[47.20689889906254,-1.604669436321803]}

];

The options that can be set to customize the icon are listed in table below:

Table 43: Customizing the Icon


icon Provide the JS function name that is invoked to create the custom icons on the map. The JS function is passed the latitude/longitude of the point where the icon has to be rendered. Use leaflet.js API to create the icons.



The icon is redrawn when the map is zoomed in or out but within the min/max zoom level.


TCS Confidential 62


classname If zoomlevel option is provided, ‘classname’ contains the CSS class name that is used to show/hide the icons when the map is zoomed in or zoomed out.

Here is an example of API:

var options={ icon:createIconZone, zoomlevel:{min:11,max:11}, classname:'zone-div-icon' };

The JS function to create icon is defined as below. The parameter is the JSON data for that point.

function createIconZone( point ){ … };

For example, point = {"latlng":[47.249034627953165,-1.568062918435587]}

6.9. Get Map Reference

This API returns the leaflet.js map reference that has been created.

mapRef.data('_realtimechart').getMap();

6.10. Set Zoom

This API sets the current zoom level of the map. It expects an integer between 1 and maximum zoom level possible on the map.

mapRef.data('_realtimechart').setZoom(10);

6.11. Set Custom Zoom Handler

This API overrides the leaflet.js ‘zoomend’ handler that is invoked on every zoom in and zoom out. The zoom event handler redraws the layers, points and icons based on min/max zoom levels set on the map. The API expects the JS function that is invoked on ‘zoomend’ event. The custom zoom handler is passed a reference to this object and current zoom level. Leaflet.js API can be used to customize the map on every zoom.

mapRef.data('_realtimechart').addZoomHandler('customZoomHandler');

function customZoomHandler(thisRef, currentZoom) { … };

6.12. Set Map View

This API sets the current view and zoom level of the map. It expects an array containing latitude, longitude, and the zoom level.

mapRef.data('_realtimechart').setView( [50, 30], 11);


TCS Confidential 63

6.13. Set Map Center

This API sets the current map center. It expects an array containing the latitude and the longitude.

mapRef.data('_realtimechart').setCenter([50, 30]);


TCS Confidential 64

7. Custom Renderers

The visualization framework supports all the pre-built renderers that include set of standard charts as well as advanced charts. However, there can be use cases wherein a custom renderer that is not available as part of the pre-built renderers is required. The visualization framework can invoke all such custom renderers. Every custom renderer is required to follow a set of guidelines that are explained in this section below.

1. The custom renderer should expose a single JS function that should accept 3 parameters namely:

Container/Div ID – The container or div ID under which the visualization is rendered

Data – The data set to render the visualization

Renderer Options – Options to customize the renderer. For example height, width, color and so on.

function customRenderer ( containerID, data, options ) {

… …

};

2. For the sample custom renderer defined in step (1), the visualization framework is invoked with the following set of parameters:

var chart = $('#Container').customReport({ viewType: 'default', chartType: 'custom',

reportData: data, options: options, renderer: 'customeRenderer'

}); chart.data('customReport').renderReport();

3. The framework does not process the data or options and passes it to the custom renderer JS function.

7.1. Sample Custom Renderer

The renderer can be built using any third party library. The visualization framework invokes the JS function provided to render the visualization.

If you want to create a custom renderer to draw a circle as listed in the figure below, you need to use d3.js as the underlying visualization library to draw the circles.

Figure 28: Custom Renderer to Draw a Circle

The steps for integration to framework are as listed below:

1. Create the custom renderer as per requirements. The render should adhere to the following guidelines to make it flexible and reusable for other similar use cases:


TCS Confidential 65

It should accept 3 parameters – Div/Container ID, data values and renderer options

Keep the data format simple and based on the visualization being created

Enhance by providing options to customize the renderer. Simple examples include width

Use CSS styles or provide options to customize the look and feel (example color, opacity and so on.)

For the circle custom renderer, set the data and options as shown below.

a. Data

Data is an array of values that indicate the diameter of the circle.

data = [80, 120, 230]

b. Options

The custom renderer supports the following options:

Table 44: Custom Renderer Customizations




color Array of colors to represent each circle. Default colors are provided

space Space between each circle. Default value is provided

Here is the code for the custom renderer:

drawCircle=function(id,data,options) {

// Set default values for options

var width=100, height=100, space=50; var color = d3.scale.category10();

// Override default values

if(options.hasOwnProperty('width')) width=options.width;

if(options.hasOwnProperty('height')) height=options.height;

if(options.hasOwnProperty('color')) color=options.color;

if(options.hasOwnProperty('space')) space=options.space;

// Draw circles

var svg = d3.select("#"+id) .append("svg")

.attr("width", width) .attr("height", height);

var circle = svg.selectAll("circle")

.data(data, function(d) { return d; });

circle.enter() .append("circle")

.attr("cy", 40) .attr("cx", function(d, i) { return i*space+20; })

.attr("r", function(d) { return Math.sqrt(d); })

.style("fill", function(d, i) { return color[i]; });


TCS Confidential 66

};

2. After the custom renderer is created, it can be invoked from the visualization framework by setting the following framework parameters:

Table 45: Custom Renderer Framework Parameters



chartType ‘custom’

reportData Data set


renderer Custom renderer function to be invoked by framework. For example: renderer is set to ‘drawCircle’

Here is the example of integration of custom renderer to visualization framework:

<!DOCTYPE html>

<html> <head>

<script type='text/javascript' src='common/jquery-1.11.2.min.js'></script> <script type='text/javascript' src='renderer/d3.min.js'></script>

<script type='text/javascript' src='renderer/custom_report_lib.js'></script> <script type='text/javascript' src='renderer/circle.js'></script>

</head>

<body> <div id="Container" ></div>

<script type="text/javascript">

// Data Values

var data = [80, 120, 230];

// Renderer Options var options = {"width": 200, "height": 200, "color" : ['red', 'blue', 'green'], "space":80};


var report = $('#Container').customReport({

viewType:'default', chartType:'custom',

reportData: data, options: options, renderer: 'drawCircle'


</script> </body>

</html>


TCS Confidential 67

Appendix A: Configuration (optional - required for showing visualization charts

through java scripts)

This configuration is required for showing visualization charts in the html pages through java script without writing any additional java code. These changes help in avoiding cross application resource sharing issue. This is typically useful where the visualization components can be accessed in a html page.

Following is an example and guideline in setting up a sample.html page which access the visualization libraries through java scripts. Developer can use this method in the example or write customized code to use the visualization libraries.

Attached is the sample.html file for reference.

sample.txt

The visualization framework components can be found in the sub-folder static. To deploy the visualization framework for use, create a folder called Sample in the folder /u01/cipuser/wildfly/portal/wildfly-12.0.0.Final/static-content and place the file sample.html and the static folder with all of its contents in the Sample folder. You should now have a folder called /u01/cipuser/wildfly/portal/wildfly-12.0.0.Final/static-content/Sample containing a file called sample.html and a sub-folder called static with three sub-folders (css, fonts, and js) under it.

The sample.html file is setup to directly access the CIDL RESTful APIs from Javascript. To enable this functionality some minor configuration changes, need to be made to the web server and application server. The vizassets.zip file also contains updated configuration files for these applications.

The updated web server configuration file (nginx.conf) is setup with all required proxies to allow for direct calls to the RESTful APIs from the web page via Javascript. By default, it is assumed that the web pages and Javascript code will be executed from the /u01/cipuser/wildfly/portal/wildfly-12.0.0.Final/static-content folder on the CIDL server. This file needs to be placed in the /u01/cipuser/softwares/nginx/nginx_home/conf folder. Before copying nginx.conf from the vizassets folder, please backup or rename the existing nginx.conf file.

Following are the new lines that were added in /u01/cipuser/softwares/nginx/nginx_home/conf/nginx.conf

Before copying standalone.xml from the vizassets folder, please backup or rename the existing standalone.xml file. For this video we will rename the existing standalone.xml to standalone.xml.previz.

/u01/cipuser/wildfly/portal/wildfly-12.0.0.Final/standalone/configuration/standalone.xml

The additional changes added to standalone.xml are highlighted below.


TCS Confidential 68

Trademark Notices

Various trademarks appear in this publication.

TATA, Tata Consultancy Services and TCS are registered trademarks, word marks or label marks in India and other countries of TATA Sons Limited.

AMD and AMD Opteron are trademarks of Advanced Micro Devices, Inc.

Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle and/or its affiliates.

Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.

Microsoft, Vista and Windows are registered trademarks of Microsoft Corporation in the United States, other countries or both.

Red Hat is a registered trademark of Red Hat, Inc. in the United States and other countries.

All other trademarks used in this document are the property of their respective owners.

About TCS's Digital Software & Solutions Group

With the rapidly growing influence of new digital technologies, embedding digital transformation in the company strategy has become a key objective across industries. Recognizing this, TCS offers a comprehensive portfolio of software and solutions that help enterprises leverage these emerging digital technologies to their fullest competitive advantage.

Developed by industry experts, our fully integrated licensed software and solutions are configured to address our clients' specific business pain points within their industry context.

Our modular solutions help organizations to effectively respond to the fast rate of technology change and extend the influence of digital technologies to transform the business landscape. As a result, our clients can attract and build lifelong relationships with their customers, even as they reduce operational costs across the customer experience and digital commerce cycle. With TCS as a strategic partner, enterprises are empowered to respond with agility to the changing digital environment, achieving certainty in an increasingly uncertain digital world.

About Tata Consultancy Services Ltd (TCS)

Tata Consultancy Services is an IT services, consulting and business solutions organization that delivers real results to global business, ensuring a level of certainty no other firm can match. TCS offers a consulting-led, integrated portfolio of IT and IT-enabled infrastructure, engineering and assurance services. This is delivered through its unique Global Network Delivery Model™, recognized as the benchmark of excellence in software development. A part of the Tata Group, India’s largest industrial conglomerate, TCS has a global footprint and is listed on the National Stock Exchange and Bombay Stock Exchange in India.

For more information, visit us at www.tcs.com

IT Services Business Solutions Consulting

Contact us:[email protected]

http://www.tcs.com/

tcs digital software & solutions group...the framework utilizes d3.js (a javascript library for...

Documents