Hi rani,
Refering the HighChart API reference i have created the example.
https://api.highcharts.com/class-reference/Highcharts.Chart#downloadCSV
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>
<hr />
<button type="button" ng-click="ExportChart('Excel')">Export Excel</button>
<button type="button" ng-click="ExportChart('CSV')">Export CSV</button>
<button type="button" ng-click="ExportChart('Image')">Export Image</button>
</div>
<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" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
var chart;
$http.post("Home/GetChartData", { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
var category = response.data.Category;
var series = response.data.Series;
chart = 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} },
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
var seriesName = e.point.series.name;
var category = e.point.category;
var value = e.point.y;
alert('Country : ' + seriesName +
'\nYear : ' + category +
'\nValue : ' + value);
}
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: { enabled: false },
series: series,
exporting: {
filename: 'OrderDetails'
}
});
});
$scope.ExportChart = function (type) {
if (type == 'Excel') {
chart.downloadXLS();
} else if (type == 'CSV') {
chart.downloadCSV();
} else if (type == 'Image') {
chart.exportChartLocal({
type: 'image/jpeg'
});
}
}
});
</script>
Screenshots
Excel
CSV
Image