[Arqu07]

Thanks for your reply and efforts. But this is not exactly what I want to do. This chart is updating, but it draws the same chart over and over again, it’s useless and doesn’t react when I add new record in database. I want to draw only newly added points and I’m stuck with that :/

[Arqu07]

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

[Arqu07]

Thanks for your answer, your samples are great and very useful, but I am total beginner in that, it’s clear for me how to do this when we generate random data but when I want to use data from database i have troubles. When I load the page the chart is creating from my data but when I add new record the chart doesn’t updating.