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.