We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Require guidance for applying User Interaction for Graphs

Thread ID:

Created:

Updated:

Platform:

Replies:

132792 Sep 21,2017 02:06 AM Sep 25,2017 05:04 AM JavaScript - EJ 2 3
loading
Tags: Chart
Dana
Asked On September 21, 2017 02:06 AM

Instructions are unclear in the documents. I apologize for any inconvenience this may cause, but may I have a step-by-step guidance for applying User Interaction (Tooltip and Zooming) for graphs? Thank you for helping me.

Currently using Angular 4.3.6.

Bhuvanesh Valarman [Syncfusion]
Replied On September 21, 2017 07:29 AM

Hi Dana, 

Thanks for your update. 

As per your request, We have prepared a sample with User Interactions tooltip and zooming. 

To add tooltip and zooming in your sample refer below guide lines. 
 
  1. Import TooltipService and ZoomService from chart package[‘@syncfusion/ej2-ng-charts’] and
           Inject into NgModule.providers [file://src/app/app.module.ts]. 

Code snippets: 
app.module.ts file code snippet. 

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
// import the ChartModule for the Chart component 
import { ChartModule, LineSeriesService, TooltipService, ZoomService} from '@syncfusion/ej2-ng-charts'; 
import { AppComponentfrom './app.component'; 
 
@NgModule({ 
  // declaration of ej2-ng-charts module into NgModule 
  imports:      [ BrowserModule, ChartModule ], 
  declarations: [ AppComponent ], 
  bootstrap:    [ AppComponent ], 
  // Injecting the required services for the chart 
  providers: [LineSeriesService, TooltipService, ZoomService] 
}) 
export class AppModule { } 
 

  1. Create an instance for tooltip and zoom options and set enable property to true. Now assign the instance to tooltip and zoomSettings property in the ‘ej-chart’ tag[file://src/app/app. component.ts].
 
app.component.ts file code snippet. 

import { Component, ViewEncapsulation } from '@angular/core'; 
import { TooltipSettingsModel, ZoomSettingsModel} from '@syncfusion/ej2-ng-charts'; 
@Component({ 
  selector: 'app-container', 
  // specifies the template string for the Charts component 
  template: 
  `<ej-chart id='chartcontainer' style="display: block;" [tooltip]='tootip' [zoomSettings]='zoom'> 
    <e-series-collection> 
        <e-series [dataSource]='data' fill="#E56590" type='Line' xName='x' yName='y'>  
        </e-series> 
    </e-series-collection> 
  </ej-chart>`, 
  encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { 
  public data: Object[] = [ 
    { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 }, 
    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 } 
  ]; 
  public tootip: TooltipSettingsModel = { 
    enable: true, 
  }; 
  public zoom: ZoomSettingsModel = { 
    enableSelectionZooming: true 
  }; 
} 
 



We have attached the sample for your reference. Find the sample from the below link. 
Sample Link: link 

Steps to run the Sample  

Step  1 : Move to quickstart folder.  
Step 2 :  Run npm install  
Step 3 :  Run npm install @syncfusion/ej2-ng-charts --save  
Step 4 :  Run npm start  

Kindly revert us, if you have any concern. 

Thanks, 
Bhuvanesh V. 


Dana
Replied On September 25, 2017 03:36 AM

It works. Thank you for the help.


Bhuvanesh Valarman [Syncfusion]
Replied On September 25, 2017 05:04 AM

Hi Dana,

Thanks for the update. Kindly revert us, if you need any further assistance.

Thanks,
Bhuvanesh V.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;