Home › Forums › Chart Support › Dynamic chart from SQL Server in MVC › Reply To: Dynamic chart from SQL Server in MVC
My answer was deleted but I’ve received a reply on mail. I was trying do something similar like on this page but my chart still doesn’t update changes. Here my model:
namespace ChartMVC.Models { using System; using System.Collections.Generic; using System.Runtime.Serialization; [DataContract] public partial class Table { [DataMember] public int Id { get; set; } [DataMember] public Nullable<decimal> Value1 { get; set; } [DataMember] public Nullable<decimal> Value2 { get; set; } [DataMember] public Nullable<System.DateTime> Date { get; set; } } }
Controller:
private BazaDEntities _db = new BazaDEntities(); public ActionResult About() { try { ViewBag.DataPoints = JsonConvert.SerializeObject(_db.Table.ToList(), _jsonSetting); return View(); } catch (System.Data.Entity.Core.EntityException) { return View("Error"); } catch (System.Data.SqlClient.SqlException) { return View("Error"); } } JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
View:
<div id="chartContainer"></div> <script type="text/javascript"> var result = @Html.Raw(ViewBag.DataPoints); var dataPoints =[]; for(var i = 0; i < result.length; i++){ dataPoints.push({label:result[i].Date, y:result[i].Value2}); } $(function () { var chart = new CanvasJS.Chart("chartContainer", { theme: "theme2", zoomEnabled: true, animationEnabled: true, title: { text: "Line Chart with Data-Points from DataBase" }, data: [ { type: "line", dataPoints: dataPoints, } ] }); chart.render(); var x = i; var updateInterval = 1000; var updateChart = function () { for(var y=x; y < result.length; y++){ dataPoints.push({label:result[y].Date, y:result[y].Value2}); } x=y; chart.render(); }; setInterval(function () { updateChart() }, updateInterval); }); </script>
Any clues what I am doing wrong? Here is my full project