Es5 getting started in EJ2 JavaScript Stock chart control

3 Nov 202321 minutes to read

This section explains you the steps required to create a simple Stock Chart and demonstrate the basic usage of the Stock Chart control.

Dependencies

Below is the list of minimum dependencies required to use the Stock Chart.

|-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-calendars
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-lists
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-splitbuttons

Setup for local environment

Refer the following steps for setup your local environment.

Step 1: Create a root folder myapp for your application.

Step 2: Create myapp/resources folder to store local scripts and styles files.

Step 3: Create myapp/index.js and myapp/index.html files for initializing Essential JS 2 Stock Chart control.

Adding Syncfusion resources

The Essential JS 2 Stock Chart control can be initialized by using either of the following ways.

Using local script.
Using CDN link for script.

Using local script

You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.

After installing the Essential JS 2 product build, you can copy the chart and its dependencies scripts and style file into the resources/scripts and resources/styles folder.

Refer the below code to find location stock chart’s script and style file.

Syntax:

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

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

Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css

Example:

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

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

Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-charts/styles/material.css

After copying the files, then you can refer the stock chart’s scripts and style into the index.html file. The below html code example shows the minimal dependency of chart.


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

            <!-- Essential JS 2 Stock Chart's dependent material themes -->  
            <link href="resources/base/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/buttons/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/calendars/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/navigations/styles/material.css" rel="stylesheet" type="text/css"/>
            <link href="resources/splitbuttons/styles/material.css" rel="stylesheet" type="text/css"/>

            <!-- Essential JS 2 Stock Chart's dependent scripts -->
            <script src="resources/scripts/ej2-base.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-buttons.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-data.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-pdf-export.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-file-utils.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-compression.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-navigations.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-popups.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-splitbuttons.min.js" type="text/javascript"></script>
             <script src="resources/scripts/ej2-inputs.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-calendars.min.js" type="text/javascript"></script>
            <script src="resources/scripts/ej2-svg-base.min.js" type="text/javascript"></script>

            <!-- Essential JS 2 Stock Chart's global script -->
            <script src="resources/scripts/ej2-charts.min.js" type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Using CDN link for script

Using CDN link, you can directly refer the stock chart control’s script and style into the index.html.

Refer the chart’s CDN links as below

Syntax:

Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: http://cdn.syncfusion.com/ej2/material.css

Example:

Script: http://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js

Styles: http://cdn.syncfusion.com/ej2/material.css

The below html code example shows the minimal dependency of chart.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 Stock Chart</title>
            <!-- Essential JS 2 Stock Chart's global script -->
            <script src="http://cdn.syncfusion.com/ej2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
            <!-- Essential JS 2 material theme -->
            <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
       </head>
       <body>
       </body>
  </html>

Adding Stock Chart control

Now, you can start adding stock chart control in the application. For getting started, add a div element for Chart control in index.html. Then refer the index.js file into the index.html file.

In this document context we are going to use ej2.min.js which includes all the Essential JS 2 components and its dependent scripts.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
            <title>Essential JS 2 Stock Chart</title>
            <!-- Essential JS 2 material theme -->
            <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
            <!-- Essential JS 2 all script -->
            <script src="http://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
       </head>
       <body>
           <!-- Add the HTML <div> element for stock chart  -->
             <div id="element"></div>
             <script src="index.js" type="text/javascript"></script>
       </body>
  </html>

Place the following chart code in the index.js.

var stockchartData = [{
   x: new Date( '2012-04-02' ),
    open : 85.9757,
    high : 90.6657,
    low : 85.7685,
    close : 90.5257,
    volume : 660187068
  },
  {
   x: new Date( '2012-04-09' ),
    open : 89.4471,
    high : 92,
    low : 86.2157,
    close : 86.4614,
    volume : 912634864
  },
  {
   x: new Date( '2012-04-16' ),
    open : 87.1514,
    high : 88.6071,
    low : 81.4885,
    close : 81.8543,
    volume : 1221746066
  },
  {
   x: new Date( '2012-04-23' ),
    open : 81.5157,
    high : 88.2857,
    low : 79.2857,
    close : 86.1428,
    volume : 965935749
  },
  {
   x: new Date( '2012-04-30' ),
    open : 85.4,
    high : 85.4857,
    low : 80.7385,
    close : 80.75,
    volume : 615249365
  }];
var stockchart = new ej.charts.StockChart({
    series:[{
        // dataSource for stockchart series
        dataSource: stockchartData,
        xName: 'x',
        yName: 'open',
        type: 'Candle'
    }]
}, '#element');

Populate Stock Chart With Data

This section explains how to plot below JSON data to the Stock Chart.

var stockchartData = [{
   x: new Date( '2012-04-02' ),
    open : 85.9757,
    high : 90.6657,
    low : 85.7685,
    close : 90.5257,
    volume : 660187068
  },
  {
   x: new Date( '2012-04-09' ),
    open : 89.4471,
    high : 92,
    low : 86.2157,
    close : 86.4614,
    volume : 912634864
  },
  {
   x: new Date( '2012-04-16' ),
    open : 87.1514,
    high : 88.6071,
    low : 81.4885,
    close : 81.8543,
    volume : 1221746066
  },
  {
   x: new Date( '2012-04-23' ),
    open : 81.5157,
    high : 88.2857,
    low : 79.2857,
    close : 86.1428,
    volume : 965935749
  },
  {
   x: new Date( '2012-04-30' ),
    open : 85.4,
    high : 85.4857,
    low : 80.7385,
    close : 80.75,
    volume : 615249365
  }];

Add a series object to the chart by using series property and then set the JSON data to dataSource property.

Since the JSON contains DateTime data, set the valueType for horizontal axis to DateTime. By default, the axis valueType is Numeric.

index.js
index.html
var stockChart = new ej.charts.StockChart({
    series:[{
        dataSource: chartData,
        type: 'Candle'
    }]
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="./index.css" rel="stylesheet">
    <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></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>

Add Stock Chart Title

You can add a title using title property to the Stock Chart to provide quick information to the user about the data plotted in the Chart.

index.js
index.html
var stockChart = new ej.charts.StockChart({
    series:[{
        dataSource: chartData,
        type: 'Candle'
    }]
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="./index.css" rel="stylesheet">
    <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></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>

Add Crosshair

Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position.

Crosshair lines can be enabled by using enable property in the crosshair. Likewise tooltip label for an axis can be enabled by using enable property of crosshairTooltip in the corresponding axis.

index.js
index.html
var stockChart = new ej.charts.StockChart({
     primaryXAxis: {
            valueType: 'DateTime',
        },
        series: [
            {
                dataSource: chartData, type: 'Candle'
            }
        ],
        crosshair: { enable: true },
        legendSettings: { visible: true },
        title: 'Weather Condition'
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="./index.css" rel="stylesheet">
    <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></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>

Add Trackball

Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the closest point and trackball tooltip displays the information about the point. To use trackball feature, we need to inject Crosshair module and Tooltip module using
StockChart.Inject(Crosshair, Tooltip).

Trackball can be enabled by setting the enable property of the crosshair to true and
shared property in tooltip to true in chart.

index.js
index.html
var stockChart = new ej.charts.StockChart({
 primaryXAxis: {
            valueType: 'DateTime',
        },
        series: [
            {
                dataSource: chartData, yName: 'open',
                 type: 'Line', width: 2,
            },
            {
                dataSource: chartData, yName: 'close',
                type: 'Line', width: 2,
            },
            {
                dataSource: chartData, yName: 'high',
                type: 'Line', width: 2,
            },
            {
                dataSource: chartData, yName: 'low',
                type: 'Line', width: 2,
            }
        ],
        // trackball for chart
        tooltip: { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' },
        crosshair: { enable: true, lineType: 'Vertical' },
        title: 'Average Sales per Person'
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="./index.css" rel="stylesheet">
    <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></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>