Working with Data

4 Sep 202513 minutes to read

Chart can visualise data bound from local or remote data.

Local Data

You can bind a simple JSON data to the chart using DataSource property in series.

@using Syncfusion.EJ2;

    @Html.EJS().StockChart("container").Title("AAPL Stock Price")
    .Series(sr =>
     {
      sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
     })            
    .ChartArea(area => area.Border(br=>br.Width(0)))
    .Border(br => br.Width(1))
    .Render()

    <script>

    var data = [
        { date: new Date('2012-04-02'), open: 85.9757, high: 90.6657, low: 85.7685, close: 90.5257, volume: 660187068 },
        { date: new Date('2012-04-09'), open: 89.4471, high: 92, low: 86.2157, close: 86.4614, volume: 912634864 },
        { date: new Date('2012-04-16'), open: 87.1514, high: 88.6071, low: 81.4885, close: 81.8543, volume: 1221746066 },
        { date: new Date('2012-04-23'), open: 81.5157, high: 88.2857, low: 79.2857, close: 86.1428, volume: 965935749 },
        { date: new Date('2012-04-30'), open: 85.4, high: 85.4857, low: 80.7385, close: 80.75, volume: 615249365 },
        { date: new Date('2012-05-07'), open: 80.2143, high: 82.2685, low: 79.8185, close: 80.9585, volume: 541742692 },
        { date: new Date('2012-05-14'), open: 80.3671, high: 81.0728, low: 74.5971, close: 75.7685, volume: 708126233 },
        { date: new Date('2012-05-21'), open: 76.3571, high: 82.3571, low: 76.2928, close: 80.3271, volume: 682076215 },
        { date: new Date('2012-05-28'), open: 81.5571, high: 83.0714, low: 80.0743, close: 80.1414, volume: 480059584 },
        { date: new Date('2012-06-04'), open: 80.2143, high: 82.9405, low: 78.3571, close: 82.9028, volume: 517577005 },
    ]
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }        
    }
}

Handling No Data

When no data is available to render in the stock chart, the NoDataTemplate property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.

@using Syncfusion.EJ2;

@(Html.EJS().StockChart("container").Title("AAPL Stock Price")
    .Series(sr => {
        sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).Add();
    })
    .ChartArea(area => area.Border(br => br.Width(0)))
    .Border(br => br.Width(1)).NoDataTemplate("#No-Data-Template").Load("load").Loaded("loaded")
    .Render()
)

<style>
    #noDataTemplateContainer {
        height: inherit;
        width: inherit;
    }

    .load-data-btn {
        border-radius: 4px;
        margin-top: 75px;
        display: inline-flex;
        align-items: center;
    }

    .light-bg {
        background-color: #fafafa;
        color: #000000;
    }

    .template-align img {
        max-width: 150px;
        /* Adjust size as needed */
        max-height: 150px;
        margin-top: 55px;
    }

    .template-align {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #control-container {
        padding: 0px!important;
    }

    #noDataButtonOverlay {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
    }
</style>
    <div id="noDataButtonOverlay" style="display: none;">
        @Html.EJS().Button("loadDataButton").Content("Load data").IconCss("e-icons e-refresh").CssClass("load-data-btn e-outline").IsPrimary(false).HtmlAttributes(new Dictionary<string, object> { { "onclick", "loadChartData()" } }).Render()
    </div>

    <script id='No-Data-Template' type="text/x-template">
        <div id='noDataTemplateContainer' class="light-bg">
            <div class="template-align">
                <img src="no-data.png" alt="No Data" />
            </div>
            <div class="template-align">
                <p style="font-size: 15px; margin: 10px 0 0;"><strong>No data available to display.</strong></p>
            </div>
        </div>
    </script>

    <script>
        var data = [
            { date: new Date('2012-04-02'), open: 85.9757, high: 90.6657, low: 85.7685, close: 90.5257, volume: 660187068 },
            { date: new Date('2012-04-09'), open: 89.4471, high: 92, low: 86.2157, close: 86.4614, volume: 912634864 },
            { date: new Date('2012-04-16'), open: 87.1514, high: 88.6071, low: 81.4885, close: 81.8543, volume: 1221746066 },
            { date: new Date('2012-04-23'), open: 81.5157, high: 88.2857, low: 79.2857, close: 86.1428, volume: 965935749 },
            { date: new Date('2012-04-30'), open: 85.4, high: 85.4857, low: 80.7385, close: 80.75, volume: 615249365 },
            { date: new Date('2012-05-07'), open: 80.2143, high: 82.2685, low: 79.8185, close: 80.9585, volume: 541742692 },
            { date: new Date('2012-05-14'), open: 80.3671, high: 81.0728, low: 74.5971, close: 75.7685, volume: 708126233 },
            { date: new Date('2012-05-21'), open: 76.3571, high: 82.3571, low: 76.2928, close: 80.3271, volume: 682076215 },
            { date: new Date('2012-05-28'), open: 81.5571, high: 83.0714, low: 80.0743, close: 80.1414, volume: 480059584 },
            { date: new Date('2012-06-04'), open: 80.2143, high: 82.9405, low: 78.3571, close: 82.9028, volume: 517577005 },
        ]
        var dataLoaded = false;
        var load = function (args) {
            args.stockChart.series[0].dataSource = dataLoaded ? data : [];
        };
        var loaded = function (args) {
            var buttonOverlay = document.getElementById("noDataButtonOverlay");
            if (buttonOverlay) {
                buttonOverlay.style.display = !dataLoaded ? 'block' : 'none';
            }
        };
        var loadChartData = function () {
            var chart = document.getElementById('container').ej2_instances[0];
            chart.series[0].dataSource = data;
            chart.series[0].animation.enable = true;
            dataLoaded = true;
            var buttonOverlay = document.getElementById("noDataButtonOverlay");
            if (buttonOverlay) {
                buttonOverlay.style.display = 'none';
            }
            chart.refresh();
        };
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }        
    }
}

ASP.NET MVC Stock Chart Control

See Also