Configuring the Scatter Area Series (igDataChart)

Topic Overview

Purpose

This topic provides information on how to use the Scatter Area Series element in the igDataChart control.

Required background

You should be familiar with the following topics before continuing:

• Adding igDataChart: This topic demonstrates how to add the igDataChart™ control to a page and bind it to data.

• Binding igDataChart to Data: This topic explains how to bind the igDataChart™ control to various data sources (JavaScript array, IQueryable<T>, web service).

In this topic

This topic contains the following sections:

• Overview
  • Preview
• Data Requirements
• Data Binding
• Color Scale
• Example
• Related Content
  • Topics

Overview

In the igDataChart control, the Scatter Area Series draws a colored surface based on a triangulation of X and Y data with a numeric value assigned to each point.

This type of series is useful for rendering heat maps, magnetic field strength or wifi strength in an office. The Scatter Area Series works a lot like the Scatter Contour Series except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values.

Preview

The following is a preview of the igDataChart_ control with a Scatter Area Series that is plotting 3D surface data where the Z axis is rendered as color changes across the surface. Lower Z values are in blue and higher values are in red.

Data Requirements

Similar to other types of series in the igDataChart control, the Scatter Area Series has the dataSource option for the purpose of data binding. This option can be set to an array and each item in this array must have two data columns that store point locations (one for X and one for Y). These data columns are then mapped to the xMemberPath and yMemberPath options. The data must also have one data column that stores a value for each point. This value is used by the series to color the surface. This value column is mapped to the colorMemberPath option.

Data Binding

The following table summarizes options of Scatter Area Series used for data binding.

Color Scale

Use the colorScale option of the Scatter Area Series to resolve values of points and thus fill the surface of the series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes.

The following table list properties of the colorScale affecting surface coloring of the Scatter Area Series.

Example

The following code shows how to bind the Scatter Area Series to data.

var data = [
    { x: 0, y: 0, z: 2 },
    { x: 10, y: 0, z: 3 },
    { x: 10, y: 10, z: 5 },
    { x: 0, y: 10, z: 1 }];

$("#chart").igDataChart({
    width: "400px",
    height: "400px",
    axes: [{
        name: "xAxis",
        type: "numericX",
    }, {
        name: "yAxis",
        type: "numericY",
    }],
    series: [{
        name: "polygonSeries",
        type: "scatterArea",
        dataSource: data,
        xAxis: "xAxis",
        yAxis: "yAxis",
        xMemberPath: "x",
        yMemberPath: "y",
        colorMemberPath: "z",
        colorScale: {
            palette: [ "green", "yellow", "red" ],
            interpolationMode: "interpolateRGB",
        }
    }],
});

This code generates the following result:

Related Content

Topics

• Configuring Triangulation Series: This topic provides an overview for configuring the scatter area and contour series in the igDataChart control.

• Configuring the Scatter Contour Series: This topic explains how to configure the Scatter Contour Series for the igDataChart control.