Export jqPlot Chart to PowerPoint using Open XML in MVC application

In this article, we will design an MVC application that will export jqPlot chart into a PowerPoint file. jqPlot is a plotting and charting plugin for the jQuery Javascript framework. Open XML is a library & document format to manipulate Office documents like Word, Excel and PowerPoint. Create an internet MVC 3 application in VS 2010 and name it as ExportjqPlotChart. Now, add reference to DocumentFormat.OpenXml.dll, WindowsBase.dll [Download from here]. Include jqPlot files [jquery.jqplot.min.js, jqplot.pieRenderer.min.js] and below Open XML namespaces

 using DocumentFormat.OpenXml;
using DocumentFormat.OpenXml.Presentation;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Drawing.Charts;

Modify Index view under Home Controller to generate jqPlot chart as shown below:

 @using (Html.BeginForm())
 {
 <div>
 <div id="divChart" style="width:350px;height:400px;"></div>
 Graph's Image:
 <div id="divChartImg"></div>
 <br />
 <input type="button" name="ExportGraph" id="ExportGraph" value="Export Chart" />
 <input type="hidden" name="imgData" id="imgData" value="hidden text" />
 </div>
 }
 
 <script type="text/javascript">
 $(document).ready(function () {
 
 //Draw a Sample jqPlot chart
 var data = [['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14], ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]];
 var plot1 = jQuery.jqplot('divChart', [data], { seriesDefaults: { renderer: jQuery.jqplot.PieRenderer, rendererOptions: { showDataLabels: true} }, legend: { show: true, location: 'e'} }); // Save Image's data embedded in src attribute in a hidden variable 
 $("#ExportGraph").click(function () //Convert Graph to Image
 var j = $("#divChart").jqplotToImageElem();
 $("#divChartImg").append(j);
 $('#divChart').hide();
 $("#imgData").val($("#divChartImg img").attr('src'));
 $('form').submit();
 });
 });
 </script>

On click of Export Chart button, we converted Pie chart to a image using jqplotToImageElem() . Than, the Graph's image content embedded in src attribute of divChartImg is stored in a hidden variable to access in our action after form submission.
Create a PowerPoint file having a sample image named as Template.pptx under Content folde as shown below:

Add below POST action for saving the Graph's image and returning the PowerPoint.

  [HttpPost]
 public ActionResult Index(FormCollection form)
 {
 try
 {
 //Save Image of jqPlot Chart to a file
 string fileName = Guid.NewGuid().ToString()+".jpg";
 var data = form["imgData"].Replace("data:image/png;base64,", "");
 Byte[] bitmapData = new Byte[data.Length];
 bitmapData = Convert.FromBase64String(FixBase64ForImage(data));
 System.IO.MemoryStream streamBitmap = new System.IO.MemoryStream(bitmapData);
 Bitmap bitImage = new Bitmap((Bitmap)Image.FromStream(streamBitmap));
 //bitImage.Save(Server.MapPath("~/content/") + fileName);// This statement will save file locally as an Image.
 
 //Insert the jqPlot Chart's Image into PowerPoint
 using (PresentationDocument prstDoc = PresentationDocument.Open(Server.MapPath("~/content/") + "Template.pptx", true))
 {
 string imgId = "rId" + new Random().Next(2000).ToString();
 ImagePart imagePart = prstDoc.PresentationPart.SlideParts.FirstOrDefault().AddImagePart(ImagePartType.Jpeg, imgId);
 imagePart.FeedData(new MemoryStream(bitmapData.ToArray()));
 DocumentFormat.OpenXml.Drawing.Blip blip = prstDoc.PresentationPart.SlideParts.FirstOrDefault().Slide.Descendants<DocumentFormat.OpenXml.Drawing.Blip>().First();
 blip.Embed = imgId;
 prstDoc.PresentationPart.SlideParts.FirstOrDefault().Slide.Save();
 prstDoc.PresentationPart.Presentation.Save();
 prstDoc.Close();
 }
 return File(Server.MapPath("~/content/") + "Template.pptx", "application/mspowerpoint", "Graph.pptx");
 }
 catch (Exception ex)
 {
 
 return Content(ex.Message);
 }
 }
 public string FixBase64ForImage(string Image)
 {
 System.Text.StringBuilder sbText = new System.Text.StringBuilder(Image, Image.Length);
 
 sbText.Replace("\r\n", String.Empty);
 
 sbText.Replace(" ", String.Empty);
 
 return sbText.ToString();
 }
 
 }

We read the byte stream of Chart's image and added as an Imagepart to PPT. Finally, PPT image is replaced with Graph's image and returned to client as a File Result. I will outline the steps followed for exporting jqPlot chart to PowerPoint:

1) Created a sample jqPlot Pie chart
2) Converted it to image using jqplotToImageElem().
3) Image content in bytes is submitted to the action as a hidden variable.
4) This image's bytes are passed as a Memory stream in PowerPoint and replaced the actual image by mapping it to new ImgId.

I am attaching the source code reference. By tweaking the above code, we can export any jqPlot graph to an image and than into PowerPoint.  I hope this article might be helpful to all.

ExportjqPlotChart.zip

Comments

• Anonymous
  May 20, 2015
  ddd
• Anonymous
  May 20, 2015
  it's good