ginkgo-project / gpe

Web application for interactive visualization of performance data

Home Page:https://ginkgo-project.github.io/gpe

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add buttons for exporting the plot in various image formats

gflegar opened this issue · comments

This one might be more trickier. The <canvas> html element used to draw the plot may have some method to get the raster data, which can then be converted to JPG, PNG or an image embedded in a PDF, but the resolution of such a plot will be limited to whatever is the resolution of the canvas (and that is not very large).

We could try converting it to SVG using something like canvas2svg. From there it should not be very difficult to support other formats.

Tried doing something based on the answers here.
Doesn't seem to work properly - the points, the axes and the text are generated correctly, but the lines and polygons seem to be missing. Could be that canvas2svg is buggy. You can check the current progress on this in the convert_to_svg branch.

Switching to the newer (unofficial) version of canvas2svg fixes some problems, but the generated SVG is still far from perfect (e.g. it does not honor the range of the axes set in the configuration). Not sure why that would have anything to do with the underlying implementation of the 2D context, but its obviously related somehow.

I've merged it to master for now, since it's starting to generate something useful, but its still quite experimental.

I've added support for exporting to PNG. This one uses the generated image, so you will get exactly what you see in GPE. The only problem can be low resolution, since this is raster graphics. Chart.js's devicePixelRatio option can be used as a workaround to artificially increase the resolution when rendering the image.