Let’s start this blog.

First, we create an MVC project.
Go to File-> New-> Project and select “ASP.NET Web Application”.
Enter the Project name and give a path in Location, after it clicks on ok button.
Add below URLs in the view page
  1. <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  2. <script src="https://www.amcharts.com/lib/3/pie.js"></script>
  3. <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
  4. <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
  5. <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
Copy below code into view where you want to display the chart.
  1. @{
  2. ViewBag.Title = "Home Page";
  3. }

  6. <style>
  8. #MyChart{
  9. width: 100%;
  10. height: 500px;
  11. }
  13. #exportChart {
  14. font-size: 18px;
  15. padding: 5px 10px;
  16. position: absolute;
  17. top: 30px;
  18. right: 30px;
  19. z-index: 10;
  20. }
  21. </style>
  23. <div id="MyChart" style="width:50%"></div>
  24. <br />
  26. <input type="button" id="exportChart" value="Export Chart" onclick="exportChart();" />
  29. <script>
  30. var chart = AmCharts.makeChart("MyChart", {
  31. "type": "pie",
  32. "theme": "light",
  33. "dataProvider": [{
  34. "City": "Surat",
  35. "litres": 501.9
  36. }, {
  37. "City": "Karnavati",
  38. "litres": 301.9
  39. }, {
  40. "City": "Navsari",
  41. "litres": 201.1
  42. }, {
  43. "City": "Junagadh",
  44. "litres": 165.8
  45. }, {
  46. "City": "Amreli",
  47. "litres": 139.9
  48. }, {
  49. "City": "Bhavnagar",
  50. "litres": 128.3
  51. }, {
  52. "City": "Gondal",
  53. "litres": 99
  54. }, {
  55. "City": "Rajkot",
  56. "litres": 60
  57. }, {
  58. "City": "Pune",
  59. "litres": 50
  60. }],
  61. "valueField": "litres",
  62. "titleField": "City",
  63. "balloon": {
  64. "fixedPosition": true
  65. },
  66. "export": {
  67. "enabled": true,
  68. "menu": []
  69. }
  70. });
  72. function exportChart() {
  73. chart["export"].capture({}, function () {
  75. this.toPNG({}, function (base64) {
  77. $.ajax({
  78. url: '/Home/SaveImage',
  79. type: 'POST',
  80. data: { base64: base64},
  81. success: function (data) {
  82. if (data != "") {
  83. alert("file saved.")
  84. }
  85. else {
  86. alert("file not saved.")
  87. }
  88. },
  89. error: function (r, s, e) {
  90. alert("Unexpected error:" + e);
  91. console.log(r);
  92. console.log(s);
  93. console.log(e);
  94. }
  95. });
  97. });
  98. });
  99. }
  102. </script>
Now copy and paste below function into your Home controller.
  1. [HttpPost]
  2. public JsonResult SaveImage(string base64)
  3. {
  4. string filePath = "";
  6. string FileName = string.Format("{0:yyyy-MM-dd_hh-mm-ss-tt}", DateTime.Now);
  7. string DomainName = ConfigurationSettings.AppSettings["DomainName"];
  9. try
  10. {
  11. var imageParts = base64.Split(',').ToList<string>();
  13. byte[] Image = Convert.FromBase64String(imageParts[1]);
  15. filePath = System.Web.Hosting.HostingEnvironment.MapPath("~/Image/" + FileName + ".png");
  16. System.IO.File.WriteAllBytes(filePath, Image);
  17. filePath = DomainName + "Image/" + FileName + ".png";
  19. }
  20. catch (Exception ex)
  21. {
  22. filePath = "";
  23. }
  25. return Json(filePath, JsonRequestBehavior.AllowGet);
  26. }

In this SaveImage() function, we get the base64 as a string from parameter and convert it to png using convert the base64 to bytes.

For getting the domain name in this article we use the "ConfigurationSettings.AppSettings["DomainName"]"

So, you need to add the "DomainName" key into the web.config like below code.
  1. <add key="DomainName" value="http://localhost:42213//" />
Right now I'm running my local project so I give the value of localhost but you can add your live domain name and don't forget to give permission to the folder for read and write for save image.
Output