Available in the Full Version
Doughnut Chart - Using TypeScript
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
1990 Population
Top 5 largest countries by population (in millions)
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to create Doughnut Chart with a legend in TypeScript.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
<div style="float: left">
<div style="text-align: center; width: 100%; font:16px Arial, Helvetica, sans-serif;">1990 Population</div>
<div style="text-align: center; width: 100%; margin: 10px 0; font:12px Arial, Helvetica, sans-serif;">Top 5 largest countries by population (in millions)</div>
<div id="doughnutChart"></div>
</div>
<div id="legend" style="float: left"></div>
<script src="/TypeScriptSamples/doughnut-chart/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
class DNChartCountryPopulation {
countryName: string;
population1990: number;
constructor(inName: string, public populationIn1990: number) {
this.countryName = inName;
this.population1990 = populationIn1990;
}
}
var dnChartSample: DNChartCountryPopulation[] = [];
dnChartSample.push(new DNChartCountryPopulation("China", 1141));
dnChartSample.push(new DNChartCountryPopulation("India", 849));
dnChartSample.push(new DNChartCountryPopulation("United States", 250));
dnChartSample.push(new DNChartCountryPopulation("Indonesia", 178));
dnChartSample.push(new DNChartCountryPopulation("Brazil", 150));
$(function () {
$("#doughnutChart").igDoughnutChart({
width: 550,
height: 550,
series:
[{
name: "Population1990",
labelMemberPath: "countryName",
valueMemberPath: "population1990",
dataSource: dnChartSample,
labelsPosition: "bestFit",
legend: { element: "legend" },
formatLabel: function (context) {
return context.itemLabel + " (" + context.item.population1990 + ")";
}
}],
holeDimensionsChanged: function () {
updateLegendItems();
}
});
function updateLegendItems() {
$(".ui-chart-legend-item-text > span").each(function () {
var txt = $(this).text(),
idx = txt.lastIndexOf("(");
if (idx != -1) {
$(this).text(txt.substr(0, idx));
} else {
return false;
}
});
}
updateLegendItems();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<script>
System.config( {
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
} );
System.import( 'typescript.ts' ).then( null, console.error.bind( console ) );
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgDoughnutChartComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
class DNChartCountryPopulation {
countryName: string;
population1990: number;
constructor(inName: string, public populationIn1990: number) {
this.countryName = inName;
this.population1990 = populationIn1990;
}
}
@Component({
selector: 'my-app',
template: `
<ig-doughnut-chart widgetId="doughnutChart" [(options)]="chartOptions"></ig-doughnut-chart>
`
})
export class AppComponent {
private chartOptions: IgDoughnutChart;
private dnChartSample: Array<DNChartCountryPopulation>;
constructor() {
dnChartSample.push(new DNChartCountryPopulation("China", 1141));
dnChartSample.push(new DNChartCountryPopulation("India", 849));
dnChartSample.push(new DNChartCountryPopulation("United States", 250));
dnChartSample.push(new DNChartCountryPopulation("Indonesia", 178));
dnChartSample.push(new DNChartCountryPopulation("Brazil", 150));
this.chartOptions = {
width: 550,
height: 550,
series:
[{
name: "Population1990",
labelMemberPath: "countryName",
valueMemberPath: "population1990",
dataSource: dnChartSample,
labelsPosition: "bestFit",
legend: { element: "legend" },
formatLabel: function (context) {
return context.itemLabel + " (" + context.item.population1990 + ")";
}
}]
};
}
}
@NgModule({
bootstraps: [AppComponent],
declarations: [AppComponent, IgDoughnutChartComponent],
imports: [BrowserModule]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.dv.js"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
</head>
<body>
<div id="app">
<script type="text/babel">
class DNChartCountryPopulation {
countryName: string;
population1990: number;
constructor(inName: string, public populationIn1990: number) {
this.countryName = inName;
this.population1990 = populationIn1990;
}
}
let App = React.createClass({
render: function() {
dnChartSample: Array<DNChartCountryPopulation>;
this.dnChartSample.push(new DNChartCountryPopulation("China", 1141));
this.dnChartSample.push(new DNChartCountryPopulation("India", 849));
this.dnChartSample.push(new DNChartCountryPopulation("United States", 250));
this.dnChartSample.push(new DNChartCountryPopulation("Indonesia", 178));
this.dnChartSample.push(new DNChartCountryPopulation("Brazil", 150));
let chartOpts = {
width: 550,
height: 550,
series:
[{
name: "Population1990",
labelMemberPath: "countryName",
valueMemberPath: "population1990",
dataSource: this.dnChartSample,
labelsPosition: "bestFit",
legend: { element: "legend" },
formatLabel: function (context) {
return context.itemLabel + " (" + context.item.population1990 + ")";
}
}]
};
return (
<IgDoughnutChart id="doughnutChart" options={chartOpts} />
);
}
});
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</div>
</body>
</html>