Articles in this section
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

  1. Calculate the scaling factor for required DPI
  2. Draw the scaled chart
  3. 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();
        }
     
    

 

  1. 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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied