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

[Dana]

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]

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 { AppComponent }  from './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. 

UG link:  http://ej2.syncfusion.com/angular/documentation/chart/getting-started.html 

Demo Link :  http://ej2.syncfusion.com/angular/demos/index.html#/chart/line 

Kindly revert us, if you have any concern. 

Thanks, 

Bhuvanesh. 

[Dana]

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

[Bhuvanesh Valarman]

Hi Dana, 

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

 

Thanks, 

Bhuvanesh. 

[Dana]

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]

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]

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]

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]

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]

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]

Thank you. It works!

[Bhuvanesh Valarman]

Hi Dana,

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

Thanks,
Bhuvanesh V.