ASP.NET MVC Charts & Graphs with Zoom & Pan

Download ASP.NET Chart Samples

Zooming and Panning allows analysis of data at microscopic level and is very useful while plotting graphs with large data sets. All Charts with axis support Zooming & Panning along both X & Y axes in CanvasJS. Given example demonstrates a Line Chart with Zoom / Pan feature. It also includes source code that you can try running locally.

  1. @{
  2. 	Layout = null;
  3. }
  4.  
  5. <!DOCTYPE HTML>
  6. <html>
  7. <head>
  8. <script>
  9. window.onload = function () {
  10.  
  11. var chart = new CanvasJS.Chart("chartContainer", {
  12. 	theme: "light2", // "light1", "light2", "dark1", "dark2"
  13. 	animationEnabled: true,
  14. 	zoomEnabled: true,
  15. 	title: {
  16. 		text: "Try Zooming and Panning"
  17. 	},
  18. 	data: [{
  19. 		type: "line",
  20. 		dataPoints: @Html.Raw(ViewBag.DataPoints)
  21. 	}]
  22. });
  23.  
  24. chart.render();
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  30. <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  31. </body>
  32. </html>                              
  1. using ASPNET_MVC_ChartsDemo.Models;
  2. using Newtonsoft.Json;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Web.Mvc;
  6.  
  7. namespace ASPNET_MVC_ChartsDemo.Controllers
  8. {
  9. 	public class HomeController : Controller
  10. 	{
  11. 		// GET: Home
  12. 		public ActionResult Index()
  13. 		{
  14. 			double count = 1000, y = 100;
  15. 			Random random = new Random();
  16. 			List<DataPoint> dataPoints = new List<DataPoint>();
  17.  
  18. 			for (int i = 0; i < count; i++)
  19. 			{
  20. 				y += random.Next(-10, 11);
  21. 				dataPoints.Add(new DataPoint(i, y));
  22. 			}
  23.  
  24. 			ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
  25.  
  26. 			return View();
  27. 		}
  28. 	}
  29. }                        
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Runtime.Serialization;
  5. using System.Web;
  6.  
  7. namespace ASPNET_MVC_ChartsDemo.Models
  8. {
  9. 	//DataContract for Serializing Data - required to serve in JSON format
  10. 	[DataContract]
  11. 	public class DataPoint
  12. 	{
  13. 		public DataPoint(double x, double y)
  14. 		{
  15. 			this.X = x;
  16. 			this.Y = y;
  17. 		}
  18.  
  19. 		//Explicitly setting the name to be used while serializing to JSON.
  20. 		[DataMember(Name = "x")]
  21. 		public Nullable<double> X = null;
  22.  
  23. 		//Explicitly setting the name to be used while serializing to JSON.
  24. 		[DataMember(Name = "y")]
  25. 		public Nullable<double> Y = null;
  26. 	}
  27. }

Chart Customizations

You can customize along which axis zooming / panning should occur using zoomType property. Some other frequently used customization options include animationEnabled, animationDuration, theme, etc.

Note   For step by step instructions, follow our ASP.NET MVC Integration Tutorial