Dynamic Charts are also popularly called as Live or Real-Time Charts. Column Chart, like any other chart in CanvasJS, supports updating of data in real-time. Given example shows Real-Time Column Chart along with source code that you can try running locally.
@{ Layout = null; } <!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Pollutant Level in a City" }, axisY: { title: "Concentration (in µg/m3)" }, data: [{ type: "column", yValueFormatString: "#,##0.00 µg/m3", indexLabel: "{y}", dataPoints: @Html.Raw(ViewBag.DataPoints) }] }); function updateChart() { var deltaY, yVal; var dps = chart.options.data[0].dataPoints; for (var i = 0; i < dps.length; i++) { deltaY = (1 + Math.random() * (-1 - 1)) * 0.1 * dps[i].y; yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0; dps[i].y = yVal; } chart.options.data[0].dataPoints = dps; chart.render(); }; updateChart(); setInterval(function () { updateChart() }, 2000); } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script> </body> </html>
using ASPNET_MVC_ChartsDemo.Models; using Newtonsoft.Json; using System.Collections.Generic; using System.Web.Mvc; namespace ASPNET_MVC_ChartsDemo.Controllers { public class HomeController : Controller { // GET: Home public ActionResult Index() { List<DataPoint> dataPoints = new List<DataPoint>(); dataPoints.Add(new DataPoint("NO2", 64)); dataPoints.Add(new DataPoint("PM10", 80)); dataPoints.Add(new DataPoint("O3", 32)); dataPoints.Add(new DataPoint("NH3", 3)); dataPoints.Add(new DataPoint("SO2", 8)); dataPoints.Add(new DataPoint("CO", 22)); dataPoints.Add(new DataPoint("PM2.5", 79)); ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints); return View(); } } }
using System; using System.Runtime.Serialization; namespace ASPNET_MVC_ChartsDemo.Models { //DataContract for Serializing Data - required to serve in JSON format [DataContract] public class DataPoint { public DataPoint(string label, dynamic y) { this.Label = label; this.Y = y; } //Explicitly setting the name to be used while serializing to JSON. [DataMember(Name = "label")] public string Label = ""; //Explicitly setting the name to be used while serializing to JSON. [DataMember(Name = "y")] public dynamic Y = null; } }
color property can be used to change the color of columns. You can also customize their opacity using fillOpacity property. Other commonly used customization options are indexLabel, animationEnabled, theme, etc.