Getting started with ASP.NET MVC Stock Chart control

ASP.NET Core 1.0 Application Using Visual Studio 2017

System Requirements

To work with ASP.NET Core 1.0, you need to make sure is whether you have installed the following software on your machine

• Visual Studio 2017
• DotNetCore 2.0

Configure Syncfusion UI Components in ASP.NET Core Application

The following steps helps to create a ASP.NET Core web application to configure our components.

• Open Visual Studio 2017 to create ASP.NET Core web application.
• After project creation, install the Syncfusion Packages in your application.
• Select the Tools->Nuget Package Manager->Package Manager settings the dialog window will open.
• Navigate to the Nuget Package Manager->Package Sources from the options dialog.
• Click the Add button to create the new package sources.

• Select the newly created Package Source and rename the source name using the Name input box.

  Name: Name of the package that listed in Available package sources

  Source: Syncfusion ASP.NET Core NuGet Package feed URL

  https://api.nuget.org/v3/index.json

Adding TagHelpers

• Now open _viewImports.cshtml file from the views folder and add the following namespace for components references and Tag Helper support.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2

Adding ScriptManager

• Add ScriptManager to the bottom of the layout.cshtml page. The ScriptManager used to place our control initialization script in the page.

<ej-scripts> </ej-scripts>

Adding component to the Application

• Now open your view page to render our Syncfusion components.

        @(Html.EJS().StockChart("container").Load("load")
                            .Series(sr =>
                            {
                                sr.Add();
                            })
                            .Render())

Populate Stock Chart With Data

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

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

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

<script src="~/financial-data.js"></script>

        @(Html.EJS().StockChart("container").Load("stockload")
                                    .Series(sr =>
                                    {
                                        sr.Name("Apple").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").High("high").Low("low").Open("open").Close("close").Add();
                                    })
                                    .Render())


    <script>
           var data = chartData;
            args.stockChart.series[0].dataSource = data;

        }
    </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 populateData()
        {
            return View();
        }
    }
}