Getting Started for Sparkline

#Getting Started

Before we start with the Sparkline, please refer this page for general information regarding integrating Syncfusion widget’s.

Adding JavaScript and CSS Reference

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

jQuery - 1.7.1 and later versions
jsRender - to render the templates
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.sparkline.min.js	Sparkline core script file which includes Sparkline related scripts files.

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 Sparkline</title>

    <!-- Essential Studio for JavaScript  theme reference -->
    <link rel="stylesheet" href="http://cdn.syncfusion.com/21.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>
    <script src="http://cdn.syncfusion.com/21.1.35/js/web/ej.web.all.min.js"> </script> 
    <script src="http://cdn.syncfusion.com/21.1.35/js/common/ej.angular2.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

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

Copy Sparkline Syncfusion Angular source component(s) from the below build location and add it in src/ej folder (For ex., consider the sparkline component).

JAVASCRIPT

(Installed Location)\Syncfusion\Essential Studio\14.3.0.49\JavaScript\assets-src\angular2\

NOTE

core.ts file is mandatory for all Syncfusion JavaScript Angular components. The repository having the source file from Essential Studio for JavaScript v14.3.0.49.

Create sparkline folder inside src folder.
Create sparkline.component.html view file inside src/sparkline folder and render ejSparkline Angular component using the below code example.

HTML

<ej-sparkline id="container" [size.height]="100" [size.width]="300">
</ej-sparkline>

Create sparkline.component.ts model file inside the folder src/sparkline and create sample component using the below code example.

import { Component, ViewEncapsulation } from '@angular/core';

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

}

Configure the routes for the Router

Before adding router configuration for above created ejSparkline 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 sparkline 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="#sparkline" [routerLink]="['/sparkline']">sparkline </a>
        </li>
	  </ul>
</div>
<main>
	<router-outlet></router-outlet>
</main>

Import the ejSparkline sample component and define the route in src/app.routes.ts file.

import { Routes } from '@angular/router';
. . . . 
import { SparklineComponent } from './sparkline/sparkline.component';

export const rootRouterConfig: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    . . . . 
    { path: 'sparkline', component: SparklineComponent }
];

Import and declare the Syncfusion source component and ejSparkLine sample component into app.module.ts like the below code snippet.

import { NgModule, enableProdMode, ErrorHandler } from '@angular/core';
. . . . . 
import { EJ_SPARKLINE_COMPONENTS } from './ej/sparkline.component';
import { SparklineComponent } from './sparkline/sparkline.component';

import { rootRouterConfig } from './app.routes';
. . . . 
@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true })],
  declarations: [. . . . , EJ_SPARKLINE_COMPONENTS, SparklineComponent],
  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 sparkline 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.