ASP.NET Chart Demos / Server-Side Export To Image

Description

This example demonstrates the implementation of a server-side chart export service using an ASP.NET MVC controller.

While this particular example is ASP.NET MVC-specific, the same approach is applicable for any server-side technology. It involves using PhantomJS headless browser to render a Shield UI Chart widget and rasterize the rendered HTML page. This approach is based on the PhantomJS Screen Capture example.

To implement this service using other server-side technologies, use the following steps:

1. Download PhantomJS binary and extract to a folder in the web application.
2. Create a page that accepts the Shield UI Chart JSON initialization options as raw POST data.
3. On the server-side, sanitize the JSON input to protect against malicious code submission.
4. Modify the JSON options and set top-level applyAnimation option as well as series applyAnimation options to false. This will turn off all animations for the Chart and prevent incorrect rendering while animations are running.
5. Optionally set width and height options to a user-defined or server-defined values to adjust rendered chart image size.
6. Render an HTML view with a Shield UI chart definition and the user-defined initialization options to a string.
7. Save the rendered string as an HTML file to a temporary directory.
8. Call phantomjs rasterize.js [PATH_TO_HTML_FILE] [PATH_TO_IMAGE_OUTPUT] [width] [height]
9. Read and serve the output image.