ASP.NET MVC

Export the AmChart In Folder In ASP.NET MVC

Here, we will learn how to save the charts in the folder on export the chart in ASP.NET MVC 5. Charts are very useful for seeing how much work is done in any place in a short time of period.

Prerequisites

  • Basic knowledge of jQuery.
  • Basic Mvc.Net knowledge.
  • Data from which we can generate the charts.

Create a new project in ASP.NET MVC.

We are going to use the following jQuery libraries provided by amCharts.

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

 

Open the View -> Home -> Index.cshtml and write the code for generating the chart.

@{
    ViewBag.Title = "Index";
}
<style>
    body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 300px;
}

input {
  position: absolute;
  top: 2em;
  right: 2em;
  padding: 1em 2em;
}


</style>

<div id="chartdiv"></div>
<input type="button" value="Export PNG" >

 

put the below code into a Home controller for save the chart image into a specific folder.

[HttpPost]
      public JsonResult SaveImage(string base64)
      {
          string filePath = "";
          
          string FileName = string.Format("{0:yyyy-MM-dd_hh-mm-ss-tt}", DateTime.Now);
          string DomainName = ConfigurationSettings.AppSettings["DomainName"];

          try
          {
              var imageParts = base64.Split(',').ToList<string>();
              
              byte[] imageBytes = Convert.FromBase64String(imageParts[1]);


              MemoryStream ms = new MemoryStream(imageBytes, 0, imageBytes.Length);
              // Convert byte[] to Image
              ms.Write(imageBytes, 0, imageBytes.Length);
              Image image = Image.FromStream(ms, true);

              using (var newImage = new Bitmap(800,800))
              using (var graphics = Graphics.FromImage(newImage))
              using (var stream = new MemoryStream())
              {
                  graphics.SmoothingMode = SmoothingMode.AntiAlias;
                  graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                  graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
                  graphics.DrawImage(image, new Rectangle(0, 0, 800, 800));
                  newImage.Save(stream, ImageFormat.Png);
                  //return File(stream.ToArray(), "image/png");
                  byte[] bytes = stream.ToArray();
                  filePath = System.Web.Hosting.HostingEnvironment.MapPath("~/Image/" + FileName + ".png");
                  System.IO.File.WriteAllBytes(filePath, bytes);
                  filePath = DomainName + "Image/" + FileName + ".png";
              }
          }
          catch (Exception ex)
          {
              filePath = "";
          }



          return Json(filePath, JsonRequestBehavior.AllowGet);
      }

 

In this action pass the images as Base64  formate it converts the base64 to the image file and saves into a specific folder.

Please add a Domain Key in the web.config into appSetting tag like below.

<add key="DomainName" value="http://localhost:42213//" />

 

Output:

Kaushik Dudhat

Hi All, I am Kaushik Dudhat. I'm Working as a Web Developer. I have strong technical skills as well as excellent interpersonal skills. I am eager to be challenged in order to grow and improve my communication and professional IT skills gained through previous experiences in the IT sector. I have extensive experience with designing and developing enterprise scale applications. I have good skill of ASP.NET MVC, AngularJS, Web API, EPPlus, SQL, Entity Framework, Html, CSS, Bootstrap, JQuery, Rotativa and Windows services.

View Comments

  • I have not checked in here for some time as I thought it was getting boring, but the last few posts are good quality so I guess I抣l add you back to my daily bloglist. You deserve it my friend :)

Share
Published by
Kaushik Dudhat

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

3 years ago