How-To: Add Data Visualizations to Angular Apps

Infragistics Team / Tuesday, May 2, 2017

In any line of business application, you need data visualizations. By using Ignite UI for JavaScript Angular Components, you can bring any kind of data visualization to Angular applications quickly, with just a few lines of code.

In this post, you will learn to add Ignite UI for JavaScript Angular Component DataChart in an Angular application.

You can install Ignite UI in an Angular application using npm, bower, or yarn. (You can learn more about using Ignite UI for Angular with different package managers here.)

After installing Ignite UI in an Angular project, follow these steps.

Step 1: Import Ignite UI Data Chart Component

To use Ignite UI Components Angular Data Chart, you need to add IgDataChartComponent in your application module. To do that in application module import IgDataChartComponent as shown below.

import { IgDataChartComponent } from 'igniteui-angular2';

After importing IgDataChartComponent, you need to pass it in declarations array of the module. You can do that as shown in the listing below.

@NgModule({
    declarations: [
      AppComponent,
      IgDataChartComponent
    ],
//other module properties 
})

Here, I’m assuming you have an Angular Component called AppComponent in your application, and you are going to add a data chart in the AppComponent. Therefore, in the AppComponent class, you’ll add these two variables:

// Rest of the codes of AppComponent
export class DataChartComponent implements OnInit {

    private data: any;
    private options: any;
    
    //Rest of the code of AppComponent
}

The AppComponent data property will be used to assign data for the data chart, and the option property will be used to assign data chart options.

Step 2: Create a Data Source

The data needed to bind the data chart can be a JavaScript array or a JSON object array and can be local or be may be provided by a REST service.

Ideally, you should create a function to return data in the Angular service so data may be used in multiple components. However, for this post, just create a function called getData in the Component class, where you add DataChart, which returns a JSON object array. So add a function called getData() in the AppComponent class as shown in the listed below:

getData() {
    return [
        { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
        { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
        { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
        { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
        { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
    ];
}

To use data returned from the getData() function, call the function inside the Angular ngOnInit() life cycle hook and assign the returned value to the data property of the AppComponent class.

ngOnInit() {
    this.data = this.getData();
}

You can learn more about Angular life cycles in Infragistics’ free Angular Essentials book.

Step 3: Configure Axes

To create a data chart, you must configure the chart options. Usually, chart options consist of three main properties:

X and Y axis
Data source
Series

Aside from these properties, other important properties are height, width, title, and so forth.

To configure axes in the AppComponent class, add a getChartAxes() function, as shown here:

getChartAxes() {
    return  [
        {
            name: "NameAxis",
            type: "categoryX",
            title: "Country",
            label: "CountryName"
        },
         {
             name: "PopulationAxis",
             type: "numericY",
             minimumvalue: 0,
             title: "Milions of People"
         }
    ] 
};

The X-axis and Y-axis types are useful to display financial, scatter, or category price series. Other possible values are category, numericAngle, categoryDateTimeX, categoryAngle, and so forth. You can learn about these values and types of charts by reading about our Series Types Data Chart.

Step 4: Configure Series

An Ignite UI data chart can have any number of series, but it must have at least one series. To add a series to the chart, in the AppComponent class, add a function called getChartSeries as shown here:

getChartSeries(){
    return  [
        {
            name: "2015Population",
            type: "column",
            isHighlightingEnabled: true,
            isTransitionInEnabled: true,
            xAxis: "NameAxis",
            yAxis: "PopulationAxis",
            valueMemberPath: "Pop2015"
        },
         {
             name: "2025Population",
             type: "column",
             isHighlightingEnabled: true,
             isTransitionInEnabled: true,
             xAxis: "NameAxis",
             yAxis: "PopulationAxis",
             valueMemberPath: "Pop2025"
         }
    ]

};

In the above code listing, you are creating two series. The series type value is set to “column” in order to create a column series. If you want to create a “line” series, set the value of type to “line.” Ignite UI for JavaScript Angular Components provides more than 25 possible series types for the data chart including area, bar, and spline area.

For the series valueMemberPath, you need to set property from the data array to be displayed in the chart. Here you are setting “Pop2015” and “Pop2025” property from the data source tol be rendered in the data chart series. Also, the series isTransitionInEnabled value is set to true to enable animation when the data source is assigned.

Step 5: Configure Chart Option

You have configured axis and series. Next, configure a chart option. In chart option, you set all other important properties of a data chart. To learn more about chart properties, see Ignite UI for JavaScript Data Chart.

To configure the data chart option, in AppComponent class add a function called getChartOptions as shown here:

getChartOptions(){

    return {
        width: "100%",
        dataSource : this.data,
        axes : this.getChartAxes(),
        series : this.getChartSeries()
    };

};

In this code, you are setting chart’s axes, series, dataSource, and width properties. You have created chart series, chart axes, and dataSource and using them to create chart option.

Next is the ngOnInit() life cycle hook of the Angular component initialize chart option. To do this, modify ngOnInit() function of AppComponent as shown in the listing below:

ngOnInit() {
    this.data = this.getData();
    this.options = this.getChartOptions();

};

Step 6: Create the Chart

To use the Ignite UI DataChart, in the AppComponent template, add the below code (this can either be in the template property of the component, or in a separate template file).

<ig-data-chart [(options)]="options" [widgetId]='"datachart1"'></ig-data-chart>

Keep in mind that you can this code in a separate HTML file, if component templteUrl property is set instead of template. You are using ig-data-chart component and setting options and widgetId property.

Running the Application

When you run the application, you will find Ignite UI for JavaScript Angular Components Data Chart added to the Angular application as shown here:

Ignite UI for JavaScript Angular Components Data Chart can easily be added to an Angular application. With a few lines of code, you can add a powerful, feature-rich data chart into an Angular application. In later posts, you will learn to enable features such as changing series types or creating different kinds of charts such as pie or area.

Ignite UI for JavaScript offers you more than 60 components, which can be integrated to any web application in a few steps. Take a few minutes to learn more, then try out Ignite UI for free. Our demo app and lessons show how easy it is to use Ignite UI for JavaScript components like our Grids and Charts in Angular.

Dhananjay Kumar works as a Developer Evangelist for Infragistics. He is a seven-time Microsoft MVP. You can reach him on Twitter: @debug_mode.