C # MVC5 Круговая диаграмма JavaScript Chart.js с обновлением в реальном времени из базы данных SQL Server без обновления

Question

Я создал круговую диаграмму, используя Chart.js, и данные были взяты из базы данных SQL-сервера, используя структуру сущностей. Это сделано в контроллере.

namespace ChartJsDatabase.Controllers
{
    public class ChartController : Controller
    {
        //============ The Object Created here is used to get the database connection  =============
        CSharpCornerEntities entities = new CSharpCornerEntities();
        //==========================================================================================
        // GET: Chart
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult PieChart()
        //============= This Action Result Requires ===============
        //============= String Database Query =====================
        {
            using (entities)//;
            {
                var studentName = entities.Database.SqlQuery<PlannedVsActualModel>(@"SELECT [Planned], [Actual] FROM [dbo].[PlanVsActual]").ToList();
                return Json( studentName, JsonRequestBehavior.AllowGet);
            } 
        }     
    }
}

Представление выглядит следующим образом

<div class="col-lg-4">
    <canvas id="chart_3" width="800" height="800"  http-equiv="refresh" content="5"></canvas>
    <h5 style="text-align:center">Total</h5>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Chart/PieChart",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                successFunc(response);
            },
        });

        function successFunc(jsondata) {
            console.log(jsondata);
             window.globalVariable = jsondata;

            console.log(globalVariable[0].Actual)

            //===========Chart Js Code Starts Here ============
            //=================================================
            var ctx = document.getElementById('chart_3').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'doughnut', 
                data: {

                    datasets: [
                      {

                          backgroundColor: ["#228B22", "#f0eeef"],
                          //========== Data for Chart JS ==============
                          data: [globalVariable[0].Actual, (globalVariable[0].Planned - globalVariable[0].Actual)],
                          //===========================================
                          label: ["Actual", "Planned"],
                          borderWidth: 0,


                      }
                    ]
                }, 
                options: {

                    cutoutPercentage: 80, 
                    elements: {
                       center: {
                           text: [(globalVariable[0].Actual/globalVariable[0].Planned*100).toFixed(2)]+"%",
                            color: '#666666', //Default black
                            fontStyle: 'Helvetica', //Default Arial
                            FontSize: 1,
                            sidePadding: 1 //Default 20 (as a percentage)

                        }
                    }
                }

            });
            // ==========Chart Js Chart Ends Here==========
           //==============================================
        }
    });



</script> 

Я создал следующую модель

namespace ChartJsDatabase.Models
{
    public class PlannedVsActualModel
    {
        public int Planned { get; set; }
        public int Actual { get; set; }
    }
}

Мне необходимо обновить круговую диаграмму при изменениив значениях базы данных SQL Server. Мы не собираемся обновлять всю страницу, а только график, и это должно происходить автоматически через непрерывный интервал времени.

Answer 1

Вы можете достичь этого несколькими способами, вот тот, с частичным представлением

      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.

Answer 2

Просто, правда. Просто используйте chart.config для редактирования его свойства, затем запустите chart.update()

Вот дополнительная информация: https://www.chartjs.org/docs/latest/developers/updates.html