New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Boostjs - Scatter chart only supports circle marker symbol, while line chart supports all symbols #8633

Closed
tejaspchordiya opened this Issue Jul 17, 2018 · 5 comments

Comments

Projects
None yet
4 participants
@tejaspchordiya

tejaspchordiya commented Jul 17, 2018

Scatter chart with boost. Here, marker points are plotted with symbol square:
https://jsfiddle.net/tejaspchordiya/mvan0gko/23/

Line chart with boost. Here, marker points are plotted with symbol square:
https://jsfiddle.net/tejaspchordiya/egm28tn5/1/

Now, try zoom in both the charts, one will observe Line chart correctly renders square symbol while scatter chart does not. Same is the case for other symbols as well.

It is observed Scatter chart supports only circle symbol for markers, while Line series supports all marker symbols.

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Jul 17, 2018

Contributor

Hi @tejaspchordiya,
Thank you for reporting.

@cvasseng

Contributor

sebastianbochan commented Jul 17, 2018

Hi @tejaspchordiya,
Thank you for reporting.

@cvasseng

@sebastianbochan sebastianbochan added the Bug label Jul 17, 2018

@cvasseng

This comment has been minimized.

Show comment
Hide comment
@cvasseng

cvasseng Jul 17, 2018

Contributor

This is an inherent limitation in the boost module at the moment - scatter and bubble charts are always drawn as circles. So it's not so much a bug as it is an unsupported feature.

The reason it "works" when zooming in on the line chart is that when you zoom in to a low point density, boost is by default disabled, and the SVG renderer takes over. So when you see square markers in the line chart, it's actually not boosting.

Internal note: in the future it might be possible to support this by rendering the marker shape to the circle texture - this would let us keep rendering the points as point sprites and thus it should not have a performance penalty.

Contributor

cvasseng commented Jul 17, 2018

This is an inherent limitation in the boost module at the moment - scatter and bubble charts are always drawn as circles. So it's not so much a bug as it is an unsupported feature.

The reason it "works" when zooming in on the line chart is that when you zoom in to a low point density, boost is by default disabled, and the SVG renderer takes over. So when you see square markers in the line chart, it's actually not boosting.

Internal note: in the future it might be possible to support this by rendering the marker shape to the circle texture - this would let us keep rendering the points as point sprites and thus it should not have a performance penalty.

@cvasseng cvasseng added Enhancement and removed Bug labels Jul 17, 2018

@manu-st

This comment has been minimized.

Show comment
Hide comment
@manu-st

manu-st Aug 16, 2018

Any timeline on getting this fixed? If this is just a texture issue, wouldn't it be possible to provide a texture? We have SVG markers so it should be possible to create a texture for them. Or provide a way for users to create their own texture code if there is an easy way to convert the SVG (or a subset of SVG) to a texture.

manu-st commented Aug 16, 2018

Any timeline on getting this fixed? If this is just a texture issue, wouldn't it be possible to provide a texture? We have SVG markers so it should be possible to create a texture for them. Or provide a way for users to create their own texture code if there is an easy way to convert the SVG (or a subset of SVG) to a texture.

@cvasseng

This comment has been minimized.

Show comment
Hide comment
@cvasseng

cvasseng Aug 23, 2018

Contributor

We're looking on the best approach to this. The complicating factor is that it's very much a case of "all or nothing" - if we're going to open the door on more types of shapes, we should open up for arbitrary ones as well. This requires some thought.

Partly internal note:

If the marker can be done on a canvas, it's fairly easy to patch in.

The texture is created here: https://github.com/highcharts/highcharts/blob/master/js/modules/boost.src.js#L2381-L2384

The basic fix would be to create one Image (by doing a canvas buffer copy) per. supported shape, put them in a map along with a GLint for the texture on the GPU. Then it's just a matter of indexing the map based on shape type when rendering the series.

However - we need to figure out if and how to support custom shapes.

Contributor

cvasseng commented Aug 23, 2018

We're looking on the best approach to this. The complicating factor is that it's very much a case of "all or nothing" - if we're going to open the door on more types of shapes, we should open up for arbitrary ones as well. This requires some thought.

Partly internal note:

If the marker can be done on a canvas, it's fairly easy to patch in.

The texture is created here: https://github.com/highcharts/highcharts/blob/master/js/modules/boost.src.js#L2381-L2384

The basic fix would be to create one Image (by doing a canvas buffer copy) per. supported shape, put them in a map along with a GLint for the texture on the GPU. Then it's just a matter of indexing the map based on shape type when rendering the series.

However - we need to figure out if and how to support custom shapes.

@cvasseng

This comment has been minimized.

Show comment
Hide comment
@cvasseng

cvasseng Aug 30, 2018

Contributor

Support for all the regular symbols (i.e. diamond square circle triangle triangle-down) has now been added to boost through baf771a (pull request):

https://jsfiddle.net/egm28tn5/

Custom symbols can conceivably be added by forking the module and using this basic setup. We will do a review internally to see if/how we will define a more structured API for adding them.

Contributor

cvasseng commented Aug 30, 2018

Support for all the regular symbols (i.e. diamond square circle triangle triangle-down) has now been added to boost through baf771a (pull request):

https://jsfiddle.net/egm28tn5/

Custom symbols can conceivably be added by forking the module and using this basic setup. We will do a review internally to see if/how we will define a more structured API for adding them.

TorsteinHonsi added a commit that referenced this issue Aug 31, 2018

TorsteinHonsi added a commit that referenced this issue Aug 31, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment