ES5 getting started with EJ2 JavaScript Sparkline control

19 Feb 202616 minutes to read

The Essential^® JS 2 for JavaScript (global script) is a pure ES5-based JavaScript framework that can be used directly in the latest web browsers.

Dependencies

The following list of minimum dependencies are required to use the sparkline:

|-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-svg-base

Control Initialization

The Essential^® JS 2 JavaScript controls support initialization through either of the following approaches.

Using local script references in a HTML page.
Using CDN link for script reference.

Using local script references in a HTML page

Step 1: Create an app folder quickstart for getting started.

Step 2: You can get the global scripts from the Essential Studio^® JavaScript (Essential^® JS 2) build installed location.

Syntax:

Dependency script: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{DEPENDENCY_PACKAGE_NAME}/dist/global/{DEPENDENCY_PACKAGE_NAME}.min.js

Script: **(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Example:

Dependency script: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-base/dist/global/ej2-base.min.js

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/32.1.19/Web (Essential JS 2)/JavaScript/ej2-charts/dist/global/ej2-charts.min.js

The below located script file contains all Syncfusion^® JavaScript (ES5) UI control resources in a single file.

Scripts: **(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script for a set of specific controls. This web tool is useful to combine the required control scripts in a single file.

Step 3: Create a folder ~/quickstart/resources and copy/paste the global scripts from the above installed location to ~/quickstart/resources/package corresponding package location.

Step 4: Create a HTML page (index.html) in ~/quickstart/index.html and add the Essential^® JS 2 script references.

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <title>Essential JS 2</title>

        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="resources/base/ej2-base.min.js" 
        type="text/javascript"></script>
        <script src="resources/data/ej2-data.min.js" 
        type="text/javascript"></script>
        <script src="resources/svg-base/ej2-svg-base.min.js" 
        type="text/javascript"></script>
        
        <!-- Essential JS 2 charts's global script (Control Script) -->
        <script src="resources/charts/ej2-charts.min.js" type="text/javascript"></script>
    </head>
    <body>
    </body>
</html>

Step 5: Now, add a container element and initialize the Syncfusion^® JavaScript (ES5) Sparkline control in ~/quickstart/index.html using the following code.

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <title>Essential JS 2</title>

        <!-- Essential JS 2 Base's global script (Dependency Script) -->
        <script src="resources/base/ej2-base.min.js" type="text/javascript"></script>
        <script src="resources/data/ej2-data.min.js" type="text/javascript"></script>
        <script src="resources/svg-base/ej2-svg-base.min.js" type="text/javascript"></script>

        <!-- Essential JS 2 charts's global script (Control Script) -->
        <script src="resources/charts/ej2-charts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- Add the HTML container element -->
        <div id="element"></div>
        <script>
            // initialize sparkline control
            var sparkline = new ej.charts.Sparkline();
            // Render initialized sparkline.
            sparkline.appendTo('#element');
        </script>
    </body>
</html>

Step 6: Now, run the index.html in web browser, it will render the Syncfusion^® JavaScript Sparkline control.

Bind data source to sparkline

The dataSource property enables data binding for the sparkline. It accepts a collection of values as input, such as a list of objects.

index.js
index.html
//Initialize Sparkline component
var sparklineInstance = new ej.charts.Sparkline({
    height: '100px',
    width: '50%',
    dataSource: [
            { x: 0, xval: '2005', yval: 20090440 },
            { x: 1, xval: '2006', yval: 20264080 },
            { x: 2, xval: '2007', yval: 20434180 },
            { x: 3, xval: '2008', yval: 21007310 },
            { x: 4, xval: '2009', yval: 21262640 },
            { x: 5, xval: '2010', yval: 21515750 },
            { x: 6, xval: '2011', yval: 21766710 },
            { x: 7, xval: '2012', yval: 22015580 },
            { x: 8, xval: '2013', yval: 22262500 },
            { x: 9, xval: '2014', yval: 22507620 },
        ],
    // Assign the dataSource values to series of Sparkline 'xName and yName'
    xName: 'xval', yName: 'yval'
});
//Render initialized Sparkline
sparklineInstance.appendTo("#element");
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-charts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Change the type of sparkline

The sparkline type can be configured using the type property, which supports Line, Column, WinLoss, Pie, and Area. Here, the area type is applied.

index.js
index.html
//Initialize Sparkline component
var sparklineInstance = new ej.charts.Sparkline({
    height: '100px',
    width: '50%',
    dataSource: [
            { x: 0, xval: '2005', yval: 20090440 },
            { x: 1, xval: '2006', yval: 20264080 },
            { x: 2, xval: '2007', yval: 20434180 },
            { x: 3, xval: '2008', yval: 21007310 },
            { x: 4, xval: '2009', yval: 21262640 },
            { x: 5, xval: '2010', yval: 21515750 },
            { x: 6, xval: '2011', yval: 21766710 },
            { x: 7, xval: '2012', yval: 22015580 },
            { x: 8, xval: '2013', yval: 22262500 },
            { x: 9, xval: '2014', yval: 22507620 },
        ],
    // Assign the dataSource values to series of Sparkline 'xName and yName'
    xName: 'xval', yName: 'yval',
    // Assign the 'area' as type of Sparkline
    type:'Area'
});
//Render initialized Sparkline
sparklineInstance.appendTo("#element");
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-charts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

The sparkline provides additional information through a tooltip that appears when the mouse pointer hovers over the chart. You can enable the tooltip by setting the visible property to true in tooltipSettings.

index.js
index.html
//Initialize Sparkline component
var sparklineInstance = new ej.charts.Sparkline({
    height: '100px',
    width: '50%',
    dataSource: [
            { x: 0, xval: '2005', yval: 20090440 },
            { x: 1, xval: '2006', yval: 20264080 },
            { x: 2, xval: '2007', yval: 20434180 },
            { x: 3, xval: '2008', yval: 21007310 },
            { x: 4, xval: '2009', yval: 21262640 },
            { x: 5, xval: '2010', yval: 21515750 },
            { x: 6, xval: '2011', yval: 21766710 },
            { x: 7, xval: '2012', yval: 22015580 },
            { x: 8, xval: '2013', yval: 22262500 },
            { x: 9, xval: '2014', yval: 22507620 },
        ],
    // Assign the dataSource values to series of Sparkline 'xName and yName'
    xName: 'xval', yName: 'yval',
    type:'Area',
    // To enable the tooltip for Sparkline
    tooltipSettings: {
        visible: true,
        format: '${xval} : ${yval}'
    }
});
//Render initialized Sparkline
sparklineInstance.appendTo("#element");
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for Sparkline </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for Sparkline UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-charts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin-top: 15%;">
            <div id="element" align="center"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Search docs

Ask HelpBot