Web Components Scatter Charts
The Ignite UI for Web Components Scatter Chart belongs to a group of charts that show the relationship among items in distinct series of data or to plot data items using numeric x and y coordinates. These charts draw attention to uneven intervals or clusters of data. They are often used to plot scientific data, and can highlight the deviation of collected data from predicted results. Also, you can use them to organize data chronologically (even if the data is not in chronological order).
Web Components Scatter Marker Chart
Web Components Scatter Marker Chart renders as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterSeriesComponent, as shown in the example below:
export class CountryDemographicAfricanItem {
public constructor(init: Partial<CountryDemographicAfricanItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicAfrican extends Array<CountryDemographicAfricanItem> {
public constructor(items: Array<CountryDemographicAfricanItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicAfricanItem(
{
population: 39728000,
birthRate: 23.9,
deathRate: 4.77,
name: `Algeria`
}),
new CountryDemographicAfricanItem(
{
population: 27884000,
birthRate: 42.32,
deathRate: 8.68,
name: `Angola`
}),
new CountryDemographicAfricanItem(
{
population: 10576000,
birthRate: 37.43,
deathRate: 9.32,
name: `Benin`
}),
new CountryDemographicAfricanItem(
{
population: 2121000,
birthRate: 24.14,
deathRate: 7.02,
name: `Botswana`
}),
new CountryDemographicAfricanItem(
{
population: 18111000,
birthRate: 39.44,
deathRate: 8.82,
name: `Burkina Faso`
}),
new CountryDemographicAfricanItem(
{
population: 10160000,
birthRate: 42.66,
deathRate: 11.03,
name: `Burundi`
}),
new CountryDemographicAfricanItem(
{
population: 23298000,
birthRate: 36.84,
deathRate: 10.35,
name: `Cameroon`
}),
new CountryDemographicAfricanItem(
{
population: 525000,
birthRate: 21.14,
deathRate: 5.61,
name: `Cape Verde`
}),
new CountryDemographicAfricanItem(
{
population: 4493000,
birthRate: 36.11,
deathRate: 14.01,
name: `C.A.R.`
}),
new CountryDemographicAfricanItem(
{
population: 14111000,
birthRate: 43.86,
deathRate: 13.22,
name: `Chad`
}),
new CountryDemographicAfricanItem(
{
population: 777000,
birthRate: 33.33,
deathRate: 7.49,
name: `Comoros`
}),
new CountryDemographicAfricanItem(
{
population: 4856000,
birthRate: 35.23,
deathRate: 7.56,
name: `Congo`
}),
new CountryDemographicAfricanItem(
{
population: 23226000,
birthRate: 37.1,
deathRate: 12.54,
name: `Cote Ivoire`
}),
new CountryDemographicAfricanItem(
{
population: 76245000,
birthRate: 42.81,
deathRate: 10.19,
name: `DCongo`
}),
new CountryDemographicAfricanItem(
{
population: 914000,
birthRate: 23.35,
deathRate: 8.37,
name: `Djibouti`
}),
new CountryDemographicAfricanItem(
{
population: 92443000,
birthRate: 27.2,
deathRate: 5.96,
name: `Egypt`
}),
new CountryDemographicAfricanItem(
{
population: 1169000,
birthRate: 34.64,
deathRate: 10.34,
name: `Equatorial Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 3343000,
birthRate: 32.83,
deathRate: 7.07,
name: `Eritrea`
}),
new CountryDemographicAfricanItem(
{
population: 100835000,
birthRate: 32.3,
deathRate: 7,
name: `Ethiopia`
}),
new CountryDemographicAfricanItem(
{
population: 1948000,
birthRate: 30.09,
deathRate: 7.82,
name: `Gabon`
}),
new CountryDemographicAfricanItem(
{
population: 2086000,
birthRate: 39.99,
deathRate: 8.2,
name: `Gambia`
}),
new CountryDemographicAfricanItem(
{
population: 27849000,
birthRate: 31.56,
deathRate: 8.31,
name: `Ghana`
}),
new CountryDemographicAfricanItem(
{
population: 11432000,
birthRate: 36.36,
deathRate: 9.58,
name: `Guinea`
}),
new CountryDemographicAfricanItem(
{
population: 1737000,
birthRate: 37.15,
deathRate: 10.78,
name: `Guinea-Bissau`
}),
new CountryDemographicAfricanItem(
{
population: 47878000,
birthRate: 31.78,
deathRate: 5.84,
name: `Kenya`
}),
new CountryDemographicAfricanItem(
{
population: 2059000,
birthRate: 28.16,
deathRate: 12.92,
name: `Lesotho`
}),
new CountryDemographicAfricanItem(
{
population: 4472000,
birthRate: 34.72,
deathRate: 8.12,
name: `Liberia`
}),
new CountryDemographicAfricanItem(
{
population: 6418000,
birthRate: 20.19,
deathRate: 5.2,
name: `Libya`
}),
new CountryDemographicAfricanItem(
{
population: 24234000,
birthRate: 33.4,
deathRate: 6.48,
name: `Madagascar`
}),
new CountryDemographicAfricanItem(
{
population: 16745000,
birthRate: 37.05,
deathRate: 7.5,
name: `Malawi`
}),
new CountryDemographicAfricanItem(
{
population: 17439000,
birthRate: 43.22,
deathRate: 10.67,
name: `Mali`
}),
new CountryDemographicAfricanItem(
{
population: 4046000,
birthRate: 34.57,
deathRate: 7.96,
name: `Mauritania`
}),
new CountryDemographicAfricanItem(
{
population: 1259000,
birthRate: 10.1,
deathRate: 7.7,
name: `Mauritius`
}),
new CountryDemographicAfricanItem(
{
population: 34664000,
birthRate: 20.4,
deathRate: 5.15,
name: `Morocco`
}),
new CountryDemographicAfricanItem(
{
population: 27042000,
birthRate: 39.36,
deathRate: 10.38,
name: `Mozambique`
}),
new CountryDemographicAfricanItem(
{
population: 2315000,
birthRate: 29.59,
deathRate: 7.46,
name: `Namibia`
}),
new CountryDemographicAfricanItem(
{
population: 20002000,
birthRate: 48.44,
deathRate: 9.94,
name: `Niger`
}),
new CountryDemographicAfricanItem(
{
population: 181136992,
birthRate: 39.37,
deathRate: 12.77,
name: `Nigeria`
}),
new CountryDemographicAfricanItem(
{
population: 11369000,
birthRate: 31.79,
deathRate: 6.13,
name: `Rwanda`
}),
new CountryDemographicAfricanItem(
{
population: 199000,
birthRate: 34.33,
deathRate: 6.81,
name: `Sao Tome and Principe`
}),
new CountryDemographicAfricanItem(
{
population: 14578000,
birthRate: 36.21,
deathRate: 6.07,
name: `Senegal`
}),
new CountryDemographicAfricanItem(
{
population: 95000,
birthRate: 17,
deathRate: 7.5,
name: `Seychelles`
}),
new CountryDemographicAfricanItem(
{
population: 7172000,
birthRate: 35.61,
deathRate: 13.03,
name: `Sierra Leone`
}),
new CountryDemographicAfricanItem(
{
population: 13797000,
birthRate: 43.66,
deathRate: 11.63,
name: `Somalia`
}),
new CountryDemographicAfricanItem(
{
population: 55386000,
birthRate: 21.3,
deathRate: 10.1,
name: `South Africa`
}),
new CountryDemographicAfricanItem(
{
population: 10716000,
birthRate: 36.32,
deathRate: 11.24,
name: `South Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 38903000,
birthRate: 33.32,
deathRate: 7.52,
name: `Sudan`
}),
new CountryDemographicAfricanItem(
{
population: 1104000,
birthRate: 29.27,
deathRate: 9.86,
name: `Swaziland`
}),
new CountryDemographicAfricanItem(
{
population: 51483000,
birthRate: 38.64,
deathRate: 7.02,
name: `Tanzania`
}),
new CountryDemographicAfricanItem(
{
population: 7323000,
birthRate: 34.53,
deathRate: 8.83,
name: `Togo`
}),
new CountryDemographicAfricanItem(
{
population: 11180000,
birthRate: 18.65,
deathRate: 6.36,
name: `Tunisia`
}),
new CountryDemographicAfricanItem(
{
population: 38225000,
birthRate: 42.63,
deathRate: 8.87,
name: `Uganda`
}),
new CountryDemographicAfricanItem(
{
population: 15879000,
birthRate: 38.44,
deathRate: 8,
name: `Zambia`
}),
new CountryDemographicAfricanItem(
{
population: 13815000,
birthRate: 33.94,
deathRate: 8.4,
name: `Zimbabwe`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class CountryDemographicEuropeItem {
public constructor(init: Partial<CountryDemographicEuropeItem>) {
Object.assign(this, init);
}
public population: number;
public birthRate: number;
public deathRate: number;
public name: string;
}
export class CountryDemographicEurope extends Array<CountryDemographicEuropeItem> {
public constructor(items: Array<CountryDemographicEuropeItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new CountryDemographicEuropeItem(
{
population: 2891000,
birthRate: 11.88,
deathRate: 7.22,
name: `Albania`
}),
new CountryDemographicEuropeItem(
{
population: 8679000,
birthRate: 9.8,
deathRate: 9.6,
name: `Austria`
}),
new CountryDemographicEuropeItem(
{
population: 9439000,
birthRate: 12.5,
deathRate: 12.6,
name: `Belarus`
}),
new CountryDemographicEuropeItem(
{
population: 11288000,
birthRate: 10.8,
deathRate: 9.8,
name: `Belgium`
}),
new CountryDemographicEuropeItem(
{
population: 3429000,
birthRate: 9.12,
deathRate: 10.89,
name: `Bosnia`
}),
new CountryDemographicEuropeItem(
{
population: 7200000,
birthRate: 9.2,
deathRate: 15.3,
name: `Bulgaria`
}),
new CountryDemographicEuropeItem(
{
population: 165000,
birthRate: 9.39,
deathRate: 8.97,
name: `Channel Islands`
}),
new CountryDemographicEuropeItem(
{
population: 4233000,
birthRate: 8.9,
deathRate: 12.9,
name: `Croatia`
}),
new CountryDemographicEuropeItem(
{
population: 1161000,
birthRate: 10.98,
deathRate: 6.84,
name: `Cyprus`
}),
new CountryDemographicEuropeItem(
{
population: 10601000,
birthRate: 10.5,
deathRate: 10.5,
name: `Czechia`
}),
new CountryDemographicEuropeItem(
{
population: 5689000,
birthRate: 10.2,
deathRate: 9.2,
name: `Denmark`
}),
new CountryDemographicEuropeItem(
{
population: 1315000,
birthRate: 10.6,
deathRate: 11.6,
name: `Estonia`
}),
new CountryDemographicEuropeItem(
{
population: 48000,
birthRate: 12.4,
deathRate: 7.7,
name: `Faeroe Islands`
}),
new CountryDemographicEuropeItem(
{
population: 5481000,
birthRate: 10.1,
deathRate: 9.6,
name: `Finland`
}),
new CountryDemographicEuropeItem(
{
population: 64453000,
birthRate: 12,
deathRate: 8.9,
name: `France`
}),
new CountryDemographicEuropeItem(
{
population: 81787000,
birthRate: 9,
deathRate: 11.3,
name: `Germany`
}),
new CountryDemographicEuropeItem(
{
population: 10660000,
birthRate: 8.5,
deathRate: 11.2,
name: `Greece`
}),
new CountryDemographicEuropeItem(
{
population: 9778000,
birthRate: 9.4,
deathRate: 13.4,
name: `Hungary`
}),
new CountryDemographicEuropeItem(
{
population: 330000,
birthRate: 12.5,
deathRate: 6.6,
name: `Iceland`
}),
new CountryDemographicEuropeItem(
{
population: 4652000,
birthRate: 14.1,
deathRate: 6.5,
name: `Ireland`
}),
new CountryDemographicEuropeItem(
{
population: 60578000,
birthRate: 8,
deathRate: 10.7,
name: `Italy`
}),
new CountryDemographicEuropeItem(
{
population: 1998000,
birthRate: 11.1,
deathRate: 14.4,
name: `Latvia`
}),
new CountryDemographicEuropeItem(
{
population: 37000,
birthRate: 8.7,
deathRate: 6.7,
name: `Liechtenstein`
}),
new CountryDemographicEuropeItem(
{
population: 2932000,
birthRate: 10.8,
deathRate: 14.4,
name: `Lithuania`
}),
new CountryDemographicEuropeItem(
{
population: 567000,
birthRate: 10.7,
deathRate: 7,
name: `Luxembourg`
}),
new CountryDemographicEuropeItem(
{
population: 2079000,
birthRate: 11.3,
deathRate: 9.75,
name: `Macedonia`
}),
new CountryDemographicEuropeItem(
{
population: 434000,
birthRate: 10,
deathRate: 8,
name: `Malta`
}),
new CountryDemographicEuropeItem(
{
population: 4071000,
birthRate: 10.52,
deathRate: 11.42,
name: `Moldova`
}),
new CountryDemographicEuropeItem(
{
population: 38000,
birthRate: 8.1,
deathRate: 7.6,
name: `Monaco`
}),
new CountryDemographicEuropeItem(
{
population: 627000,
birthRate: 11.52,
deathRate: 9.8,
name: `Montenegro`
}),
new CountryDemographicEuropeItem(
{
population: 16938000,
birthRate: 10.1,
deathRate: 8.7,
name: `Netherlands`
}),
new CountryDemographicEuropeItem(
{
population: 5200000,
birthRate: 11.3,
deathRate: 7.8,
name: `Norway`
}),
new CountryDemographicEuropeItem(
{
population: 38034000,
birthRate: 9.7,
deathRate: 10.4,
name: `Poland`
}),
new CountryDemographicEuropeItem(
{
population: 10368000,
birthRate: 8.3,
deathRate: 10.5,
name: `Portugal`
}),
new CountryDemographicEuropeItem(
{
population: 19925000,
birthRate: 10,
deathRate: 13.2,
name: `Romania`
}),
new CountryDemographicEuropeItem(
{
population: 144984992,
birthRate: 13.3,
deathRate: 13,
name: `Russia`
}),
new CountryDemographicEuropeItem(
{
population: 33000,
birthRate: 8.2,
deathRate: 7.1,
name: `San Marino`
}),
new CountryDemographicEuropeItem(
{
population: 8877000,
birthRate: 9.3,
deathRate: 14.6,
name: `Serbia`
}),
new CountryDemographicEuropeItem(
{
population: 5436000,
birthRate: 10.3,
deathRate: 9.9,
name: `Slovakia`
}),
new CountryDemographicEuropeItem(
{
population: 2071000,
birthRate: 10,
deathRate: 9.6,
name: `Slovenia`
}),
new CountryDemographicEuropeItem(
{
population: 46672000,
birthRate: 9,
deathRate: 9.1,
name: `Spain`
}),
new CountryDemographicEuropeItem(
{
population: 9765000,
birthRate: 11.7,
deathRate: 9.3,
name: `Sweden`
}),
new CountryDemographicEuropeItem(
{
population: 8297000,
birthRate: 10.5,
deathRate: 8.2,
name: `Switzerland`
}),
new CountryDemographicEuropeItem(
{
population: 44922000,
birthRate: 10.7,
deathRate: 14.9,
name: `Ukraine`
}),
new CountryDemographicEuropeItem(
{
population: 65860000,
birthRate: 11.9,
deathRate: 9.2,
name: `United Kingdom`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSeriesComponent } from 'igniteui-webcomponents-charts';
import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private scatterSeries1: IgcScatterSeriesComponent
private scatterSeries2: IgcScatterSeriesComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var scatterSeries1 = this.scatterSeries1 = document.getElementById('scatterSeries1') as IgcScatterSeriesComponent;
var scatterSeries2 = this.scatterSeries2 = document.getElementById('scatterSeries2') as IgcScatterSeriesComponent;
this._bind = () => {
chart.legend = this.legend;
scatterSeries1.xAxis = this.xAxis;
scatterSeries1.yAxis = this.yAxis;
scatterSeries1.dataSource = this.countryDemographicEurope;
scatterSeries2.xAxis = this.xAxis;
scatterSeries2.yAxis = this.yAxis;
scatterSeries2.dataSource = this.countryDemographicAfrican;
}
this._bind();
}
private _countryDemographicEurope: CountryDemographicEurope = null;
public get countryDemographicEurope(): CountryDemographicEurope {
if (this._countryDemographicEurope == null)
{
this._countryDemographicEurope = new CountryDemographicEurope();
}
return this._countryDemographicEurope;
}
private _countryDemographicAfrican: CountryDemographicAfrican = null;
public get countryDemographicAfrican(): CountryDemographicAfrican {
if (this._countryDemographicAfrican == null)
{
this._countryDemographicAfrican = new CountryDemographicAfrican();
}
return this._countryDemographicAfrican;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Population Statistics for Selected Continents
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Death Rate (per 1,000 people)"
minimum-value="5"
maximum-value="15">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Birth Rate (per 1,000 people)"
minimum-value="0"
maximum-value="50"
interval="10">
</igc-numeric-y-axis>
<igc-scatter-series
name="scatterSeries1"
id="scatterSeries1"
title="Europe"
x-member-path="deathRate"
y-member-path="birthRate"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-series>
<igc-scatter-series
name="scatterSeries2"
id="scatterSeries2"
title="Africa"
x-member-path="deathRate"
y-member-path="birthRate"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Web Components Scatter Line Chart
Web Components Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterLineSeriesComponent, as shown in the example below:
export class HealthDataForFranceItem {
public constructor(init: Partial<HealthDataForFranceItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForFrance extends Array<HealthDataForFranceItem> {
public constructor(items: Array<HealthDataForFranceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForFranceItem(
{
year: 1985,
healthExpense: 2025.98,
lifeExpectancy: 75.92,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1986,
healthExpense: 2075.21,
lifeExpectancy: 76.24,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1987,
healthExpense: 2140.51,
lifeExpectancy: 76.08,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1988,
healthExpense: 2119.07,
lifeExpectancy: 76.22,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1989,
healthExpense: 2112.67,
lifeExpectancy: 76.5,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1990,
healthExpense: 2519.81,
lifeExpectancy: 76.54,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1991,
healthExpense: 2660.33,
lifeExpectancy: 76.98,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1992,
healthExpense: 2737.93,
lifeExpectancy: 77.18,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1993,
healthExpense: 2761.36,
lifeExpectancy: 77.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1994,
healthExpense: 2800.17,
lifeExpectancy: 77.69,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1995,
healthExpense: 2863.39,
lifeExpectancy: 77.74,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1996,
healthExpense: 3034.79,
lifeExpectancy: 78.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1997,
healthExpense: 3426.25,
lifeExpectancy: 78.14,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1998,
healthExpense: 3639.47,
lifeExpectancy: 78.33,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1999,
healthExpense: 3826.04,
lifeExpectancy: 78.28,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2000,
healthExpense: 4003.97,
lifeExpectancy: 78.63,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2001,
healthExpense: 4139.3,
lifeExpectancy: 78.79,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2002,
healthExpense: 4504.06,
lifeExpectancy: 78.99,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2003,
healthExpense: 4633.59,
lifeExpectancy: 79.39,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2004,
healthExpense: 4734.15,
lifeExpectancy: 79.84,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2005,
healthExpense: 4822.75,
lifeExpectancy: 80.04,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2006,
healthExpense: 4846.36,
lifeExpectancy: 80.34,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2007,
healthExpense: 4965.14,
lifeExpectancy: 80.4,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2008,
healthExpense: 5149.6,
lifeExpectancy: 80.59,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2009,
healthExpense: 5254.08,
lifeExpectancy: 80.8,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2010,
healthExpense: 5240.42,
lifeExpectancy: 81,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2011,
healthExpense: 5387.98,
lifeExpectancy: 81.3,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2012,
healthExpense: 5499.09,
lifeExpectancy: 81.45,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2013,
healthExpense: 5557.2,
lifeExpectancy: 81.75,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2014,
healthExpense: 5730.16,
lifeExpectancy: 82.1,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2015,
healthExpense: 5926.44,
lifeExpectancy: 82.3,
name: `Norway`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class HealthDataForGermanyItem {
public constructor(init: Partial<HealthDataForGermanyItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForGermany extends Array<HealthDataForGermanyItem> {
public constructor(items: Array<HealthDataForGermanyItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForGermanyItem(
{
year: 1985,
healthExpense: 2579.64,
lifeExpectancy: 74.05,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1986,
healthExpense: 2603.94,
lifeExpectancy: 74.31,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1987,
healthExpense: 2668.49,
lifeExpectancy: 74.56,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1988,
healthExpense: 2812.94,
lifeExpectancy: 74.79,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1989,
healthExpense: 2689.51,
lifeExpectancy: 75.01,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1990,
healthExpense: 2774.68,
lifeExpectancy: 75.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1992,
healthExpense: 2909.85,
lifeExpectancy: 75.82,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1993,
healthExpense: 2853.09,
lifeExpectancy: 75.87,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1994,
healthExpense: 2989.64,
lifeExpectancy: 76.27,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1995,
healthExpense: 3122.13,
lifeExpectancy: 76.42,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1996,
healthExpense: 3241.89,
lifeExpectancy: 76.67,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1997,
healthExpense: 3257.29,
lifeExpectancy: 77.07,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1998,
healthExpense: 3327.26,
lifeExpectancy: 77.48,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1999,
healthExpense: 3414.57,
lifeExpectancy: 77.73,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2000,
healthExpense: 3536.35,
lifeExpectancy: 77.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2001,
healthExpense: 3603.77,
lifeExpectancy: 78.33,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2002,
healthExpense: 3687.38,
lifeExpectancy: 78.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2003,
healthExpense: 3745.14,
lifeExpectancy: 78.38,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2004,
healthExpense: 3704.96,
lifeExpectancy: 78.68,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2005,
healthExpense: 3787.13,
lifeExpectancy: 78.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2006,
healthExpense: 3875.14,
lifeExpectancy: 79.13,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2007,
healthExpense: 3950.17,
lifeExpectancy: 79.53,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2008,
healthExpense: 4079.09,
lifeExpectancy: 79.74,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2009,
healthExpense: 4232.58,
lifeExpectancy: 79.84,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2010,
healthExpense: 4358.61,
lifeExpectancy: 79.99,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2011,
healthExpense: 4396.44,
lifeExpectancy: 80.44,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2012,
healthExpense: 4516.99,
lifeExpectancy: 80.54,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2013,
healthExpense: 4589.37,
lifeExpectancy: 80.49,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2014,
healthExpense: 4684.49,
lifeExpectancy: 81.09,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2015,
healthExpense: 4772.33,
lifeExpectancy: 80.64,
name: `Germany`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcNumberAbbreviatorModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private scatterLineSeries1: IgcScatterLineSeriesComponent
private scatterLineSeries2: IgcScatterLineSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var scatterLineSeries1 = this.scatterLineSeries1 = document.getElementById('ScatterLineSeries1') as IgcScatterLineSeriesComponent;
var scatterLineSeries2 = this.scatterLineSeries2 = document.getElementById('ScatterLineSeries2') as IgcScatterLineSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
scatterLineSeries1.xAxis = this.xAxis;
scatterLineSeries1.yAxis = this.yAxis;
scatterLineSeries1.dataSource = this.healthDataForGermany;
scatterLineSeries2.xAxis = this.xAxis;
scatterLineSeries2.yAxis = this.yAxis;
scatterLineSeries2.dataSource = this.healthDataForFrance;
}
this._bind();
}
private _healthDataForGermany: HealthDataForGermany = null;
public get healthDataForGermany(): HealthDataForGermany {
if (this._healthDataForGermany == null)
{
this._healthDataForGermany = new HealthDataForGermany();
}
return this._healthDataForGermany;
}
private _healthDataForFrance: HealthDataForFrance = null;
public get healthDataForFrance(): HealthDataForFrance {
if (this._healthDataForFrance == null)
{
this._healthDataForFrance = new HealthDataForFrance();
}
return this._healthDataForFrance;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Life Expectancy (in years)"
minimum-value="72"
maximum-value="84"
interval="2">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Health Expenditure per Capita"
abbreviate-large-numbers="true"
minimum-value="1000"
maximum-value="6000"
interval="1000">
</igc-numeric-y-axis>
<igc-scatter-line-series
name="ScatterLineSeries1"
id="ScatterLineSeries1"
title="Germany"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-line-series>
<igc-scatter-line-series
name="ScatterLineSeries2"
id="ScatterLineSeries2"
title="France"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-line-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Scatter Spline Chart
Web Components Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterSplineSeriesComponent, as shown in the example below:
export class HealthDataForFranceItem {
public constructor(init: Partial<HealthDataForFranceItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForFrance extends Array<HealthDataForFranceItem> {
public constructor(items: Array<HealthDataForFranceItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForFranceItem(
{
year: 1985,
healthExpense: 2025.98,
lifeExpectancy: 75.92,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1986,
healthExpense: 2075.21,
lifeExpectancy: 76.24,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1987,
healthExpense: 2140.51,
lifeExpectancy: 76.08,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1988,
healthExpense: 2119.07,
lifeExpectancy: 76.22,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1989,
healthExpense: 2112.67,
lifeExpectancy: 76.5,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1990,
healthExpense: 2519.81,
lifeExpectancy: 76.54,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1991,
healthExpense: 2660.33,
lifeExpectancy: 76.98,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1992,
healthExpense: 2737.93,
lifeExpectancy: 77.18,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1993,
healthExpense: 2761.36,
lifeExpectancy: 77.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1994,
healthExpense: 2800.17,
lifeExpectancy: 77.69,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1995,
healthExpense: 2863.39,
lifeExpectancy: 77.74,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1996,
healthExpense: 3034.79,
lifeExpectancy: 78.15,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1997,
healthExpense: 3426.25,
lifeExpectancy: 78.14,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1998,
healthExpense: 3639.47,
lifeExpectancy: 78.33,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 1999,
healthExpense: 3826.04,
lifeExpectancy: 78.28,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2000,
healthExpense: 4003.97,
lifeExpectancy: 78.63,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2001,
healthExpense: 4139.3,
lifeExpectancy: 78.79,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2002,
healthExpense: 4504.06,
lifeExpectancy: 78.99,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2003,
healthExpense: 4633.59,
lifeExpectancy: 79.39,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2004,
healthExpense: 4734.15,
lifeExpectancy: 79.84,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2005,
healthExpense: 4822.75,
lifeExpectancy: 80.04,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2006,
healthExpense: 4846.36,
lifeExpectancy: 80.34,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2007,
healthExpense: 4965.14,
lifeExpectancy: 80.4,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2008,
healthExpense: 5149.6,
lifeExpectancy: 80.59,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2009,
healthExpense: 5254.08,
lifeExpectancy: 80.8,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2010,
healthExpense: 5240.42,
lifeExpectancy: 81,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2011,
healthExpense: 5387.98,
lifeExpectancy: 81.3,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2012,
healthExpense: 5499.09,
lifeExpectancy: 81.45,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2013,
healthExpense: 5557.2,
lifeExpectancy: 81.75,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2014,
healthExpense: 5730.16,
lifeExpectancy: 82.1,
name: `Norway`
}),
new HealthDataForFranceItem(
{
year: 2015,
healthExpense: 5926.44,
lifeExpectancy: 82.3,
name: `Norway`
}),
];
super(...newItems.slice(0));
}
}
}
tsexport class HealthDataForGermanyItem {
public constructor(init: Partial<HealthDataForGermanyItem>) {
Object.assign(this, init);
}
public year: number;
public healthExpense: number;
public lifeExpectancy: number;
public name: string;
}
export class HealthDataForGermany extends Array<HealthDataForGermanyItem> {
public constructor(items: Array<HealthDataForGermanyItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HealthDataForGermanyItem(
{
year: 1985,
healthExpense: 2579.64,
lifeExpectancy: 74.05,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1986,
healthExpense: 2603.94,
lifeExpectancy: 74.31,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1987,
healthExpense: 2668.49,
lifeExpectancy: 74.56,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1988,
healthExpense: 2812.94,
lifeExpectancy: 74.79,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1989,
healthExpense: 2689.51,
lifeExpectancy: 75.01,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1990,
healthExpense: 2774.68,
lifeExpectancy: 75.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1992,
healthExpense: 2909.85,
lifeExpectancy: 75.82,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1993,
healthExpense: 2853.09,
lifeExpectancy: 75.87,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1994,
healthExpense: 2989.64,
lifeExpectancy: 76.27,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1995,
healthExpense: 3122.13,
lifeExpectancy: 76.42,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1996,
healthExpense: 3241.89,
lifeExpectancy: 76.67,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1997,
healthExpense: 3257.29,
lifeExpectancy: 77.07,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1998,
healthExpense: 3327.26,
lifeExpectancy: 77.48,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 1999,
healthExpense: 3414.57,
lifeExpectancy: 77.73,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2000,
healthExpense: 3536.35,
lifeExpectancy: 77.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2001,
healthExpense: 3603.77,
lifeExpectancy: 78.33,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2002,
healthExpense: 3687.38,
lifeExpectancy: 78.23,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2003,
healthExpense: 3745.14,
lifeExpectancy: 78.38,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2004,
healthExpense: 3704.96,
lifeExpectancy: 78.68,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2005,
healthExpense: 3787.13,
lifeExpectancy: 78.93,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2006,
healthExpense: 3875.14,
lifeExpectancy: 79.13,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2007,
healthExpense: 3950.17,
lifeExpectancy: 79.53,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2008,
healthExpense: 4079.09,
lifeExpectancy: 79.74,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2009,
healthExpense: 4232.58,
lifeExpectancy: 79.84,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2010,
healthExpense: 4358.61,
lifeExpectancy: 79.99,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2011,
healthExpense: 4396.44,
lifeExpectancy: 80.44,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2012,
healthExpense: 4516.99,
lifeExpectancy: 80.54,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2013,
healthExpense: 4589.37,
lifeExpectancy: 80.49,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2014,
healthExpense: 4684.49,
lifeExpectancy: 81.09,
name: `Germany`
}),
new HealthDataForGermanyItem(
{
year: 2015,
healthExpense: 4772.33,
lifeExpectancy: 80.64,
name: `Germany`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSplineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";
ModuleManager.register(
IgcLegendModule,
IgcNumberAbbreviatorModule,
IgcDataChartCoreModule,
IgcDataChartScatterModule,
IgcDataChartScatterCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule
);
export class Sample {
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcNumericXAxisComponent
private yAxis: IgcNumericYAxisComponent
private scatterSplineSeries1: IgcScatterSplineSeriesComponent
private scatterSplineSeries2: IgcScatterSplineSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () => void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var scatterSplineSeries1 = this.scatterSplineSeries1 = document.getElementById('scatterSplineSeries1') as IgcScatterSplineSeriesComponent;
var scatterSplineSeries2 = this.scatterSplineSeries2 = document.getElementById('scatterSplineSeries2') as IgcScatterSplineSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
scatterSplineSeries1.xAxis = this.xAxis;
scatterSplineSeries1.yAxis = this.yAxis;
scatterSplineSeries1.dataSource = this.healthDataForGermany;
scatterSplineSeries2.xAxis = this.xAxis;
scatterSplineSeries2.yAxis = this.yAxis;
scatterSplineSeries2.dataSource = this.healthDataForFrance;
}
this._bind();
}
private _healthDataForGermany: HealthDataForGermany = null;
public get healthDataForGermany(): HealthDataForGermany {
if (this._healthDataForGermany == null)
{
this._healthDataForGermany = new HealthDataForGermany();
}
return this._healthDataForGermany;
}
private _healthDataForFrance: HealthDataForFrance = null;
public get healthDataForFrance(): HealthDataForFrance {
if (this._healthDataForFrance == null)
{
this._healthDataForFrance = new HealthDataForFrance();
}
return this._healthDataForFrance;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="legend-title">
Life Expectancy vs Health Expenditure
</div>
<div class="legend">
<igc-legend
name="legend"
id="legend"
orientation="Horizontal">
</igc-legend>
</div>
<div class="container fill">
<igc-data-chart
name="chart"
id="chart">
<igc-numeric-x-axis
name="xAxis"
id="xAxis"
title="Life Expectancy (in years)"
minimum-value="72"
maximum-value="84"
interval="2">
</igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
id="yAxis"
title="Health Expenditure per Capita"
abbreviate-large-numbers="true"
minimum-value="1000"
maximum-value="6000"
interval="1000">
</igc-numeric-y-axis>
<igc-scatter-spline-series
name="scatterSplineSeries1"
id="scatterSplineSeries1"
title="Germany"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-spline-series>
<igc-scatter-spline-series
name="scatterSplineSeries2"
id="scatterSplineSeries2"
title="France"
x-member-path="lifeExpectancy"
y-member-path="healthExpense"
marker-type="Circle"
show-default-tooltip="true">
</igc-scatter-spline-series>
<igc-data-tool-tip-layer
name="dataToolTipLayer"
id="dataToolTipLayer">
</igc-data-tool-tip-layer>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Web Components Scatter High Density Chart
Use the Web Components Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcHighDensityScatterSeriesComponent, as shown in the example below:
export class SampleDensityData {
public static create(): any[] {
const amount = 25000;
let data: any[] = [];
this.generate(data, amount / 2, 0, 0, 75000, 20000);
this.generate(data, amount / 4, 0, 0, 100000, 25000);
this.generate(data, amount / 8, 0, 0, 150000, 30000);
this.generate(data, amount / 8, 0, 0, 200000, 75000);
return data;
}
public static generate(data: any[], count: number,
centerX: number, centerY: number,
spreadX: number, spreadY: number): any[] {
// const data: any[] = [];
for (let i = 0; i <= count; i++)
{
let rangeX = Math.random() * spreadX;
let rangeY = Math.random() * spreadY;
const flip = 1;
const prop = Math.random();
if (prop < .25) {
rangeX *= flip;
rangeY *= flip;
}
else if (prop >= .25 && prop < .5) {
rangeX *= -flip;
rangeY *= flip;
}
else if (prop >= .5 && prop < .75) {
rangeX *= flip;
rangeY *= -flip;
}
else {
rangeX *= -flip;
rangeY *= -flip;
}
const dispersionX = Math.random() + 0.12;
const dispersionY = Math.random() + 0.12;
const x = Math.round(centerX + (rangeX * dispersionX));
const y = Math.round(centerY + (rangeY * dispersionY));
data.push({ "X": x, "Y": y });
}
return data;
}
}
tsimport { SampleDensityData } from './SampleDensityData';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcHighDensityScatterSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcHighDensityScatterSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisModule } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterCoreModule,
IgcDataChartScatterModule,
IgcDataChartInteractivityModule,
IgcNumberAbbreviatorModule,
IgcHighDensityScatterSeriesModule,
IgcNumericYAxisModule,
IgcNumericXAxisModule
);
export class DataChartTypeScatterDensitySeries {
constructor() {
let chart = document.getElementById('chart') as IgcDataChartComponent;
chart.dataSource = SampleDensityData.create();
}
}
new DataChartTypeScatterDensitySeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterDensitySeries</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="container vertical">
<div class="options horizontal">
<div class="legend-title">
<span>Stars Distribution in Milky Way Galaxy</span>
</div>
</div>
<igc-data-chart
id="chart"
width="100%"
height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true">
<igc-numeric-x-axis
name="xAxis"
abbreviate-large-numbers="true"
title-bottom-margin="10"
title="Plane of Rotation (in Light Years)"></igc-numeric-x-axis>
<igc-numeric-y-axis
name="yAxis"
abbreviate-large-numbers="true"
title-bottom-margin="10"
title="Plane of Rotation (in Light Years)"></igc-numeric-y-axis>
<igc-high-density-scatter-series
id="series"
x-axis-name="xAxis"
y-axis-name="yAxis"
title="Distribution"
x-member-path="X"
y-member-path="Y"
show-default-tooltip="true"
mouse-over-enabled="true"
progressive-load="true"
heat-minimum-color="Black"
heat-maximum-color="Yellow"
heat-maximum="1"
heat-minimum="5"
resolution="3">
</igc-high-density-scatter-series>
</igc-data-chart>
</div>
</div>
</div>
<script src="src/index.ts"></script>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
Web Components Scatter Area Chart
Web Components Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterAreaSeriesComponent, as shown in the example below:
export class SampleScatterData {
public static create(): any[] {
const data: any[] = [];
const xMin = -180;
const xMax = 180;
const yMin = -90;
const yMax = 90;
const xCount = 11;
const yCount = 11;
const xStep = (xMax - xMin) / (xCount - 1);
const yStep = (yMax - yMin) / (yCount - 1);
let index = 0;
for (let x = xMin; x <= xMax; x += xStep)
{
for (let y = yMin; y <= yMax; y += yStep)
{
const z = Math.cos(x) + Math.cos(y);
data.push({"X": x, "Y": y, "Z": z, "Index": index++});
}
}
return data;
}
public static createWaveData(): any[] {
const data: any[] = [];
let index = 0;
for (let angle = 0; angle <= 360; angle += 10)
{
const radians = angle * Math.PI / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
data.push({"Angle": angle, "Radians": radians, "SinValue": sin, "CosValue": cos, "Index": index++});
}
return data;
}
}
tsimport { SampleScatterData } from './SampleScatterData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterAreaSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterAreaSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcCustomPaletteColorScaleModule } from 'igniteui-webcomponents-charts';
import { IgcCustomPaletteColorScaleComponent } from 'igniteui-webcomponents-charts';
import { ColorScaleInterpolationMode } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterCoreModule,
IgcDataChartScatterModule,
IgcDataChartInteractivityModule,
IgcScatterAreaSeriesModule,
IgcCustomPaletteColorScaleModule
);
export class DataChartTypeScatterAreaSeries {
constructor() {
let chart = document.getElementById('chart') as IgcDataChartComponent;
chart.dataSource = SampleScatterData.create();
let colorScale = new IgcCustomPaletteColorScaleComponent();
colorScale.interpolationMode = ColorScaleInterpolationMode.InterpolateHSV;
colorScale.minimumValue = -2;
colorScale.maximumValue = 2;
colorScale.palette = [ "#8670CB", "#4AC4FF", "#B5CC2E", "#FC8612", "#ED4840" ];
const series = document.getElementById('series') as IgcScatterAreaSeriesComponent;
series.colorScale = colorScale;
}
}
new DataChartTypeScatterAreaSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterAreaSeries</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<div class="legend-title">
<span>Distribution of Magnetic Field</span>
</div>
</div>
<div class="container vertical">
<igc-data-chart
id="chart"
width="100%"
height="100%"
grid-mode="BeforeSeries"
is-horizontal-zoom-enabled="false"
is-vertical-zoom-enabled="false">
<!-- primary axes required for scatter-contour-series -->
<igc-numeric-x-axis name="xAxis1" label-location="OutsideLeft" minimum-value="-180" maximum-value="180" interval="30" title="Longitude"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis1" label-location="OutsideBottom" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<!-- optional axes that provide more context for displayed data -->
<igc-numeric-x-axis name="xAxis2" label-location="OutsideTop" minimum-value="-180" maximum-value="180" interval="30"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis2" label-location="OutsideRight" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<igc-scatter-area-series
id="series"
x-axis-name="xAxis1"
y-axis-name="yAxis1"
x-member-path="X"
y-member-path="Y"
color-member-path="Z"
show-default-tooltip="true">
</igc-scatter-area-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
Web Components Scatter Contour Chart
Web Components Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcScatterContourSeriesComponent, as shown in the example below:
export class SampleScatterData {
public static create(): any[] {
const data: any[] = [];
const xMin = -180;
const xMax = 180;
const yMin = -90;
const yMax = 90;
const xCount = 11;
const yCount = 11;
const xStep = (xMax - xMin) / (xCount - 1);
const yStep = (yMax - yMin) / (yCount - 1);
let index = 0;
for (let x = xMin; x <= xMax; x += xStep)
{
for (let y = yMin; y <= yMax; y += yStep)
{
const z = Math.cos(x) + Math.cos(y);
data.push({"X": x, "Y": y, "Z": z, "Index": index++});
}
}
return data;
}
public static createWaveData(): any[] {
const data: any[] = [];
let index = 0;
for (let angle = 0; angle <= 360; angle += 10)
{
const radians = angle * Math.PI / 180;
const sin = Math.sin(radians);
const cos = Math.cos(radians);
data.push({"Angle": angle, "Radians": radians, "SinValue": sin, "CosValue": cos, "Index": index++});
}
return data;
}
}
tsimport { SampleScatterData } from './SampleScatterData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcScatterContourSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcScatterContourSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcValueBrushScaleModule } from 'igniteui-webcomponents-charts';
import { IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
import { IgcLinearContourValueResolverModule } from 'igniteui-webcomponents-charts';
import { IgcLinearContourValueResolverComponent } from 'igniteui-webcomponents-charts';
ModuleManager.register(
IgcDataChartCoreModule,
IgcDataChartScatterCoreModule,
IgcDataChartScatterModule,
IgcDataChartInteractivityModule,
IgcScatterContourSeriesModule,
IgcValueBrushScaleModule,
IgcLinearContourValueResolverModule
);
export class DataChartTypeScatterContourSeries {
private chart: IgcDataChartComponent;
private series: IgcScatterContourSeriesComponent;
public thicknessLabel: HTMLLabelElement;
public contoursLabel: HTMLLabelElement;
constructor() {
this.chart = document.getElementById('chart') as IgcDataChartComponent;
this.chart.dataSource = this.getData();
const brushScale = new IgcValueBrushScaleComponent();
brushScale.minimumValue = -2;
brushScale.maximumValue = 2;
brushScale.brushes = [
'#8670CB', '#513E8C', '#003F5E',
'#0C6B99', '#4AC4FF', '#B5CC2E',
'#FFD034', '#FC8612', '#ED4840'
];
this.series = document.getElementById('series') as IgcScatterContourSeriesComponent;
this.series.fillScale = brushScale;
this.thicknessLabel = document.getElementById('thicknessLabel') as HTMLLabelElement;
this.thicknessLabel.textContent = '5';
const thicknessSlider = document.getElementById('thicknessSlider') as HTMLInputElement;
thicknessSlider.value = '5';
thicknessSlider!.addEventListener('change', this.onSeriesThicknessChanged);
this.contoursLabel = document.getElementById('contoursLabel') as HTMLLabelElement;
this.contoursLabel.textContent = '10';
const contoursSlider = document.getElementById('contoursSlider') as HTMLInputElement;
contoursSlider.value = '10';
contoursSlider!.addEventListener('change', this.onSeriesContoursChanged);
}
public onSeriesThicknessChanged = (e: any) => {
const num: number = parseInt(e.target.value, 10);
this.series.thickness = num;
this.thicknessLabel.textContent = num.toString();
}
public onSeriesContoursChanged = (e: any) => {
const num: number = parseInt(e.target.value, 10);
if (this.series !== undefined) {
const contours = new IgcLinearContourValueResolverComponent();
contours.valueCount = num;
this.series.valueResolver = contours;
}
this.contoursLabel.textContent = num.toString();
}
getData(): any[] {
const data = SampleScatterData.create();
return data;
}
}
new DataChartTypeScatterContourSeries();
ts<!DOCTYPE html>
<html>
<head>
<title>DataChartTypeScatterContourSeries</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample">
<div class="options horizontal">
<label class="options-label">Thickness: </label>
<label class="options-value" id="thicknessLabel">
</label>
<input class="options-slider" id="thicknessSlider"
type="range" min="1" max="10" step="1">
</input>
<label class="options-label">Contours: </label>
<label class="options-value" id="contoursLabel">
</label>
<input class="options-slider" id="contoursSlider"
type="range" min="1" max="15" step="1">
</input>
</div>
<div class="options horizontal">
<div class="legend-title">
<span>Distribution of Magnetic Field</span>
</div>
</div>
<div class="container" >
<igc-data-chart id="chart" width="100%" height="100%"
is-horizontal-zoom-enabled="true"
is-vertical-zoom-enabled="true"
grid-mode="BeforeSeries">
<!-- primary axes required for scatter-contour-series -->
<igc-numeric-x-axis name="xAxis1" label-location="OutsideLeft" minimum-value="-180" maximum-value="180" interval="30" title="Longitude"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis1" label-location="OutsideBottom" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<!-- optional axes that provide more context for displayed data -->
<igc-numeric-x-axis name="xAxis2" label-location="OutsideTop" minimum-value="-180" maximum-value="180" interval="30"></igc-numeric-x-axis>
<igc-numeric-y-axis name="yAxis2" label-location="OutsideRight" minimum-value="-90" maximum-value="90" interval="30" title="Latitude"></igc-numeric-y-axis>
<igc-scatter-contour-series
id="series"
x-axis-name="xAxis1"
y-axis-name="yAxis1"
thickness="3"
x-member-path="X"
y-member-path="Y"
value-member-path="Z">
</igc-scatter-contour-series>
</igc-data-chart>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css
Additional Resources
You can find more information about related chart types in these topics:
API References
The following table lists API members mentioned in the above sections:
| Chart Type | Control Name | API Members |
|---|---|---|
| Scatter Marker | IgcDataChartComponent |
IgcScatterSeriesComponent |
| Scatter Line | IgcDataChartComponent |
IgcScatterLineSeriesComponent |
| Scatter Spline | IgcDataChartComponent |
IgcScatterSplineSeriesComponent |
| High Density Scatter | IgcDataChartComponent |
IgcHighDensityScatterSeriesComponent |
| Scatter Area | IgcDataChartComponent |
IgcScatterAreaSeriesComponent |
| Scatter Contour | IgcDataChartComponent |
IgcScatterContourSeriesComponent |