• Chart Demos
  • Download
  • Integrations
    • Front End Technology Samples
      • React Charts
      • Angular Charts
      • Javascript Charts
      • jQuery Charts
    • Server Side Technology Samples
      • PHP Charts
      • ASP.NET MVC Charts
      • Spring MVC Charts
      • JSP Charts
  • Dashboards
  • License
  • Blog
  • Docs
  • Support Forum
  • My Account
  • My Account
  • OVERVIEW
    • Chart with Zooming / Panning
    • Chart using JSON Data
    • Chart with Animation
    • Multi Series Chart
    • Chart with Multiple Axes
    • Chart with Crosshair
    • Chart with Scale Breaks
    • Chart with Logarithmic Axis
    • Performance with 50,000 Data Points
    • Responsive Charts
    • Chart with Drilldown
  • LINE CHARTS
    • Line Chart
    • Spline Chart
    • Step Line Chart
  • AREA CHARTS
    • Area Chart
    • Multi Series Area Chart with Date Time Axis
    • Spline Area Chart
    • Multi Series Spline Area
    • Step Area Chart
    • Range Area Chart
    • Range Spline Area Chart
    • Stacked Area Chart
    • Stacked Area 100% Chart
  • COLUMN & BAR CHARTS
    • Column Chart
    • Bar Chart
    • Range Column Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Range Bar Chart
    • Stacked Bar Chart
    • Stacked Bar 100% Chart
    • Waterfall Chart
  • PIE & FUNNEL CHARTS
    • Pie Chart
    • Pie Chart with Index Labels Placed Inside
    • Doughnut Chart
    • Funnel Chart
    • Funnel Chart with Custom Neck
    • Pyramid Chart
  • FINANCIAL CHARTS
    • Candlestick Chart
    • Candlestick Chart from JSON
    • OHLC Chart
  • SCATTER & BUBBLE CHARTS
    • Scatter Chart
    • Scatter Chart with Custom Markers
    • Bubble Chart
  • BOX & WHISKER CHARTS
    • Box and Whisker Chart
    • Box and Whisker Chart with Customization
  • COMBINATION CHARTS
    • Error chart
    • Error Line Chart
    • Combination of Column, Line and Area Chart
  • DYNAMIC CHARTS
    • Dynamic Line Chart
    • Dynamic Column Chart
    • Dynamic Multi Series Chart
  • DATA BINDING
    • Chart from CSV
    • Chart from XML
    • Chart Data from Database
  • REACT, ANGULAR, JQUERY
    • React Charts
    • Angular Charts
    • jQuery Charts
    • JavaScript Charts
  • SERVER SIDE TECHNOLOGIES
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts

ASP.NET MVC Line Charts & Graphs

  • HTML Code Samples
  • PHP Code Samples
  • ASP.NET Code Samples
  • JSP Code Samples
  • Spring MVC Code Samples
  • Dashboard Samples

Line / Trend Charts are drawn by interconnecting all data points in a series using straight line segments. Library also allows you to plot lines as solid, dashed or dotted. Given example shows multi-series line chart along with source code that you can try running locally.

  • View
  • Controller
  • Model
@{
	Layout = null;
}

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Product Trends By Month"
	},
	axisY: {
		includeZero: false
	},
	toolTip: {
		shared: true
	},
	data: [{
		type: "line",
		name: "Desktops",
		showInLegend: true,
		dataPoints: @Html.Raw(ViewBag.DataPoints1)
	}, {
		type: "line",
		name: "Laptops",
		showInLegend: true,
		dataPoints: @Html.Raw(ViewBag.DataPoints2)
	}, {
		type: "line",
		name: "Mobiles",
		showInLegend: true,
		dataPoints: @Html.Raw(ViewBag.DataPoints3)
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/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> dataPoints1 = new List<DataPoint>();
			List<DataPoint> dataPoints2 = new List<DataPoint>();
			List<DataPoint> dataPoints3 = new List<DataPoint>();

			dataPoints1.Add(new DataPoint("Jan", 72));
			dataPoints1.Add(new DataPoint("Feb", 67));
			dataPoints1.Add(new DataPoint("Mar", 55));
			dataPoints1.Add(new DataPoint("Apr", 42));
			dataPoints1.Add(new DataPoint("May", 40));
			dataPoints1.Add(new DataPoint("Jun", 35));

			dataPoints2.Add(new DataPoint("Jan", 48));
			dataPoints2.Add(new DataPoint("Feb", 56));
			dataPoints2.Add(new DataPoint("Mar", 50));
			dataPoints2.Add(new DataPoint("Apr", 47));
			dataPoints2.Add(new DataPoint("May", 65));
			dataPoints2.Add(new DataPoint("Jun", 69));
				
			dataPoints3.Add(new DataPoint("Jan", 38));
			dataPoints3.Add(new DataPoint("Feb", 46));
			dataPoints3.Add(new DataPoint("Mar", 55));
			dataPoints3.Add(new DataPoint("Apr", 70));
			dataPoints3.Add(new DataPoint("May", 77));
			dataPoints3.Add(new DataPoint("Jun", 91));

			ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints1);
			ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints2);
			ViewBag.DataPoints3 = JsonConvert.SerializeObject(dataPoints3);

			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, double 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 Nullable<double> Y = null;
	}
}                        

Related Customization

lineThickness property can be used to customize the thickness of the line. The markers can be also customized using markerColor and markerType property. Some other commonly used customization options are markerSize, markerBorderColor, etc.

© fenopix
  • About Us
  • FAQs
  • Careers
  • Privacy Policy
Server Side Technologies
  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts
Front End Technologies
  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
Contact
  • Fenopix, Inc.
  • 340 S Lemon Ave, #8004,
  • Walnut, California 91789
  • United States Of America