question

erossini avatar image
0 Votes"
erossini asked ZhiLv-MSFT answered

How can I link a custom function to a ChartJs via Blazor?

I'm working on a facade for ChartJs for Blazor (see GitHub). What I like to do is add JavaScript function to extend ChartJs. I don't know how to link a function in the UI side with the JavaScript in the Blazor component.

For example, in the following code I customize the graph with a custom code in the onAnimationComplete.

 <canvas id="myChart1" height="300" width="500"></canvas>
 <canvas id="myChart2" height="300" width="500"></canvas>
    
 var chartData = {
     labels: ["January", "February", "March", "April", "May", "June"],
     datasets: [
         {
             fillColor: "#79D1CF",
             strokeColor: "#79D1CF",
             data: [60, 80, 81, 56, 55, 40]
         }
     ]
 };
    
 var ctx = document.getElementById("myChart1").getContext("2d");
 var myLine = new Chart(ctx).Line(chartData, {
     showTooltips: false,
     onAnimationComplete: function () {
    
         var ctx = this.chart.ctx;
         ctx.font = this.scale.font;
         ctx.fillStyle = this.scale.textColor
         ctx.textAlign = "center";
         ctx.textBaseline = "bottom";
    
         this.datasets.forEach(function (dataset) {
             dataset.points.forEach(function (points) {
                 ctx.fillText(points.value, points.x, points.y - 10);
             });
         })
     }
 });
    
 var ctx = document.getElementById("myChart2").getContext("2d");
 var myBar = new Chart(ctx).Bar(chartData, {
     showTooltips: false,
     onAnimationComplete: function () {
    
         var ctx = this.chart.ctx;
         ctx.font = this.scale.font;
         ctx.fillStyle = this.scale.textColor
         ctx.textAlign = "center";
         ctx.textBaseline = "bottom";
    
         this.datasets.forEach(function (dataset) {
             dataset.bars.forEach(function (bar) {
                 ctx.fillText(bar.value, bar.x, bar.y - 5);
             });
         })
     }
 });

202650-screenshot-1.png

So, imagine that the code for the function onAnimationComplete is available in a JavaScript in the project where I use the component. The some for ticks or any other property.

How can I tell my Blazor ChartJs component that I want to use that function?


dotnet-aspnet-core-blazor
screenshot-1.png (21.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @erossini,

What I like to do is add JavaScript function to extend ChartJs. I don't know how to link a function in the UI side with the JavaScript in the Blazor component.
So, imagine that the code for the function onAnimationComplete is available in a JavaScript in the project where I use the component. The some for ticks or any other property.
How can I tell my Blazor ChartJs component that I want to use that function?

For the JS function, you need to add them inside the closing </body> tag of wwwroot/index.html (Blazor WebAssembly) or Pages/_Layout.cshtml (Blazor Server).

203091-image.png

[Note] When create the Chat object, if using your code, it will show the Uncaught TypeError: (intermediate value).Line is not a function error. So I change the code to use the type and data attribute.

Then, in the Blazor component, you need to inject the IJSRuntime and call one of the following methods:

  • IJSRuntime.InvokeAsync

  • JSRuntimeExtensions.InvokeAsync

  • JSRuntimeExtensions.InvokeVoidAsync

Code like this:

203075-image.png

You can view the source code from here: 203008-code.txt

Then, the result like this:

203007-2.gif

More detail information see Call JavaScript functions from .NET methods in ASP.NET Core Blazor


If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion


image.png (121.0 KiB)
image.png (235.4 KiB)
code.txt (1.7 KiB)
2.gif (171.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered

The javascript should implement a method called createChart(options) method that blazer can call via interop:

 function createChart(options) {  
     var ctx = document.getElementById(options.chartId).getContext("2d");
     var myLine = new Chart(ctx).Line(options.chartData, {
         showTooltips: false,
         onAnimationComplete: window[options.onAnimationComplete]
      });
 }    

then call like:

 await JS.InvokeVoidAsync("createChart", new 
 {
     canvasId = "myChart1",
     onAnimationComplete =  "function1”,
     chartData =  new 
     {
         labels = new string[] {"January", "February", "March", "April", "May", "June"},
         datasets = new object[] 
         {
             new 
             {
                 fillColor = "#79D1CF",
                 strokeColor = "#79D1CF",
                 data = new int[] {60, 80, 81, 56, 55, 40}
             }
         }
     }
 }); 



5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.