Best way to extract a very large container/sprite

[Wilco93]

Hi Guys,

I am working on a large scale interactive data visualization dashboard using the latest version of Pixi. For this project I am aiming to support IE11, and the latest versions of the popular browsers.

As of now I am stuck on extracting/exporting the bar chart, which can easily contain a thousand rows (and uses a self made scrollbar).

A bar chart basically is a container and a row in the chart is a sprite with a height of 30px.

I tried the following approach: 

 

However, I am limited by the maximum size of the canvas. (see here: https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element).

For now I am considering building new containers (< max height of the canvas) and filling them with row sprites. However, I would prefer to export the chart as a single file.

Does anyone have ideas as to how they would approach this? 

Thanks a lot!

Wilco

 

[xerver]

Am I understanding correctly that you want to export an image of a chart that is larger than the size of the canvas that is rendering it?

If that is what you want, I don't think there are going to be good web apis to help you here. What you would need to do is render different rectangles of the chart which you composite together into an image format. unfortunately, if your site is remote there isn't a good way to do that. 

[Exca]

One option would be to render parts of your graph and send them to server where you would have a script that creates the larger image from a group of smaller images.

[Wilco93]

On 9/7/2018 at 8:37 PM, xerver said:

Am I understanding correctly that you want to export an image of a chart that is larger than the size of the canvas that is rendering it?

If that is what you want, I don't think there are going to be good web apis to help you here. What you would need to do is render different rectangles of the chart which you composite together into an image format. unfortunately, if your site is remote there isn't a good way to do that. 

Yup that's exactly right.

My Container is larger than the canvas size in the DOM, and potentionally also larger than the maximal canvas size of all major browsers.

I was mostly wondering whether another approach would be better. Like, can I circumvent using the canvas, which is the limiting factor here, at all?

However, I decided that this approach is probably the easiest after all. (filling containers and rendering them on the fly while exporting)

[ivan.popelyshev]

I think you need deep consultation on that thing. Or try do it manually with canvas 2d or webgl, then you'll understand

[xerver]

Quote

Like, can I circumvent using the canvas, which is the limiting factor here, at all?

Sure, you can use SVG or DOM elements instead. Using SVG makes it really easy to export as well, you just save the SVG as a file. Or have a server rasterize it and send them a PNG.