Set initial chart data and labels for the ChartsWidget
Hi team,
I'd like to set own data for the chart as below. however, it doesn't work.
please advise how can I set the chart data for Blazor.
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender){
var chart1Data = "[6100, 3100, 3100, 2400, 2400, 1800, 1800, 2400, 2400, 3200, 3200, 2800, 2800, 3250, 3250]";
var chart1Labels = "["9AM", "10.30AM", "11AM", "11.15AM", "11.30AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM"]";
await JS.InvokeVoidAsync("KTChartsWidget35.init", "#kt_charts_widget_35_tab_1", "#kt_charts_widget_35_chart_1", chart1Data, chart1Labels, false);
}
}
Replies (4)
Thanks for quick response.
There's no errors. however, it doesn't loading from the chart1Data of OnAfterRenderAsync. it loads default data from the init func() of the original js source(widget-35.js).
because, I set the first value by "99999" of chart1Data. but, it doesn't affected actual chart value.
index.razor
<div class="col-xl-4">
<_ChartsWidget35></_ChartsWidget35>
</div>
_ChartsWidget35.razor
if(firstRender){
var chart1Data = "[99999, 3100, 3100, 2400, 2400, 1800, 1800, 2400, 2400, 3200, 3200, 2800, 2800, 3250, 3250]";
var chart1Labels = "["9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]";
await JS.InvokeVoidAsync("KTChartsWidget35.init", "#kt_charts_widget_35_tab_1", "#kt_charts_widget_35_chart_1",
chart1Data, chart1Labels, false);
}
Hi Brayan,
By default, KTChartsWidget35.init() doesn't have properties to modify char data, if you want to change data from your Blazor component you can create an array of your data and then pass them as params.
Here is an example of how you should modify init function:
init: function (chart1Data, chart1Labels) {
initChart(chart1, "#kt_charts_widget_35_tab_1", "#kt_charts_widget_35_chart_1", chart1Data, chart1Labels, true);
// ...
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Sorry for the late reply.
Your code looks fine and it should initialize KTChartsWidget35. Do you have any errors when running your app?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks for quick response!
I've replied above. Please advise what I need to check more.
