Chartjs-C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing

by

0👍

Simple, really. Just use the chart.config to edit it’s property, then run chart.update()

Here is more info: https://www.chartjs.org/docs/latest/developers/updates.html

0👍

You can achieve it in multiple ways, here is the one with partial views

      a) Create a partial view  and include it  with your page 
            <Div id="pieChart">  
                   @HTML.Partial("__pieChartPartial" , chartdata)  
            </Div> 
      b) write a jquery script in page 
          <script>  
           setInterval(function() 
          {$('#__pieChartPartial').load("controller/action")},1000);   # adjust interval time based on your requirement 
         </script>  
      c) In the action method return partial view result
           Return PartialView("__pieChartPartial", chartdata) 
      d) Make output cache, nostore and set duration to 1 min     
      [OutputCache(NoStore=true,Location=System.Web.UI.OutputCacheLocation.Client,Duration=1)]

      e) Enable  sql broker.
      f) Install-Package SqlTableDependency 
      g) Write a code for table watcher and start watching in controller's constructor 
      h) In table dependency change event, refresh chart data.

Leave a comment