How-To: Add Data Visualizations to Angular Apps

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 the Ignite UI Data Chart Component

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

import { IgDataChartComponent } from 'igniteui-angular2';

After importing IgDataChartComponent, you need to pass it in a 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 options 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() lifecycle 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:

1. X and Y axes.
2. Data source.
3. 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. 

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 the property from the data array to be displayed in the chart. Here you are setting the “Pop2015” and “Pop2025” properties from the data source to be rendered in the data chart series. Also, the value of the series, isTransitionInEnabled, is set to true to enable animation when the data source is assigned.

Step 5: Configure Chart Option

You have configured an axis and a series. Next, configure a chart option. In a chart option, you set all other important properties of a 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 the chart’s axes, series, dataSource, and width properties. You have created a chart series, chart axes, and dataSource and are using them to create a chart option.

Next is the ngOnInit() lifecycle hook of the Angular component initialize chart option. To do this, modify the ngOnInit() function of the 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 use this code in a separate HTML file if component templteUrl property is set instead of a template. You are using an ig-data-chart component and setting options and the 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:

Your 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 charts.