Hi rani,
Check this example. Now please take its reference and correct your code.
Namepsaces
using System.Data;
using System.IO;
using System.Text;
Controller
public class HomeController : Controller
{
private IWebHostEnvironment Environment;
public HomeController(IWebHostEnvironment _environment)
{
Environment = _environment;
}
public IActionResult Index()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3]
{
new DataColumn("Id", typeof(string)),
new DataColumn("Name", typeof(string)),
new DataColumn("BirthDate", typeof(DateTime))
});
dt.Rows.Add(1, "Nancy Davolio", "1948-12-08");
dt.Rows.Add(2, "Andrew Fuller", "1952-02-19");
dt.Rows.Add(3, "Janet Leverling", "1963-08-30");
dt.Rows.Add(4, "Margaret Peacock", "1937-09-19");
DataTable dtChart = new DataTable();
dtChart.Columns.AddRange(new DataColumn[]
{
new DataColumn("Product", typeof(string)),
new DataColumn("Total", typeof(int))
});
dtChart.Rows.Add("Chair", 56);
dtChart.Rows.Add("Table", 69);
dtChart.Rows.Add("Stool", 5);
ViewBag.Product = string.Join(",", dtChart.AsEnumerable().Select(r => r.Field<string>("Product")).ToArray());
ViewBag.Total = string.Join(",", dtChart.AsEnumerable().Select(r => r.Field<int>("Total")).ToArray());
return View(dt);
}
[HttpPost]
public FileResult Chart(string hfHTML, string hfChartData)
{
byte[] bytesImage = Convert.FromBase64String(hfChartData.Replace("data:image/jpeg;base64,", ""));
string wwwPath = this.Environment.WebRootPath;
string path = Path.Combine(this.Environment.WebRootPath, "Uploads");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
System.IO.File.WriteAllBytes(path + "\\Chart.jpg", bytesImage);
string html = string.Format("{0}<div> </div><img src='{1}' height='300' width='400' />", hfHTML, path + "\\Chart.jpg");
byte[] bytes = Encoding.ASCII.GetBytes(html);
return File(bytes, "application/vnd.ms-excel", "Grid.xls");
}
}
View
@model System.Data.DataTable
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.0.2/js/dataTables.dateTime.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.0.2/css/dataTables.dateTime.min.css" />
<script type="text/javascript">
$.fn.dataTable.render.moment = function (from, to, locale) {
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'DD-MM-YYYY';
}
else if (arguments.length === 2) {
locale = 'en';
}
return function (d, type, row) {
if (!d) {
return type === 'sort' || type === 'type' ? 0 : d;
}
var m = window.moment(d, from, locale, false);
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
};
};
$(document).ready(function () {
$("#myTable").dataTable({
bLengthChange: true,
lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
bFilter: true,
bSort: true,
bPaginate: true,
columns: [
{ data: 'Id' },
{ data: 'Name' },
{ data: 'BirthDate', render: $.fn.dataTable.render.moment('MM/DD/YYYY') }
],
})
})
</script>
</head>
<body>
@using (Html.BeginForm("Chart", "Home", FormMethod.Post))
{
<input type="hidden" name="hfHTML" value="" />
<input type="hidden" name="hfChartData" value="" />
<button id="download" type="submit">Download</button>
}
<div id="dvData">
<section class="content">
<div class="container-fluid">
<table class="table table-bordered table-responsive-lg table-hover" width="100%" id="myTable">
<thead class="thead-dark text-center">
<tr>
<th>Id</th>
<th>Name</th>
<th>Date</th>
</tr>
</thead>
<tbody class="text-center">
@for (int i = 0; i < Model.Rows.Count; i++)
{
<tr>
<td>@Model.Rows[i]["Id"]</td>
<td>@Model.Rows[i]["Name"]</td>
<td>
@Convert.ToDateTime(Model.Rows[i]["BirthDate"]).ToString("dd/MM/yyyy")
</td>
</tr>
}
</tbody>
</table>
</div>
</section>
<div class="box-body">
<div class="chart-container">
<canvas id="chart" style="width:50%; height:50%"></canvas>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script type="text/javascript">
$(function () {
var labels = '@ViewBag.Product';
var datas ='@ViewBag.Total';
var labelsArray = new Array();
var dataArray = new Array();
var colorArray = new Array();
for (var i = 0; i < labels.split(',').length; i++) {
labelsArray.push(labels.split(',')[i]);
dataArray.push(datas.split(',')[i]);
colorArray.push(getRandomColor());
}
new Chart(document.getElementById("chart").getContext('2d'), {
type: 'pie',
data: {
labels: labelsArray,
datasets: [{
backgroundColor: colorArray,
data: dataArray
}]
}
});
});
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
document.getElementById("download").addEventListener("click", function () {
var imgData = document.getElementById('chart').toDataURL("image/jpeg", 1.0);
document.getElementsByName('hfHTML')[0].value = document.getElementById('myTable').outerHTML;
document.getElementsByName('hfChartData')[0].value = imgData;
}, false);
</script>
</body>
</html>
