Creating Live / Dynamic Charts in ASP.NET MVC Applications

CanvasJS allows you to create dynamic charts that update at a given interval. Dynamic charts are useful when you are displaying data that changes with time like stock price, temperature, etc. Technically, dynamic charts are created the same way as any other chart type except that dataPoints are added/removed at a predefined interval.

All available charts in CanvasJS support dynamic updates including Line Chart, Area Chart, Column Chart etc.

If you haven’t already, please refer to this tutorial for step by step instruction of adding charts to your ASP.Net MVC Application. We recommend that you download the Sample Visual Studio Project and try it on your own to understand the API better.


Download ASP.Net MVC Chart Samples

Here are the steps for creating Dynamic Chart.

Step 1:

In the View, create a basic chart as usual. But, assign dataPoints to a pre-defined variable (dps in this example)

var dps = [{x: 1, y: 10}, {x: 2, y: 10}, {x: 3, y: 10}, {x: 4, y: 10}, {x: 5, y: 10}];   //dataPoints. 

var chart = new CanvasJS.Chart("chartContainer",{
	title :{
		text: "Live Data"
	},
	axisX: {						
		title: "Axis X Title"
	},
	axisY: {						
		title: "Units"
	},
	data: [{
		type: "line",
		dataPoints : dps
	}]
});

chart.render();

Step 2:

Now, we see that values inside dps are being rendered. Now, in order to make the chart dynamic, we just need to change dps array as required and then call chart.render() again.

var xVal = dps.length + 1;
var yVal = 100;	
var updateInterval = 1000;

var updateChart = function () {
	yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
	dps.push({x: xVal,y: yVal,});
	xVal++;
	
	chart.render();		

	// update chart after specified time. 

};

setInterval(function(){updateChart()}, updateInterval);

In the above code, we are calling updateChart method every second. Each time updateChart adds a new dataPoint and calls chart.render().

Step 3:

If we don’t want the dataPoints to keep getting accumulated, we can remove old values from the beginning of the Array as shown below.

if (dps.length >  10 )
{
	dps.shift();				
}

Finalising

To summarize, in order to create live charts, we should update the array containing the dataPoints and call chart.render()

  Also See:     

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
    <h1>Charts using JSON & AJAX</h1>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>

    <script type="text/javascript">

        window.onload = function () {
            var dps = [{ x: 1, y: 10 }, { x: 2, y: 13 }, { x: 3, y: 18 }, { x: 4, y: 20 }, { x: 5, y: 17 }, { x: 6, y: 10 }, { x: 7, y: 13 }, { x: 8, y: 18 }, { x: 9, y: 20 }, { x: 10, y: 17 }];   //dataPoints.

            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Line Chart with Live Data"
                },
                data: [{
                    type: "line",
                    dataPoints: dps
                }]
            });

            chart.render();

            var xVal = dps.length + 1;
            var yVal = 15;
            var updateInterval = 500;

            var updateChart = function () {
                yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
                dps.push({ x: xVal, y: yVal });
                xVal++;

                chart.render();
            };
            setInterval(function () { updateChart() }, updateInterval);

        };
    </script>
</body>
</html>
using ASPNET_MVC_Samples.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ASPNET_MVC_Samples.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

    }
}
If you have any questions, please feel free to ask in our forums.Ask Question