Tata Consultancy Services Visualization Framework User Guide
TCS Digital Software & Solutions Group
TCS Connected Intelligence Platform aka, Connected Intelligence Data Lake for Business
Visualization Framework v2.2
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]
March 2019
Tata Consultancy Services Visualization Framework User Guide
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.
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential iii
Document Release Note
Project: TCS Connected Intelligence Platform
Document Details
Name Version Number Description
Visualization Framework User Guide
Draft version 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.
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
8. Custom Application – Use Case 1 ....................................................................................................... 67
8.1. Metadata Model .......................................................................................................................... 67
8.2. Create the Project ....................................................................................................................... 70
8.3. Custom Report ............................................................................................................................ 71
9. Custom Application – Use Case 2 ....................................................................................................... 75
Total number of pages in this document (including cover page): 87
Tata Consultancy Services Visualization Framework User Guide
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 Figure 34: Create Metadata Model ............................................................................................................. 67 Figure 35: Create Metadata for Routes ...................................................................................................... 69 Figure 36: Train Frequency ......................................................................................................................... 74 Figure 37: Multicolor Chart .......................................................................................................................... 76
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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:
Tata Consultancy Services Visualization Framework User Guide
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':'Q3','Region 1' : 50,'Region 2' :80,'Region 3' : 145,'Region 4' :175},
{'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']}
};
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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).
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 12
Figure 10: Normal Pie Chart
Figure 11: Pie Chart with callouts
Figure 12: Donut Chart
Normal Pie
Pie with callouts
Donut
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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)
Tata Consultancy Services Visualization Framework User Guide
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":"22.00","region":"Region 3"},
{"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':'Q2','Region 1' : 30,'Region 2' :65,'Region 3' : 105,'Region 4' :145},
{'Quarter':'Q3','Region 1' : 50,'Region 2' :80,'Region 3' : 145,'Region 4' :175},
{'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.
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name Description
top top margin (in pixel)
bottom bottom margin (in pixel)
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 17
Attribute Name Description
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
Attribute Name Description
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
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 18
X-axis Customizations Table 7: X-axis Customizations
Attribute Name Description
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)
Attribute Name Description
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
Attribute Name Description
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.
Tata Consultancy Services Visualization Framework User Guide
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.
{"dataOrder":["region", "count"],
"data":[ {"count":"252.00","region":"Region 1"},
{"count":"33.00","region":"Region 2"},
{"count":"22.00","region":"Region 3"},
{"count":"11.00","region":"Region 4"}
]
}
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 };
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name 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)
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 21
Attribute Name Description
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
Attribute Name Description
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
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 22
Attribute Name Description
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
Attribute Name Description
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.
{"dataOrder":["region", "count"],
"data":[ {"count":"252.00","region":"Region 1"},
{"count":"33.00","region":"Region 2"},
{"count":"22.00","region":"Region 3"},
{"count":"11.00","region":"Region 4"}
]
}
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"} ) { … };
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 23
3.9.10. Bar Chart Customizations
Customizations specific to bar charts are listed below.
Table 14: Bar Chart Customizations
Attribute Name Description
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
Attribute Name Description
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': '%' } };
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 24
3.9.11. Line Chart Customizations
Customizations specific to line charts are listed below.
Table 16: Line Chart Customizations
Attribute Name Description
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
Attribute Name Description
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
Attribute Name Description
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
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 25
Attribute Name Description
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
Attribute Name Description
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
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 26
Attribute Name Description
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} };
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name Description
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 }
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 28
3.9.15. Bubble customizations
Customizations that are specific to bubble chart are listed below.
Table 21: Bubble Customizations
Attribute Name Description
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’
Tata Consultancy Services Visualization Framework User Guide
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':'Q3','Region 1' : 50,'Region 2' :80,'Region 3' : 145,'Region 4' :175}, {'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'} };
Tata Consultancy Services Visualization Framework User Guide
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
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 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'],
Tata Consultancy Services Visualization Framework User Guide
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)'}
};
// Visualization framework - bar renderer invocation
var chart = $('#Container').customReport({ viewType: 'default', chartType: 'custom', reportData: data, options: options, renderer: 'charts.drawScatterplot });
chart.data('customReport').renderReport(); </script> </body> </html>
Tata Consultancy Services Visualization Framework User Guide
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
Line with data driven markers
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
Line chart with brush control
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.
Tata Consultancy Services Visualization Framework User Guide
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:
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name Description
width Width of chart
height Height of chart
top Top margin
left Left margin
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 35
Attribute Name Description
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
Tata Consultancy Services Visualization Framework User Guide
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
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 Treemap 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/new.rectengular.tree.chart.js'></script> </head> <body> <div id="Container"></div> <script> // Hierarchical Data Set
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": "Loan14", "count": 400 }, { "name": "Loan15", "count": 500 }, { "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
Tata Consultancy Services Visualization Framework User Guide
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"},
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name Description
width Width of chart
height Height of chart
top Top margin
left Left margin
right Right margin
bottom Bottom 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"}
Framework parameters that need to be set are:
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 39
Table 27: Line Chart with Data Driven Markers Framework Parameters
Parameter Name Value
viewType ‘default’
chartType ‘controllinewithsacatterplot’
reportData Data set (JSON)
options Renderer Options (JSON)
4.2.3. Example
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 Line Chart with data driven markers</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/d3.tip.v0.6.3.js'></script> <script type='text/javascript' src='renderer/control.line.scatterplot.js'></script> </head> <body> <div id="Container"></div> <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>
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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:
‘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
‘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
‘data’ is mandatory and contains the actual data values to render the chart.
4.3.2. Options
The line/bar control chart supports the following options:
Table 28: Line/Bar Control Chart Customizations
Attribute Name Description
width Width of chart
height Height of chart
top Top margin
left Left margin
right Right margin
bottom Bottom 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"}
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 42
Attribute Name Description
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
Framework parameters that need to be set are:
Table 29: Line/Bar Control Chart Framework Parameters
Parameter Name Value
viewType ‘default’
chartType ‘multilinecontrolchart’ (for Line chart)
‘multibarcontrolchart’ (for Bar chart)
reportData Data set (JSON)
options Renderer Options (JSON)
4.3.3. Example
Here is the sample HTML code that uses the visualization framework to render the line chart with control limits.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Sample Line Chart with control limits</title> <link rel="stylesheet" href="css/Theme.css">
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 43
<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/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.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}} ]}; // 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 });
report.data('customReport').renderReport(); </script> </body> </html>
Here is the sample HTML code that uses the visualization framework to render the bar chart with control limits
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <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>
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 44
<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.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.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}} ]}; // 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 };
// Visualization framework - bar renderer invocation
var report = $('#Container).customReport({ viewType:'default', chartType:'multibarcontrolchart', reportData:data, options: options });
report.data('customReport').renderReport(); </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.
Tata Consultancy Services Visualization Framework User Guide
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,
Tata Consultancy Services Visualization Framework User Guide
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:
‘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
‘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
‘data’ is mandatory and contains the actual data values to render the chart.
4.4.2. Options
The line chart with data driven markers supports the following options.
Table 30: Line Chart with Data Driven Markers
Attribute Name Description
width Width of chart
height Height of chart
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"}
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 47
Attribute Name Description
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
Framework parameters that need to be set are:
Table 31: Line Chart - Framework Parameters
Parameter Name Value
viewType ‘default’
chartType ‘controlmultilinechartwithbrush’
reportData Data set (JSON)
options Renderer Options (JSON)
4.4.3. Example
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 Line Chart with brush control</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/d3.tip.v0.6.3.js'></script> <script type='text/javascript' src='renderer/control.brush.multiline.chart.js></script> </head> <body>
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 48
<div id="Container"></div> <script> // 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', reportData:data, options: options });
report.data('customReport').renderReport(); </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.
Tata Consultancy Services Visualization Framework User Guide
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)
‘data’ is mandatory and contains the actual data values to render the chart.
4.5.2. Options
The bullet chart with data driven markers supports the following options.
Table 32: Bullet Chart with Data Driven Markers Customization
Attribute Name Description
width Width of chart
height Height of chart
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"}
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 50
Attribute Name Description
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)
Framework parameters that need to be set are:
Table 33: Bullet Chart Framework Parameters
Parameter Name Value
viewType ‘default’
chartType ‘progressbarchart’
reportData Data set (JSON)
options Renderer Options (JSON)
4.5.3. Example
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 Bullet 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/ renderer/progress.chart.js></script> </head> <body> <div id="Container"></div>
<script> // 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" };
// Visualization framework
var report = $('#Container').customReport({
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 51
viewType:'default', chartType:' progressbarchart', reportData:data, options: options });
report.data('customReport').renderReport(); </script> </body> </html>
Tata Consultancy Services Visualization Framework User Guide
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)
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 53
Renderer CSS Class Description
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
Renderer CSS Class Description
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
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 54
Renderer CSS Class Description
markers Line & Bar chart with control limits
Line chart with brush control
.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
Line chart with brush control
.legendDefault Styles for the bottom legend display
.legendActive Styles for the legend that is active on click (interactive legends)
Line chart with brush control
.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 with data driven markers
Line & Bar chart with control limits
.d3-tip
.d3-tip:after
.d3-tip.n:after
Tooltip related CSS classes for specified charts
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name Description
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);
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name Description
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:
Tata Consultancy Services Visualization Framework User Guide
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.
The API is invoked as:
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
Attribute Name Description
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 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
Tata Consultancy Services Visualization Framework User Guide
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”);
Tata Consultancy Services Visualization Framework User Guide
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).
The API is invoked as:
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.
The API is invoked as:
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
Attribute Name Description
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.
zoomlevel Set the required minimum and maximum zoom levels
zoomlevel:{min:11,max:11}
The icon is redrawn when the map is zoomed in or out but within the min/max zoom level.
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 62
Attribute Name Description
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);
Tata Consultancy Services Visualization Framework User Guide
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]);
Tata Consultancy Services Visualization Framework User Guide
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:
Tata Consultancy Services Visualization Framework User Guide
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
Attribute Name Description
width Width of chart
height Height of chart
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]; });
Tata Consultancy Services Visualization Framework User Guide
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
Parameter Name Value
viewType ‘default’
chartType ‘custom’
reportData Data set
options Renderer Options (JSON)
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}; // Visualization framework var report = $('#Container').customReport({ viewType:'default', chartType:'custom', reportData: data, options: options,
renderer: 'drawCircle' }); report.data('customReport').renderReport(); </script> </body> </html>
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 67
8. Custom Application – Use Case 1
Create a custom application that displays the count of trains running on each track for a given date/time range.
To create the custom application, follow the below steps:
1. Create a metadata model for Train Services (Trains, Tracks and Stations) using the metadata framework.
2. Load data for Trains, Tracks and Stations to the newly created entities using the metadata framework.
3. Create a custom report using visualization library to display Count of Trains running for each Track for a given date/time range.
8.1. Metadata Model
To create metadata model for trains, do the following:
1. Go to the TCS IUX API site http://172.18.129.146:8180/IUX_API/api/.
2. Select Meta-Data Services from the drop down. Click “Explore” and select Metadata service. Click on “Creates a new Metadata Structure in repository” to create metadata model for
trains.
3. Provide a unique structureName. Create the train metadata model and copy to “Input Content” field. The metadata is created.
The train metadata is displayed as shown below:
{ "rootNode": "Train",
Figure 29: Create Metadata Model
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 68
"entity": [ { "entityName": "Train", "entityAttribute": [ {"attributeName": "trainNo", "dataType": "INTEGER", "nullAllowed": "FALSE" }, { "attributeName": "trainName", "dataType": "STRING", "nullAllowed": "FALSE" },{ "attributeName": "routeNo", "dataType": "INTEGER", "nullAllowed": "FALSE" },{ "attributeName": "days", "dataType": "ENTITY", "classRefName": "DaysList", "relationType": "ONE_TO_ONE", "nullAllowed": "FALSE" } ]}, { "entityName": "DaysList", "entityAttribute": [
{ "attributeName": "monday", "dataType": "INTEGER", "nullAllowed": "FALSE" },{ "attributeName": "tuesday", "dataType": "INTEGER", "nullAllowed": "FALSE" },{ "attributeName": "wednesday", "dataType": "INTEGER", "nullAllowed": "FALSE" },{ "attributeName": "thursday", "dataType": "INTEGER", "nullAllowed": "FALSE" },{ "attributeName": "friday", "dataType": "INTEGER", "nullAllowed": "FALSE" },{ "attributeName": "saturday", "dataType": "INTEGER", "nullAllowed": "FALSE" },{ "attributeName": "sunday", "dataType": "INTEGER", "nullAllowed": "FALSE" } ]} ] }
4. Create the metadata for routes as shown below.
{ "rootNode":"Route",
"entity":[ { "entityName": "Route", "entityAttribute": [ { "attributeName": "routeNo", "dataType": "INTEGER", "nullAllowed": "FALSE" }, { "attributeName": "routeName", "dataType": "STRING", "nullAllowed": "FALSE" } ] } ] }
.
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 69
A Train structure sample is as shown below.
Figure 30: Create Metadata for Routes
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 70
A Route structure sample is as shown below.
8.2. Create the Project
To create the project, follow the below steps:
1. Create an empty spring project.
2. Import the required JavaScript, CSS and jars into the project.
The list of files required is as shown below.
control.barwithoutaxis.chart.js control.brush.area.multiline.chart.js control.line.scatterplot.js control.multibar.chart.js control.multiline.chart.js control.simplebar.chart.js custom_report_lib.js d3.js d3.min.js d3.tip.v0.6.3.js draggableLine.js jquery-2.0.3.js leaflet.js new.rectengular.tree.chart.js progress.chart.js projection.chart.js realtimechart.js rectengular.tree.chart.js
barchartwithoutaxis.css chart.theme.css commonFeatures.css controlbrushareamultilinechart.css controllinescatterplot.css multilineplusbarchart.css multilineplusmultiserieslinechart.css progress.chart.css treechart.css
aopalliance-1.0.jar commons-codec-1.6.jar commons-fileupload-1.1.1.jar commons-io-1.1.jar commons-lang3-3.1.jar commons-logging-1.1.3.jar freemarker-2.3.22.jar guice-2.0.jar hamcrest-core-1.3.jar httpclient-4.3.5.jar httpcore-4.3.2.jar jackson-annotations-2.4.0.jar jackson-core-2.4.4.jar jackson-core-asl-1.9.13.jar jackson-databind-2.4.4.jar jackson-mapper-asl-1.9.13.jar javassist-3.18.2-GA.jar javax.servlet.jsp.jstl-1.2.1.jar jcip-annotations-1.0.jar jcl-over-slf4j-1.7.7.jar json-20090211.jar jstl-1.2.jar junit-4.11.jar log4j-1.2.15.jar metrics-core-2.2.0.jar openid4java-nodeps-0.9.6.jar org-apache-commons-logging.jar org.springframework.asm-3.1.2.release.jar org.springframework.beans-3.1.2.RELEASE.jar org.springframework.context-3.1.2.release.jar
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 71
org.springframework.core-3.1.2.release.jar org.springframework.expression-3.1.2.release.jar org.springframework.web-3.1.2.release.jar org.springframework.web.servlet-3.1.2.release.jar postgresql-9.2-1004.jdbc4.jar servlet-api.jar slf4j-api-1.7.10.jar slf4j-simple-1.7.10.jar spring-aop-4.1.0.RELEASE.jar spring-beans-4.1.0.RELEASE.jar spring-context-4.1.0.RELEASE.jar spring-core-4.1.0.RELEASE.jar spring-data-commons-1.8.0.RELEASE.jar spring-expression-4.1.0.RELEASE.jar spring-jdbc-4.1.0.RELEASE.jar spring-orm-4.1.0.RELEASE.jar spring-oxm-4.1.0.RELEASE.jar spring-security-config-3.2.3.RELEASE.jar spring-security-core-3.2.5.RELEASE.jar spring-security-crypto-3.2.3.RELEASE.jar spring-security-oauth2-1.0.5.RELEASE.jar spring-security-openid-3.2.3.RELEASE.jar spring-security-web-3.2.3.RELEASE.jar spring-test-4.1.0.RELEASE.jar spring-tx-4.0.3.RELEASE.jar spring-tx-4.1.0.RELEASE.jar spring-web-4.1.0.RELEASE.jar spring-webmvc-4.1.0.RELEASE.jar VisualizationTransformer-0.0.1-SNAPSHOT.jar
3. Add the jars to the WEB-INF folder of the project.
8.3. Custom Report
Create a jsp page that imports the required javascript and CSS files. Make an ajax call to the TCS IUX 2.2 API to get the data.
$.ajax({
type: "Get",
url:"http://172.18.129.146:8180/MetadataWS/structure/<Structure_Model_Name>/instance?outputFormat=json&", async:true,
success:function(response){
trainData=JSON.parse(response).outputList;
createFinalList();
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 72
}
});
Retrieve the instance of Train Structure, and pass it as a string to the controller via an ajax call.
Inside the controller pass the instances of Train Structure to a function that calls the visualization transformer to transform the input to the visualization format.
The transformer expects two attributes: model and data.
Based on the structure of the model, the visualization transformer converts the data into required format.
The model for train and route data is as shown below.
{
"operation": {
"method": "Aggregate",
"fields": [{
"name": "routeNo",
"type": "int"
}],
"aggFields": [{
"name": "routeNo",
"type": "int"
}],
"key": "dataValue",
"dataFields": [{
"type": "Single",
"source": "trainNo",
"destination": "trainNo",
"dataTye": "int"
}, {
"type": "Single",
"source": "trainName",
"destination": "trainName"
}, {
"type": "Single",
"source": "days",
"destination": "days"
}
] } }
The multibarcontrolchart data comprises of chartconfig, lineData and data. The data to render the multibarcontrolchart is as shown below.
var chartData={"chartConfig":{"x-axis":"routeNo","y-axis":"countTrain",
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 73
"y-axis-order":["monday","tuesday","wednesday","thursday","friday","saturday","sunday"],
"line-order":["line1","line2","line3"]},
"lineData":{"line1":5,"line2":25,"line3":75},
"data":[{"routeNo":"101","countTrain":{"monday":78,"tuesday":12,"wednesday":15,"thursday":63,"friday":10,"saturday":19,"sunday":5}},{"routeNo":"102","countTrain":{"monday":23,"tuesday":25,"wednesday":15,"thursday":25, "friday":52,"saturday":88,"sunday":79}},{"routeNo":"103","countTrain":{"monday":65,"tuesday":55, "wednesday":41,"thursday":68,"friday":35,"saturday":77,"sunday":48}},{"routeNo":"104","countTrain":{"monday":88,"tuesday":25,"wednesday":23,"thursday":25,"friday":35,"saturday":79,"sunday":52}}]}
To render the chart, call the visualization framework as shown below.
var report = $('#container_id').customReport({
viewType:'default',
chartType:'multibarcontrolchart',
reportData:chartData,
reportTitle:{'name':'Train Frequency',
'style':'color:red;font-size:20px;',
'class':'Sample'
},
options: {
"yAxisLable":"Count of Trains",
"xAxisLable":"Routes",
"line":true,
"lineColor":{"line1":"red","line2":"green","line3":"blue"},
"barColor":{"monday":"#92BC2A","tuesday":"#F0C602", "wednesday":"#EB6353","thursday":"#4D72A9", "friday":"#713F72","saturday":"#0896A2","sunday":"#A45802"},
"legendText":{"monday":"Monday","tuesday":"Tuesday", "wednesday":"Wednesday","thursday":"Thursday", "friday":"Friday", "saturday":"Saturday","sunday":"Sunday"},
"lineStrokeStyle":{"line1":"0,0","line2":"2,2","line3":"2,2"},
"linename":{"line1":"Low","line2":"Average","line3":"High"},
"legend":true,
"legendPosition":"bottom",
"width" : 600,
"height" : 500,
"legendheight":13,
"legendwidth":13
}
});
report.data('customReport').renderReport();
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 74
Figure 31: Train Frequency
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 75
9. Custom Application – Use Case 2
Create a custom application that shows the count of buses running on a bus route for a given date/time range. To create the custom application, follow the steps as shown below.
1. Create a jsp page that imports the required JavaScript and CSS files.
2. Make an ajax call to the TCS IUX 2.2 API which returns the instances required to render the bar chart.
3. Retrieve the instances of bus structure, and pass it as a string to the controller via an ajax call.
4. Inside the controller pass the instances of bus structure to a function that calls the visualization transformer to convert the input to the visualization format.
5. The transformer requires two attributes: model and data.
6. Based on the structure of the model, the visualization transformer converts the data into required format.
7. The model used is as shown below.
{
"operation": { "method": "Aggregate", "fields": [{ "name": "calendarMonthName", "type": "String" }], "aggFields": [{ "name": "calendarMonthName", "type": "String" }], "key": "dataValue", "dataFields": [{ "type": "Single", "source": "serviceRootCode", "destination": "serviceRootCode" } ] } }
8. The data for multilinecontrol chart is as shown below.
var chartData={"chartConfig":{"x-axis":"month","y-axis":"countBus","y-axis-order":["102","103","104"],"line-order":["line1","line2","line3"]},
"lineData":{"line1":2,"line2":5,"line3":8},"data":[{"month":"january","countBus":{"102":2,"103":2,"104":3}},{"month":"february","countBus":{"102":1,"103":3,"104":4}},{"month":"march","countBus":{"102":1,"103":2,"104":3}},{"month":"april","countBus":{"102":2,"103":4,"104":3}},{"month":"may","countBus":{"102":3,"103":3,"104":2}},{"month":"june","countBus":{"102":4,"103":3,"104":5}},{"month":"july","countBus":{"102":4,"103":2,"104":4}},{"month":"august","countBus":{"102":4,"103":3,"104":5}},{"month":"september","countBus":{"102":5,"103":3,"104":4}},{"month":"october","countBus":{"102":5,"103":4,"104":3}},{"month":"november","countBus":{"102":6,"103":3,"104":5}},{"month":"december","countBus":{"102":7,"103":2,"104":3}}]}
9. The multilinecontrolchart data comprises of chartconfig, lineData and data. The data to render the
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 76
multilinecontrolchart is as shown below.
var options={"yAxisLable":"Bus Count","xAxisLable":"Month", "line":true,"legend":true,"lineColor":{"line1":"#FF0000","line2":"#01DF3A","line3":"#0000FF"},"barColor":{"102":"#788fb3","103":"#a2be60","104":"#8a698a"},"legendText":{"102":"R102","103":"R103","104":"R104"},"lineStrokeStyle":{"line1":"1,1","line2":"3,3","line3":"2,2"},"linename":{"line1":"Lower","line2":"Middle","line3":"Upper"},"linestrokewidth":2,"targetlinestrokewidth":1,"width":750,"height":350}
var report = $('#line_container_id').customReport({
viewType:'default',
chartType:'multilinecontrolchart',
reportData:chartData,
options: options
});
report.data('customReport').renderReport();
Figure 32: Multicolor Chart
Tata Consultancy Services Visualization Framework User Guide
TCS Confidential 77
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]