Hi rani,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Namespaces
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult GetChartData()
{
string query = "SELECT ShipCountry, DATEPART(Year, OrderDate) [Year], COUNT(OrderId) [Total]";
query += " FROM Orders WHERE ShipCountry IN ('USA', 'France', 'Brazil', 'Canada')";
query += " GROUP BY ShipCountry, DATEPART(Year, OrderDate)";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
{
sda.Fill(dt);
}
}
List<string> countries = (from p in dt.AsEnumerable()
select Convert.ToString(p["ShipCountry"])).Distinct().ToList();
List<int> years = (from p in dt.AsEnumerable()
select Convert.ToInt32(p["Year"])).Distinct().ToList();
ChartData chartData = new ChartData();
chartData.Category = years.ToArray();
List<Series> ser = new List<Series>();
foreach (string country in countries)
{
Series series = new Series();
List<int> data = new List<int>();
foreach (int year in years)
{
int total = (from p in dt.AsEnumerable()
where Convert.ToInt32(p["Year"]) == year && p["ShipCountry"].ToString() == country.Trim()
select Convert.ToInt32(p["Total"])).FirstOrDefault();
data.Add(total);
}
series.name = country;
series.data = data.ToArray();
ser.Add(series);
}
chartData.Series = ser;
return Json(chartData);
}
public class ChartData
{
public int[] Category { get; set; }
public List<Series> Series { get; set; }
}
public class Series
{
public string name { get; set; }
public int[] data { get; set; }
}
View
<div ng-app="MyApp" ng-controller="MyController">
<div id="chart">
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$http.post("Home/GetChartData", { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
var category = response.data.Category;
var series = response.data.Series;
Highcharts.chart('chart', {
chart: { type: 'bar' },
title: { text: 'Country wise Order Distribution' },
subtitle: { text: 'Order Distribution' },
xAxis: {
categories: category,
title: { text: null }
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: { overflow: 'justify' }
},
tooltip: { valueSuffix: '' },
plotOptions: {
bar: {
dataLabels: { enabled: true }
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: false,
borderWidth: 1,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: { enabled: false },
series: series
});
});
});
</script>
Screenshot