Viewpoint 15.11 Charting Update

Teradata Viewpoint is Teradata's strategic and innovative SOV (single operational view) for Teradata DB, Aster, and HDP Hadoop systems management and monitoring that enables Teradata's Unified Data Architecture (UDA).
Teradata Employee

Viewpoint 15.11 Charting Update

Technology Overview

The technologies used in this framework are highly responsive to data manipulation on charts.

The new charting frameworks uses following third-party client side libraries:

  • crossfilter.js - Crossfilter is a Javascript library for exploring large multivariate datasets in the browser.
  • d3.js - D3.js is a JavaScript library for manipulating documents based on data.
  • dc.js - dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset. It leverages d3 engine to render charts in css friendly scalable vector graphics (SVG) format.

These technologies are configured to work with the current Viewpoint Portal. Hammer.js is used to provide support for chart balloons on mobile platforms.

Features Supported

The following scales are supported on both the Axis:

  • X-Axis Linear and Time Scales
  • Y-Axis Linear and Percent Scales

Other basic features like coloring, grid-lines, rendering area, rendering data points, configuring min-max are supported.

The framework is flexible enough to provide native D3 chart object if required, to add special features on D3 charts.

Special features added by viewpoint include:

  • threshold-based coloring
  • area charts (stacked min-avg-max)
  • support for line segment to the last point before the chart start
  • support for partial width first bar
  • support for "off the chart" indicators
  • null values and line graphs with data islands (nulls on either side)
  • custom axis labelling (to support Viewpoint Profile adjust time)
  • detail information balloons
  • NOW line and label

Data for the views can be provided as a Backbone model or as raw data in chartConfig.

A chart by default takes the size of the container in which its rendered. The client for the chartView can also provide 'width' and 'height' options for the chart if it needs to be rendered with specific dimensions.

If the size of chart container changes (resize), the chart needs to be re-rendered to fit the new container size. Whenever new data is available from the server (refresh), the charts will update its crossfilter with new data and re-draw the chart.

Developing with Chart Views

In 15.11, most of the portlets with charts were converted to use our backbone views.  The new chart stack is not implemented in any old style portlets.

There are two ways in which the chart views can be constructed. It can be directly configured as childView or it can be extended to add other views/functionality into that view. If the chart is configured as a childView, then it is the parent view's responsibility to fetch the data and pass it to the chart as a 'chartData' option to the view. When the view is extended, the data is to be fetched by the extending view and can directly use it as its chartData variable.

There are 2 categores of charts, simple dc-based charts with 1 series and no thresholds can use the streamlined barChartView or lineChartView.

Charts with multiple series or with thresholds need to use the more involved compositeChartView.js, which uses an array of sub-charts.

Chart configuration options are documented in baseChartView.js.

Tags (2)