Getting Started

17 Nov 20172 minutes to read

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,

• jsRender - to render the templates

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.

Refer the ej.web.all.min.js which encapsulates all the ej controls and frameworks in a single file.

Control Initialization

• Open the command prompt in the folder ember-app or the folder in which the application is created.

• Use the command ember generate route sparkline/defaultto create template default.hbs file in templates folder and router default.js file in routes folder. It also add the routing content in router.js.

• Use below code in default.hbs in templates folder to render the sparkline.

HTML

• Use the below code in default.js in routes folder to bind the model to the sparkline.

HTML

import Ember from 'ember';

    export default Ember.Route.extend({
      model() {
         return {
         }
      }
    });

Running the application

• To run the application, execute below command.

JAVASCRIPT

ember serve

• Browse to http://localhost:4200 to see the application. And navigate to sparkline sample. The component is rendered as like the below screenshot. You can make changes in the code found under app folder and the browser should auto-refresh itself while you save files.