ASP.NET

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
 
Ebook Download
View all
Learn
View all
Membership not found