Category / Section
How to set resolution for Chart during server-side export ?
2 mins read
Chart does not have built-in support to customize the resolution of exported image. But it is possible to customize the resolution of exported image in server-side.
Follow the below steps to increase the resolution of exported chart in server-side
- Calculate the scaling factor for required DPI
- Draw the scaled chart
- Export the scaled chart to server and re-scale the chart to its original size
JS / Client-side function exportChart(e) { var chart = $("#chartPieTopWorst").ejChart("instance"); //Calculate the scalefactor var devicePixelRatio = window.devicePixelRatio || 1, dpi = 300, scaleFactor = dpi / (96 * devicePixelRatio), width, height; var type = chart.model.exportSettings.type; chart.model.exportSettings.mode = "server"; //Scale the chart based on required DPI width = parseFloat(chart.model.size.width); height = parseFloat(chart.model.size.height); chart.model.size.width = (width * scaleFactor).toString(); chart.model.size.height = (height * scaleFactor).toString(); chart.model.series[0].marker.dataLabel.font.size = (parseFloat(chart.model.series[0].marker.dataLabel.font.size) * scaleFactor) + "px"; chart.redraw(); //Export the chart to server chart.export(); //Rescale the chart to its actual size chart.model.size.width = width.toString(); chart.model.size.height = height.toString(); chart.model.series[0].marker.dataLabel.font.size = parseFloat(chart.model.series[0].marker.dataLabel.font.size) / scaleFactor + "px"; chart.redraw(); }
- In server-side, use the Bitmap.SetResolution method to customize the resolution of exported image.
C# / Server-side //Server side method for chart exporting protected void ExportChart(object sender, Syncfusion.JavaScript.Web.ChartEventArgs e) { string DataURL = e.Arguments["Data"].ToString(); DataURL = DataURL.Remove(0, DataURL.IndexOf(',') + 1); MemoryStream stream = new MemoryStream(Convert.FromBase64String(DataURL)); //Bitmap with 96 dpi resolution Bitmap img = (Bitmap)Bitmap.FromStream(stream); int dpi = 300; //Bitmap with custom resolution Bitmap bmp = new Bitmap(img.Width, img.Height); //Set required resolution before drawing in PDF bmp.SetResolution(dpi, dpi); using (Graphics g = Graphics.FromImage(bmp)) { //Draw chart with high quality in new resolution g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias; g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality; g.Clear(Color.White); g.DrawImage(img, new Rectangle(0, 0, bmp.Width, bmp.Height), new Rectangle(0, 0,img.Width, img.Height), GraphicsUnit.Pixel); } //Save the bitmap in server //If needed it can be transferred to client for download bmp.Save("Chart.png"); //Dispose bitmap and streams bmp.Dispose(); img.Dispose(); stream.Dispose(); }
Sample link: ChartExportDemo