I want to bind Stock Chart with data in a JSON format from a third-party API service.
I've already tried to:
1) Download data via HttpClient from the API service in the "OnInitializedAsync" method
2) Serialize them
3) Create objects based on this data and add them to the list that is specified in the DataSource.
But the problem is that this method is asynchronous and the graphic interface loads faster than the data arrives. As a result, I get an empty graph. It will not work to replace asynchronous methods with synchronous ones, because a deadlock is formed.
The question is: How do I fill the Stock Chart with JSON data from a third-party API service?
Example of JSON data:
{
"adjusted": true,
"queryCount": 2,
"request_id": "6a7e466379af0a71039d60cc78e72282",
"results": [
{
"c": 75.0875,
"h": 75.15,
"l": 73.7975,
"n": 1,
"o": 74.06,
"t": 1577941200000,
"v": 135647456,
"vw": 74.6099
},
{
"c": 74.3575,
"h": 75.145,
"l": 74.125,
"n": 1,
"o": 74.2875,
"t": 1578027600000,
"v": 146535512,
"vw": 74.7026
}
],
"resultsCount": 2,
"status": "OK",
"ticker": "AAPL"
}
Hi Maksim,
Greetings from Syncfusion.
We suggest you to use CSS loader for stock chart until data is obtained from service. We already have an online demo to achieve your requirement. We have prepared sample based on that and attached for your reference.
@if (DataSource == null) { <div class="stockchartloader"></div> } else { <div class="@loadClass"></div> <div class="@loadDiv"> <SfStockChart></SfStockChart> </div> <style> .stockchartloader { border: 6px solid #f3f3f3; border-top: 6px solid #7a0fff; width: 40px; height: 40px; position: absolute; top: 46%; left: 56%; border-radius: 50%; } .stockchartdiv { visibility: hidden; } </style> } @code { string loadDiv = "stockchartdiv"; void ChartLoaded(StockChartEventArgs args) { loadClass = ""; loadDiv = ""; StateHasChanged(); } |
Please let us know if you have any concerns.
Regards,
Durga Gopalakrishnan.
