Getting Started

22 Aug 201813 minutes to read

To get start with how to use the Chart component within Angular-2 platform, refer the basic requisites and the configurations needs to be done on the system from here.

Once the configurations are done, Create an angular seed application by referring here.

Adding JavaScript and CSS Reference

To render the Chart control, the following list of external dependencies are needed,

  • jQuery - 1.7.1 and later versions
  • Angular - Angular latest versions

The other required internal dependencies are tabulated below,

Files Description/Usage
ej.core.min.js It is referred always before using all the JS controls.
ej.data.min.js Used to handle data operation and is used while binding data to the JS controls.
ej.chart.min.js Chart core script file which includes Chart related scripts files.
ej.globalize.min.js It is referred when using localization in Chart.
ej.scroller.min.js It is referred when scrolling is used in the Chart.

NOTE

Chart uses one or more script files, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the Chart, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Preparing HTML document

Create an HTML page and add the scripts references in the order mentioned in the following code example.

  • HTML
    • <html>
    <head>
    <title>Angular Chart</title>

    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" href="http://cdn.syncfusion.com/25.1.35/js/web/flat-azure/ej.web.all.min.css" />

    <!-- Angular related script references -->
    <!-- 1. Load libraries -->
         <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- Essential Studio for JavaScript  script references -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app')
            .then(null, console.error.bind(console));
    </script>

    </head>
    <!-- 3. Display the application -->
    <body>
    <ej-app>
		    <div class="splash">
			      <div class="message">Angular Syncfusion Components App</div>
			      <div class="spinner"></div>
		    </div>
	  </ej-app>
    </body>
    </html>

    NOTE

    If you are using the Essential Studio below 13.4.0.53 version, then you need to refer jQuery.globalize.js script file along with the above references to render the Chart control.
    Uncompressed version of library files are also available which is used for development or debugging purpose and can be generated from the custom script here.

    Control Initialization

    To render the Chart component, please follow the below steps.

    • Create chart folder inside src folder.

    • Create chart.component.html view file inside src/chart folder and render ejChart Angular component using the below code example.

  • HTML
    • <ej-chart id="defaultchart">
	</ej-chart>
    • Create chart.component.ts model file inside the folder src/chart and create sample component using the below code example.
  • TS
    • import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'src/chart/chart.component.html'
})
export class ChartComponent {

}

    Configure the routes for the Router

    Before adding router configuration for above created ejChart component, we recommend you to go through the Angular Routing configuration to get the deeper knowledge about Angular routing.

    • Now, we are going to configure the route navigation link for created chart sample in src/app.component.html file.
  • HTML
    • <div>
	<ul class="nav navbar-nav">
		<li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in"
             href="#chart" [routerLink]="['/chart']">chart </a></li>
	</ul>
</div>
<main>
	<router-outlet></router-outlet>
</main>
    • Import the ejChart sample component and define the route in src/app.routes.ts file.
  • TS
    • import { Routes } from '@angular/router';
. . . . 
import { ChartComponent } from './chart/chart.component';

export const rootRouterConfig: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    . . . . 
    { path: 'chart', component: ChartComponent }
];
    • Import and declare the Syncfusion source component and ejChart sample component into app.module.ts like the below code snippet.
  • TS
    • import { NgModule, enableProdMode, ErrorHandler } from '@angular/core';
. . . . . 
//import chart module from node module package
import { EJ_CHART_COMPONENTS } from 'ej2-angular2';
import { ChartComponent } from './chart/chart.component';

import { rootRouterConfig } from './app.routes';
. . . . 
@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true })],
  declarations: [. . . . , EJ_CHART_COMPONENTS, ChartComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

    Running the application

    • To run the application, execute below command.
  • JAVASCRIPT
    • npm start
    • Browse to http://localhost:3000 to see the application. And navigate to chart tab. The component is rendered as like the below screenshot. You can make changes in the code found under src folder and the browser should auto-refresh itself while you save files.

    Data Binding

    Typically, you will assign data directly to chart using dataSource property of the series. In Angular-2, you need to bind the variable, which contains data in the Angular-2 class variable, to the dataSource property as illustrated in the following code example,

    IMPORTANT

    Essential JS includes Angular-2 directives for all controls in the ej.angular2.min script file.

  • HTML
    • <ej-chart id="DataBindingChart">
    <e-seriescollection>
        <e-series [dataSource]=dataSource xName="month" yName="sales">
        </e-series>
    </e-seriescollection>
</ej-chart>
  • TS
    • import { Component} from '@angular/core';
import { DataService } from '../service/data.service';

@Component({
    selector:'ej-app',
    templateUrl:'src/chart/chart.component.html',
    providers:[DataService]
})
export class ChartComponent{
    dataSource:Array<any>;
    constructor(dataService:DataService){
        this.dataSource=dataService.chartData();
    }
}

    Create a folder service and add file data.service.ts for serving data to chart component file. Refer the below code snippet.

  • TS
    • export class DataService{
    chartData():Array<any>{
        return[  
            { month: 'Jan', sales: 35 },
            { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 },
            { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 },
            { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 },
            { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 },
            { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 },
            { month: 'Dec', sales: 32 }
        ];
    }
}

    Add Data Labels

    You can add data labels to improve the readability of the chart. This can be achieved by enabling the visible option in the marker-dataLabel option. Now, the data labels are rendered at the top of all the data points.

    The following code example illustrates this,

  • HTML
    • <ej-chart id="chart" size.height="500px" size.width="1050px">
    <e-seriescollection>
        <e-series type="line" [marker.dataLabel.visible]="true">
        </e-series>
    </e-seriescollection>
</ej-chart>

    There are situations where the default label content is not sufficient to the user. In this case, you can use the template option to format the label content with some additional information.

  • HTML
    • <ej-chart id="chart">
    <e-seriescollection>
        <e-series marker.dataLabel.template="dataLabelTemplate">
        </e-series>
    </e-seriescollection>
</ej-chart>
<div id="dataLabelTemplate" style="display:none; padding:3px;background-color:#F08080; opacity:0.8;">
    <div id="point">#point.x#:$#point.y#K</div>
</div>

    The above HTML template is used as a template for each data label. Here, “point.x” and “point.y” are the placeholder text used to display the corresponding data point’s x & y value.

    The following code example shows how to set the id of the above template to template option,

    Enable Tooltip

    The Tooltip is useful when you cannot display information by using the Data Labels due to the space constraints. You can enable tooltip by using the visible option of the tooltip in the specific series.

    The following code example illustrates this,

  • HTML
    • <ej-chart id="chart">
    <e-seriescollection>
        <e-series [tooltip.visible]="true" tooltip.template="Template">
        </e-series>
    </e-seriescollection>
</ej-chart>
<div id="Template" style="display:none; padding:3px;background-color:#F08080; opacity:0.8;">
    <div id="point">#point.x#:$#point.y#K</div>
</div>

    Add Chart Title

    You need to add a title to the chart to provide quick information to the user about the data being plotted in the chart. You can add it by using the text option of the title.

  • HTML
    • <ej-chart id="chart" title.text="Sales Analysis">
</ej-chart>