How to populate local data with Razor Pages

[Alexander]

Hello,

I'm completely new with ASP.Net and learning how to use it at the moment.
I want to use the Stock Chart with local data, but it does not even seem to load with some example candles.

Can you may tell me where I made the mistake?

The Page - Index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Dashboard";
}


<div class="text-center">
    <h1 class="display-4">C³ Dashboard</h1>
    <p>
        <ejs-stockchart id="stockchart" load="stockload">
                <e-stockchart-series-collection>
                    <e-stockchart-series type='Candle' xName='test' name='TestChart'> </e-stockchart-series>
                </e-stockchart-series-collection>
                <e-stockchart-primaryxaxis valueType="DateTime">
                </e-stockchart-primaryxaxis>
            </ejs-stockchart>
    <script>
        var data = @Model.chartData;
        function stockload(args) {
            args.stockChart.series[0].dataSource = data;


        }
    </script>
    </p>
</div>

The Code behind: Index.cshtml.cs

 public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;


        [BindProperty]
        public List<ChartData> chartData { get; set; }


        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
            chartData = new List<ChartData>();
            chartData.Add(new ChartData() { high = 100.0, open = 80.0, close = 70.0, low = 60.0, timestamp = DateTime.UtcNow.AddMinutes(-2), volume = 1000 });
            chartData.Add(new ChartData() { high = 150.0, open = 70.0, close = 90.0, low = 65.0, timestamp = DateTime.UtcNow.AddMinutes(-1), volume = 1000 });
            chartData.Add(new ChartData() { high = 120.0, open = 90.0, close = 100.0, low = 80.0, timestamp = DateTime.UtcNow, volume = 1000 });
        }


        public void OnGet()
        {


        }


        public class ChartData
        {
            public DateTime timestamp;
            public double high;
            public double low;
            public double close;
            public double open;
            public int volume;
        }
    }

Greetings

Alexander

[Durga Gopalakrishnan]

Hi Alexander, 

Greetings from Syncfusion. 

We request you to specify the datasource list and mapping properties inside IndexModel class and access those fields using @Model directive in Index.cshtml page. We have prepared  

Index.cshtml 

@page 

@model IndexModel 

<ejs-stockchart> 

    <e-stockchart-series-collection> 

        <e-stockchart-series dataSource="@Model.Data" type='Candle' xName="x"> </e-stockchart-series> 

    </e-stockchart-series-collection> 

</ejs-stockchart> 

 

Index.cshtml.cs 

public class IndexModel : PageModel 

    { 

        public class ChartData 

        { 

            public DateTime x { get; set; } 

            //… 

        } 

        public List<ChartData> Data = new List<ChartData> 

        { 

            new ChartData { x = new DateTime(1950, 1, 12), high = 125, low = 70,  open = 115, close = 90 , volume=10000 }, 

          //…. 

        }; 

} 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/StockChartPage870797788.zip 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/page-model-binding/ 

Kindly revert us if you have any concerns. 

Regards,  

Durga G 

[Alexander]

Thank you very much.

For clarification:

I use dataSource as chart property if I want to use local data and the script (like shown here https://ej2.syncfusion.com/aspnetcore/documentation/stock-chart/working-with-data/ ) when I want to show data that get's fetched live from an API, right?

[Durga Gopalakrishnan]

Hi Alexander, 

Most welcome. Yes, to use local data in script, you need to refer the required datasource file script reference. You can also use the remote data which uses the hosted URL to fetch the data for chart series. Please check with the below links. 

UG : https://ej2.syncfusion.com/aspnetcore/documentation/chart/working-with-data/#remote-data 

Online Demo : https://ej2.syncfusion.com/aspnetcore/Chart/RemoteData#/bootstrap5 

Please let us know if you have any concerns. 

Regards,  

Durga G