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. Image for the cookie policy date
close icon

Require guidance for installing and making syncfusion function for charts (Line CHART) in Angular 4

I have no idea how to make Syncfusion function in Angular 4 (like displaying line charts). I need a step-by-step guide here if possible.

Sorry for the inconvenience caused for my lack of experience with Angular 4 and Syncfusion.

11 Replies

BV Bhuvanesh Valarman Syncfusion Team September 12, 2017 01:13 PM UTC

Hi Dana, 
 
Thanks for using Syncfusion products. 
 
We have analyzed your query. We have prepared a sample to render basic line chart in Angular 4 with step by step guide lines. 
 
Please follow below guide lines to create chart using Syncfusion and Angular 4. 
 
Step 1: Clone a quickstart application using “git clone https://github.com/angular/quickstart.git quickstart” command. 
 
Step 2: Navigate to ‘quickstart’  folder( ‘cd quickstart’ ) and Install the  angular dependencies using “npm install”. 
 
Step 3: Now install Syncfusion chart package using “npm install @syncfusion/ej2-ng-charts --save” command. 
 
Step 4: Map the chart packages in systemjs.config.js file. Refer below image for systemjs.config changes. You find this file from the attached sample(‘quickstart/src/systemjs.config’) 
 
 
 
Step 5: Import chart modules and its services into your application from chart package. Refer below code snippet for importing chart modules and services.  
Chart feature has been segregated into modules. In the below example, we have used LineSeriesService and MarkerService. 
 
import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
// import the ChartModule for the Chart component 
import { ChartModule, LineSeriesService, MarkerService} 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 ], 
  providers: [LineSeriesService, MarkerService,] 
}) 
export class AppModule { } 
 
 
Step 6: Modify the template in app.component.ts file as below  to render a simple chart [src/app/app.component.ts]. 
 
`<ej-chart id='chartcontainer' > 
  </ej-chart>` 
 
Step 7: Now add a series to the chart and bind the dataSource to it and set the type as line [src/app/app.component.ts]. 
 

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 } 
  ]; 
} 
 

 
`<ej-chart id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'> 
    <e-series-collection> 
        <e-series [dataSource]='data' type='Line' xName='x' yName='y' name='Japan' width=2  [marker]='marker'> </e-series> 
    </e-series-collection> 
  </ej-chart>` 
 
For Marker: 
export class AppComponent { 
  public marker: Object = { visible: true, height: 10, width: 10 }; 
} 
 

We have prepared a sample based on your requirement. You can find the sample from the attachment. 

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 


You can find more information about the chart and its series type in below link. 



Kindly revert us, if you have any concern. 

Thanks, 
Bhuvanesh. 



DA Dana September 13, 2017 03:22 AM UTC

After some trial and error, I managed to get the chart out. Thank you.



BV Bhuvanesh Valarman Syncfusion Team September 13, 2017 05:38 AM UTC

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



DA Dana September 19, 2017 05:00 AM UTC

Is it possible for the dataSource to be swap with a button click (or button clicks)? I require some confirmation for this as I tried swapping dataSource with a button click, but failed. An example will be enough to help me. Thank you.


BV Bhuvanesh Valarman Syncfusion Team September 19, 2017 09:48 AM UTC

Hi Dana, 
  
Thanks for your update. 
  
As per your request, We have prepared a sample to swap dataSource of chart on button click. 
  
Code snippet: 
import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 
import { Chart } from '@syncfusion/ej2-ng-charts'; 
@Component({ 
  selector: 'app-container', 
  // specifies the template string for the Charts component 
  template: 
  `<button type="button" (click)="ChangeData()">Swap DataSource</button> 
  <ej-chart #chart id='chartcontainer'></ej-chart>`, 
  encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { 
  @ViewChild('chart') 
  public chart: Chart; 
  public data1: 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 data2: Object[] = [ 
    { x: 2005, y: 30 }, { x: 2006, y: 55 }, { x: 2007, y: 40 }, { x: 2008, y: 70 }, 
    { x: 2009, y: 60 }, { x: 2010, y: 35 }, { x: 2011, y: 20 } 
  ]; 
  public ChangeData() { 
    this.chart.series[0].dataSource = (this.chart.series[0].dataSource === this.data1) ? this.data2 : this.data1; 
    this.chart.refresh(); 
  } 
} 
  
  
  
Screenshot: 
 
  
  
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. 



DA Dana September 20, 2017 03:47 AM UTC

It worked! Thank you very much for the assistance. 

One question, am I required to create a new thread if it's a non-chart related issue?



BV Bhuvanesh Valarman Syncfusion Team September 20, 2017 05:39 AM UTC

Hi Dana, 
  
Thanks for the update, we are glad that you have achieved your requirement with chart. Please create a separate thread if you have any other product or general query, so that we can have a better follow up. We are happy to help you. 
  
Thanks, 
Bhuvanesh V. 



DA Dana October 9, 2017 10:21 AM UTC

Is it possible to use a service to call out its data to a chart? If yes, I am facing difficulties in pulling out data using service for Angular. I hope you can help me solve this issue by giving me an example. I have attach a file consist of the failed codes.


Attachment: app_system.config_e792a4e8.zip


BV Bhuvanesh Valarman Syncfusion Team October 10, 2017 05:43 AM UTC

Hi Dana, 

Thanks for the update. 

We have analyzed your query. From the provided sample, we found that data for data1exp is updated on declaration itself.  
 
public data1exp: Object[] = [ 
    this.data1 
  ]; 
 
 
But data from services will not be available at this time. We are getting the data from services on ‘ngOnInit’ method only, so we have modified your sample and assigned the data to your variable on getData1 method itself. 
 
Code snippet:  
[src/app/chart/chart.component.ts]  

 
[src/app/chart/chart.component.html]  

 

Please find the modified sample from below 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.  

Thank you, 
Bhuvanesh V. 



DA Dana October 10, 2017 08:52 AM UTC

Thank you. It works!



BV Bhuvanesh Valarman Syncfusion Team October 11, 2017 05:53 AM UTC

Hi Dana,

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

Thanks,
Bhuvanesh V.

Loader.
Live Chat Icon For mobile
Up arrow icon