Zoom Fast with Ignite UI for JavaScript Zoombar

Ignite UI for JavaScript provides a Zoombar control to zoom range-enabled controls like data charts. Use Zoombar to zoom in on a widget in a resizable zoom-range window. Zoombar includes a horizontal scroll bar that can zoom either the whole range or a particular section of the chart. Zoombar works as a stand-alone control.

Learn more about other Ignite UI for JavaScript features on the Ignite UI product page.

In this lesson, you will learn to configure the Ignite UI for JavaScript Zoombar with a data chart.

At the end of this lesson, you will have an Ignite UI for JavaScript data chart that is configured with Ignite UI for JavaScript Zoombar in an Angular application.

Learn more about Ignite UI for JavaScript Angular 2; you can also learn more about Angular in Angular Essentials, a free eBook published by Infragistics.

Lesson Objectives

  1. Add Zoombar
  2. Configure Zoombar with a Ignite UI for JavaScript data chart.

For more information on the controls used in this lesson, see Ignite UI Zoombar.

Setting up the Project

You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)

After downloading the project, navigate to the directory and run the commands below:

  • npm install
  • npm start

You have executed the npm install command to install all dependencies, and the npm start command to run the Angular application. If the project is setup correctly, you will have a running Angular application as shown in the image below. In addition, while working through the lesson, if you receive an error while running the application, stop and run the npm start command again.

Setting up project with Ignite Data Chart

Step 1 Import and Declare the Component

To work with Ignite UI for JavaScript Angular components, you must import and declare them in the module. For example, to use the igGrid component in an Angular application, import and declare the IgGridComponent in the application module.

Navigate to the Finance App folder and then the app folder. Open the file app.module.ts, and add below import statements, just after all of the existing import statements:

import { IgZoombarComponent } from 'igniteui-angular2';

After importing the required components, you must declare them in the application module. Add IgZoombarComponent in the AppModule’s declaration array. Modify @NgModule decorator in app.module.ts as shown below:

@NgModule({
  imports: [BrowserModule, HttpModule],
  declarations: [AppComponent,
  IgDataChartComponent,
  InfoComponent,
  IndicatorChartComponent,
  VolumeChartComponent,
  IgGridComponent,
  GridComponent,
  PriceChartComponent,
  IgZoombarComponent,
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})

You have added IgZoombarComponent in the declaration array of the AppModule module. Other added components and other properties, like providers, will be reviewed in subsequent lessons.

Step 2 Add Zoombar

To work with Ignite UI for JavaScript Zoombar, you must first add the Zoombar component. In the app\charts folder, open the volumechart.component.html file and add the ig-zoombar control as shown below, just after the ig-data-chart control:

 <ig-zoombar [(options)]="zoombarOptions" widgetId="zoombar"></ig-zoombar>

Step 3 Add Zoombar Options Property

In the Zoombar option, you can attach a chart to the Zoombar.To configure the Zoombar option, create a property in the VolumeChartComponent class. In the app\charts folder, open the volumechart.component.ts file and, just above the constructor, add the property listed below:

private zoombarOptions: IgZoombar;

Step 4 Attach Chart to Zoombar

To attach a chart widget to Zoombar, you must set the target property value of Zoombar options to the ID of the chart widget. In the app\charts folder, open the volumechart.component.ts file and the code below just after the this.chartOptions assignment in the ngOnInit() function:

this.zoombarOptions = {
  target: "#volumechart"
};

In the above listing, volumechart is the ID of the data chart widget.

Step 5 Run the Application

Navigate to application, scroll down, and at the bottom of the page, you will find Zoombar added as shown in the image below:

Step 5: Run the Application

The chart has been cloned in the Zoombar and, by using the horizontal scroll bar, you can zoom the chart. You will find animation while zooming in and out is very fast and smooth. Regardless of doeshow many data points are rendered in the chart, Ignite UI for JavaScript Zoombar will zoom in on a particular section very quickly and with smooth animation.

Conclusion

Ignite UI for JavaScript can be very helpful in writing and running web applications more quickly. In addition to Angular, you may use Ignite UI for JavaScript in React, AngularJS, jQuery, and ASP.NET MVC. In this lesson, you learned how to configure the Ignite UI for JavaScript Zoombar in an Angular application.