title: C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing
body: <p>I have created a pie chart using Chart.js and data is taken from the SQL-server database using entity framework. That is done in the controller. </p>
  
  <pre><code>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&lt;PlannedVsActualModel&gt;(@"SELECT [Planned], [Actual] FROM [dbo].[PlanVsActual]").ToList();
                  return Json( studentName, JsonRequestBehavior.AllowGet);
              } 
          }     
      }
  }
  </code></pre>
  
  <p>The View is as follows </p>
  
  <pre><code>&lt;div class="col-lg-4"&gt;
      &lt;canvas id="chart_3" width="800" height="800"  http-equiv="refresh" content="5"&gt;&lt;/canvas&gt;
      &lt;h5 style="text-align:center"&gt;Total&lt;/h5&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      $(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==========
             //==============================================
          }
      });
  
  
  
  &lt;/script&gt; 
  
  </code></pre>
  
  <p>I have created the following Model </p>
  
  <pre><code>namespace ChartJsDatabase.Models
  {
      public class PlannedVsActualModel
      {
          public int Planned { get; set; }
          public int Actual { get; set; }
      }
  }
  </code></pre>
  
  <p>I need to update the pie chart when there is a change in the SQL Server Database values. We are not going to refresh the entire page, but only the chart and it should happen automatically in a continuous-time interval.</p>