Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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);
}
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(