Download Project  (Full Project)

Step 1:

In this tutorial we make line chart in ASP.Net MVC. This data come from database dynamically and Display in chart. First create a ASP.Net Web Application project then select MVC then click ok. Then include ADO.NET Entity Data Model to get the data from database. Then first time run this project. Go to Views Folder ->Home Folder ->open index.cshtml. Given Bellow source index code:

@{
    ViewBag.Title = "Home Page";
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


<script>
    $(document).ready(function () {
        $.getJSON("/Home/GetData", function (data) {
            var Names = []
            var Qts = []
            for (var i = 0; i < data.length; i++) {
                Names.push(data[i].name);
                Qts.push(data[i].count);
            }

            Highcharts.chart('container', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Monthly Average Temperature'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    categories: Names
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                series: [{
                    name: 'Trend',
                    data: Qts
                }]
            });
        });
    });
   
   
</script>

Step 2:

Controller  responsible to get the data and pass the view using the Jquery. Also it’s convert the json format. Given Bellow HomeController source Code:

using highchart_line.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace highchart_line.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetData()
        {
            NORTHWNDEntities context = new NORTHWNDEntities();

            var query = context.Order_Details.Include("Product")
                   .GroupBy(p => p.Product.ProductName)
                   .Select(g => new { name = g.Key, count = g.Sum(w => w.Quantity) }).ToList();
            return Json(query,JsonRequestBehavior.AllowGet);
        }
    }
}

Step 3:

Now build and run the project.