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 installing and making syncfusion function for charts (Line CHART) in Angular 4

Thread ID:

Created:

Updated:

Platform:

Replies:

132611 Sep 12,2017 04:05 AM Oct 11,2017 01:53 AM JavaScript - EJ 2 11
loading
Tags: Chart
Dana
Asked On September 12, 2017 04:05 AM

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.

Bhuvanesh Valarman [Syncfusion]
Replied On September 12, 2017 09:13 AM

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. 


Dana
Replied On September 12, 2017 11:22 PM

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


Bhuvanesh Valarman [Syncfusion]
Replied On September 13, 2017 01:38 AM

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


Dana
Replied On September 19, 2017 01:00 AM

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.

Bhuvanesh Valarman [Syncfusion]
Replied On September 19, 2017 05:48 AM

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. 


Dana
Replied On September 19, 2017 11:47 PM

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?


Bhuvanesh Valarman [Syncfusion]
Replied On September 20, 2017 01:39 AM

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. 


Dana
Replied On October 9, 2017 06:21 AM

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

Bhuvanesh Valarman [Syncfusion]
Replied On October 10, 2017 01:43 AM

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. 


Dana
Replied On October 10, 2017 04:52 AM

Thank you. It works!


Bhuvanesh Valarman [Syncfusion]
Replied On October 11, 2017 01:53 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.

;