Post
Ask Question

Save Chart Image To Server In ASP.NET

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. }  

  5.   
  6. <style>  
  7.   
  8. #MyChart{  
  9.   width: 100%;  
  10.   height: 500px;  
  11. }  
  12.   
  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>  
  22.   
  23. <div id="MyChart" style="width:50%"></div>  
  24. <br />  
  25.   
  26. <input type="button" id="exportChart" value="Export Chart" onclick="exportChart();" />  
  27.   
  28.   
  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.     });  
  71.   
  72.     function exportChart() {  
  73.         chart["export"].capture({}, function () {  
  74.   
  75.             this.toPNG({}, function (base64) {  
  76.   
  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.                 });  
  96.                   
  97.             });  
  98.         });  
  99.     }  
  100.   
  101.       
  102. </script>  
Now copy and paste below function into your Home controller.
  1. [HttpPost]  
  2.        public JsonResult SaveImage(string base64)  
  3.        {  
  4.            string filePath = "";  
  5.              
  6.            string FileName = string.Format("{0:yyyy-MM-dd_hh-mm-ss-tt}", DateTime.Now);  
  7.            string DomainName = ConfigurationSettings.AppSettings["DomainName"];  
  8.   
  9.            try  
  10.            {  
  11.                var imageParts = base64.Split(',').ToList<string>();  
  12.                  
  13.                byte[] Image = Convert.FromBase64String(imageParts[1]);  
  14.                  
  15.                filePath = System.Web.Hosting.HostingEnvironment.MapPath("~/Image/" + FileName + ".png");  
  16.                System.IO.File.WriteAllBytes(filePath, Image);  
  17.                filePath = DomainName + "Image/" + FileName + ".png";  
  18.   
  19.            }  
  20.            catch (Exception ex)  
  21.            {  
  22.                filePath = "";  
  23.            }  
  24.   
  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