Highcharts combines PHANTOMJS to generate high-quality graphic images on the server side

Project background

Recently busy to the department to develop a set of interactive reporting system, to replace the original static reporting system.

The old system is based on dotnetcharting development, dotnetcharting Advantage is a rich chart type, interface calls simple, use only to bind the data source can (specify the connection characters and SQL statements, simple configuration can be out of the diagram), support the generation of static graph picture; is to generate a good picture is the image, to the front desk lost interactivity (of course it also provides a jscharting, but the feeling of interactivity is not good enough), and then there is this stuff is charged ah, use words need to toss cracked version.

I finally chose Highcharts (Interactive JavaScript charts for your webpage) to present the foreground chart and visualize the data through highcharts good interactivity to interact with the server-side data.

Dotnetcharting in the design of data loading is still very good, I learn from the development process of its processing ideas, their own implementation of a set of data loading scheme, can be very convenient to pass the data to Highcharts. This set of data loading scheme, simply is to specify good database connection information and SQL query information, server using Ado.net execution query to generate a dataset, and then analyze the dataset to convert the data to Highcharts can directly use the JSON format.

Report processing details are quite a lot, here is not one by one discussed, the title, the next focus to share with you, the server to generate a picture of the part of the processing details.

Highcharts server-side Generation chart Picture process introduction

The data flow to the picture is relatively simple, as shown in the following illustration:

Asp. NET how to generate chart pictures on the server side

According to the above steps to generate the picture, the core is actually the second step of processing, that is, how to do the SVG data in the server to do processing, to generate a picture of the chart.

In this way, we have a clear idea of the process, directly in the service side of the SVG processing as a picture can not, so think, also do so, just on the internet also someone to do so, so it is also a direct reference to its code, the code is not on the introduction of the use of the DLL:

Search for SVG in NuGet, you can find an SVG Rendering library package, you can use this package SVG format data saved as a picture, the use is relatively simple, you can go to its website to check the use of methods.

This does not have to be done on its own, because Highcharts has already given a third party's ASP.net export chart module (he is based on this SVG Rendering library):

Https://github.com/imclem/Highcharts-export-module-asp.net

The problem of SVG Rendering Library

During the process of using the SVG Rendering Library server to generate chart pictures, some problems were identified:

Generated pictures Chinese font fuzzy Hollow, the overall picture quality is poor, with the actual display in the Web page of the effect of the difference is really not small

The DataLabel of the data points on the chart could not be displayed (initially thought to be the problem of the Highcharts configuration, which was later identified as the problem of the SVG Rendering Library, which must be modified Svg.dll to resolve)