Version

Overview (igDataChart)

Purpose

This topic provides conceptual information about the igDataChart™ control including its main features, minimum requirements for using charts and user functionality.

Required Background

The following table lists the materials required as a prerequisite to understanding this topic.

Concepts

  • Charting
  • Chart types
  • Data visualization

Topics

General information on the Ignite UI™ library.

In This Topic

This topic contains the following sections:

Introduction

Introduction to the igDataChart

The igDataChart is a charting control for rendering various kinds of charts into HTML5 Web applications and sites. It uses the new Canvas tag in HTML5 to plot data series on web pages.

The igDataChart control allows many different series types to be rendered like bar/column, financial, category (line, spline, are, etc.), polar, radial, scatter (scatter and scatter line) and others. A chart can be configured with one or more legends which mark the meaning of each data series. In addition other visual and user interaction elements can be configured like cross-hairs, the overview plus detail (OPD) panel, axis major/minor lines, axis range and others. For details see the Main Features section.

Supported Chart Types

Supported chart types summary

The igDataChart control allows for a variety of series types to be implemented for different visualization purposes.

See the Supported chart types table block for detailed information on supported series types and basic configuration information.

Note: Pie charts are created using a separate control, igPieChart™. For details, see igPieChart Overview.

Supported chart types table

The following table displays the supported chart types.

Chart type Series type Description Series.type property setting Data binding properties
Bar and Column Bar Visualizes categorized data with horizontal bars. bar valueMemberPath
Column Visualizes categorized data with vertical columns. column valueMemberPath
Category Line Visualizes categorized data with a line with sharp edges on data points. line valueMemberPath
Area Visualizes categorized data with colored area below a line with sharp edges on data points. area valueMemberPath
Spline Visualizes categorized data with a line with smooth edges on data points. spline valueMemberPath
Spline Area Visualizes categorized data with colored area below a line with smooth edges on data points. splineArea valueMemberPath
Waterfall Visualizes categorized data with vertical columns where the first column for the first category starts from the x-axis and each next category starts where the previous one ends. waterfall valueMemberPath
Financial Candlestick Displays opening, closing, highest and lowest value of a financial (investment) instrument in the form of a candlestick. candlestick
OHLC Abbreviation for Open, High, Low, Close. Displays opening, closing, highest and lowest value of a financial (investment) instrument in the form of vertical lines with markings for opening and closing values. ohlc
Polar Polar Scatter Visualizes data with dots (or other types of markers) in a polar coordinate system. polarScatter
Polar Line Visualizes data with a line with sharp edges on data points in a polar coordinate system. polarLine
Polar Area Visualizes data with colored area below a line with sharp edges on data points in a polar coordinate system. polarArea
Radial Radial Line Visualizes categorized data with a line with sharp edges on data points with all categories distributed in a circle. radialLine valueMemberPath
Radial Column Visualizes categorized data with columns starting from a common center and turned on different angles. radialColumn valueMemberPath
Radial Pie Visualizes categorized data with pie-slice shaped elements starting from a common center and turned on different angles. radialPie valueMemberPath
Range Category Range Area Visualizes categorized data in ranges between two values with colored area between two lines with sharp edges on data points. rangeArea
Range Column Visualizes categorized data in ranges between two values with columns. rangeColumn
Bubble Bubble Visualizes data described by multiple parameters with colored circles with different diameter. bubble
Scatter Scatter Visualizes data with dots in Cartesian coordinate system. scatter
Scatter Line Visualizes data with a line with sharp edges on data points in Cartesian coordinate system. scatterLine

Minimum Requirements

Minimum requirements summary

The igDataChart control is a jQuery UI widget and therefore depends on the jQuery and jQuery UI libraries. The Modernzr library is also used internally for detecting browser and device capabilities. The control uses several Ignite UI™ shared resources for functionality and data binding. References to these resources are needed nevertheless, in spite of pure jQuery or ASP.NET MVC helpers being used. The Infragistics.Web.Mvc assembly is required when the control is used in the context of ASP.NET MVC.

Minimum requirements summary chart

The following table summarizes the requirements for using the igDataChart control.

Requirement Description
HTML5 canvas API The functionality of the charting library is based on the HTML5 Canvas tag and its related API. Any web browser that supports these will be able to render and display charts generated by the igDataChart control. No other HTML5 features are required for the operation of the igDataChart control. The topic Canvas Element: Support from Wikipedia™ details which versions of the most popular desktop and mobile web browsers support the HTML5 Canvas API.
jQuery and jQuery UI JavaScript resources Ignite UI is built on top of these frameworks:
Modernizr The Modernizr library is used by the igDataChart to detect browser and device capabilities. It is not mandatory and if not included the control will behave as if it works in a normal desktop environment with HTML5 compatible browser.
General charting JavaScript resources The charting functionality of the Ignite UI library is distributed across several files depending on the series type. In case you wish to include resources manually, you need to use the dependencies listed in the following tables.
JS Resource Description
infragistics.util.js
infragistics.util.jquery.js
Ignite UI utilities
infragistics.datasource.js The igDataSource control.
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_jquerydom.js
infragistics.dv_core.js
infragistics.dv_geometry.js
infragistics.datachart_core.js
Data visualization core functionality
infragistics.dvcommonwidget.js Chart and map common widget
infragistics.ui.chart.js Chart UI widget
infragistics.legend.js
infragistics.ui.chartlegend.js
Chart legend functionality and UI widget
infragistics.dv_opd.js Chart Overview Plus Detail Pane functionality
infragistics.ui.widget.js Base igWidget for all Ignite UI widgets.
Chart-type-specific JavaScript resources In addition to the general charting resources listed above, you need to include references related to the respective chart type in use.
Chart Series Type JS Resource
Common category functionality infragistics.datachart_categorycore.js
Area, Column, Line, all Spline charts, Waterfall infragistics.datachart_category.js
Bar infragistics.datachart_verticalcategory.js
Financial, Typical Price Indicator infragistics.datachart_financial.js
infragistics.datachart_extendedfinancial.js
Polar Area, Polar Line, all Polar charts infragistics.datachart_polar.js (dendends on: infragistics.datachart_extendedaxes.js)
all Radial charts infragistics.datachart_radial.js (dendends on: infragistics.datachart_extendedaxes.js)
all Range charts infragistics.datachart_rangecategory.js
all Scatter charts infragistics.datachart_scatter.js
all Stacked charts infragistics.datachart_stacked.js (dendends on: infragistics.datachart_verticalcategory.js, infragistics.datachart_extendedaxes.js)
Tooltips, highlights, and other annotations infragistics.datachart_annotation.js
DateTimeAxis / TimeAxis infragistics.datachart_extendedaxes.js
IG theme This theme contains custom visual styles created for the Ignite UI library. It is contained in the following file:
  • {IG CSS root}/themes/Infragistics/infragistics.theme.css
Chart structure This CSS resource is used by the charting components for rendering different elements of the controls:
  • {IG CSS root}/structure/modules/infragistics.ui.chart.css

Note:To learn about the different ways to reference JavaScript resources in Ignite UI, see the Using JavaScript Resources in Ignite UI topic.

Main Features

Features Overview

The following table summarizes the main features of the igDataChart control. Additional details are available after following the summary table.

Feature Description
Series type selection A chart can render multiple different series types (see Composite charts ) and the series type is determined by the type option of each series object. Depending on the series type different types of x- and y-axes must be selected, and different data binding options must be set.
Composite charts Composite charts have multiple series of different type or multiple y-axes with different range.
Legend A chart can have a legend configured to display the title of every data series visualized.
Navigation Interactive features like drag-to-zoom, drag-to-pan, and the Overview Plus Detail (OPD) panel allow easy magnification on details and navigation across different areas of a chart.
Axes An initial range can be defined on every axis and later the range can be changed at runtime by user interaction with external controls. Additionally, there are configurable axis labels, axis lines, major and minor lines, and axis stripes.
Tooltips Tooltips can be displayed by hovering over the chart. Tooltips are based on templates that define the concrete structure and data displayed in the tooltip.
Cross-hairs Cross-hairs follow the movement of the mouse pointer on the chart and designate the location of the tip of the mouse pointer by two lines crossed at right angle.
Markers Different markers can be used to designate data points on the charts. These markers can be of various type like triangle, diamond, square, etc.
Trend Lines Various data series allow trend line for the depicted data to be calculated and displayed by the control. Trend lines allow a trend or similarity with known mathematical functions to be visually identified in the visualized data.

Legend

The legend is a visual panel that shows an icon and a title for each data series in the chart.

Legends are implemented with a separate control from the Ignite UI library called igChartLegend and require a separate div element on the page. The div element is referred in each series object so that it is included in the legend. The igChartLegend is a very simple control covered in the topic referred below.

Composite charts

A chart can combine multiple series of different type or have series with different y-axis range. That means that two data series can be depicted by two different graphs like bars and lines, for example, or data in different range of values can be depicted on the same chart.

On the picture below a composite chart combining column and line category series is shown where the columns represent individual values and the line shows the sum of these values and having the form of a line it implies a trend.

Navigation

Navigation in a chart is possible with the help of zooming, panning, and the Overview Plus Detail (OPD) window. Zooming is done by mouse scroll or by dragging a rectangle over an area that you want to magnify. Panning is done by dragging with the mouse when the chart is zoomed in.

The OPD window is a separate navigation tool. It is a smaller image of the chart with the active view marked so that the user can figure out where in the chart sits the active view.

The OPD window is that can be configured to appear by default or switched on by API method and serves to display. Since both zooming and panning rely on a drag action, i.e. holding mouse button down and moving the mouse, it is configurable what the default drag action will do and what modifier key (Ctrl, Alt, Shift) will be used for alternative drag actions.

Axes

Axes are a key feature of all charts and they have a variety of settings. The range of every axis can be defined and changed by API call and define the range of values displayed by the chart in the active view. Besides the main axis lines charts also can display titles for key values, major and minor gridlines, and axis stripes that make easier to differentiate between areas on the chart.

You can see the axis elements in the figure below:

Legend:

  1. Axis line
  2. Axis label
  3. Minor line
  4. Major line
  5. Axis stripe

Tooltips

Tooltips are small panels that appear on the current mouse position and display information predefined in a tooltip template. Usually that is the numeric value depicted on the chart on the particular point and/or some other related information.

Tooltip templates can be defined in HTML script tags of the “text/x-jquery-tmpl” type or can be just strings with HTML markup. Tooltips essentially define HTML markup with parameters that is to be rendered on screen. Values to be substituted are defined with the jQuery templating syntax, e.g.${item.Price}.

Cross-hairs

Cross-hairs are two lines crossed at right angle that are displayed on the current mouse position when the mouse pointer is over the chart. Crosshairs can help visually align data in the chart series with the equivalent position on the associated axes.

On the figure below you can see the cross-hairs lines marked with two double-headed red arrows.

Markers

Markers are small figures that are displayed for each data point in the data series. There are a plenty of marker types available like circle, triangle, diamond, pyramid, square, pentagon, hexagon, etc.

On the figure below you can see a chart with circle markers (some markers are designated by red arrows).

Related Topics:

Trend Lines

Trend lines allow a trend or similarity with known mathematical functions to be visually identified in the visualized data. This allows characteristics of the data to be identified like “this system is linear”, or “this value grows exponentially”. Trend lines are usually applied to financial and category data series.

On the picture below you can see a line category series with a trend line of the “quintic fit” type which indicates how closely the data matches a quintic function (a polynomial of degree five).

User Interaction and Usability

User interactions summary

The following table summarizes the user interaction capabilities of the igDataChart control. Additional details are available in the topics referred in the Configurable? column.

The user can… Using… Configurable?
Zoom
  • Drag
  • Mouse scroll
  • Dual tap
Pan
  • Drag
  • Ctrl/Alt/Shift + Drag
Navigate OPD window
Hover Mouse hover
Switch On/Off axis lines External checkbox
Switch On/Off axis major and minor lines External checkbox
Switch On/Off axis stripes External checkbox
Switch On/Off axis labels External checkbox
Switch On/Off data series External checkbox
Switch On/Off legend External checkbox
Switch On/Off markers External checkbox

Related Content

Topics

The following topics provide additional information related to this topic.

Contains basic information about the related igPieChart control for displaying pie charts in web pages.

Samples

The following samples provide additional information related to this topic.

  • JSON Binding: This sample shows how the igDataChart binds to JSON data.

  • Bar and Column Series: Demonstrates how bar and column charts can be implemented using the igDataChart control.

  • Chart Navigation: Demonstrates user interaction with a chart including zoom, panning, dragging, and how these can be controlled from the API.

  • Binding Real-Time Data: Demonstrates how real-time data can by dynamically bound to a data chart.

View on GitHub