Available in the Full Version

Doughnut Chart - Using TypeScript

1990 Population

Top 5 largest countries by population (in millions)

	China
	India
	United States
	Indonesia
	Brazil

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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.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>

Ignite UI for jQuery | Samples

Search Results

Doughnut Chart - Using TypeScript

Code View