ASP.NET Chart Exporting

ShieldChart supports out-of-the-box exporting to image and printing. These options are enabled by default, so there is no need to include any additional settings. Further manipulation of these settings is done via the ExportOptions section of the declaration of the control where the following properties are available:

  • AllowExportToImage - Gets or set whether the export to image button will be rendered
  • AllowPrint - Gets or set whether the print button will be rendered
  • ExportTooltip - Gets or sets the tooltip when mouse is over the export to image button
  • PrintTooltip - Gets or sets the tooltip when mouse is over the print button

export panel

When the export is enabled two buttons are shown on top right corner of the chart. Their appearance is controlled by the custom css classes placed into the shieldchart.css file and their position and images can be changed by changing the shield-tooltip.css class properties.
You can see how the chart exporting functionality works on the following demo.

While exporting to PDF is not supported out-of-the-box, it can be achieved through custom code.
In order to achieve this, you need to send the image data to your server, where it can be exported to PDF. The following example demonstrates one such approach.
The steps to follow are listed below:

1. Get the chart instance using javascript: var chart = $("#chart").swidget().
2. Call chart.exportToImage() to render the chart as image.
3. Wait 100ms for the image box to show and find the image source: $(".shield- lightbox").find("img").attr("src"). The image src is a base64-encoded string that contains the image data.
4. Send the image data to the server for exporting. In this particular example, we send it to for demonstration. The result is a JSON string with a URL that can be used to access the generated PDF.

Your server and PDF generation approach may be different, but the idea is to send the image data somehow so it can be converted to PDF.