Skip to content
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

Heatmaps are half plotted on browsers with webgl disabled #9150

Closed
ff-sgupta opened this issue Oct 10, 2018 · 8 comments

Comments

@ff-sgupta
Copy link

commented Oct 10, 2018

Expected behaviour

The heatmap shuld be completely rendered

Actual behaviour

The heatmap is half plotted. If we remove the boost-canvas module then the chart is plotted correctly. However for large points, the performance is slow

Live demo with steps to reproduce

https://www.highcharts.com/demo/heatmap-canvas/

Product version

Highcharts 6.1.4

Affected browser(s)

Any browser with webgl disabled. I had disable webgl on Firefox

Type about:config in address bar. Search for webgl.disabled and turn it off

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Oct 10, 2018

Hi @ff-sgupta

Thank you for reporting the issue. You are right, it looks broken:

screen shot 2018-10-10 at 13 05 12

FYI @cvasseng

@ff-cviradiya

This comment has been minimized.

Copy link

commented Oct 10, 2018

@pawelfus This was working fine when we were in the old highcharts version 5.0.12.

@ff-sgupta

This comment has been minimized.

Copy link
Author

commented Oct 15, 2018

@pawelfus Thanks for the response. By when are we expecting this to be fixed?

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Oct 15, 2018

Workaround:
Position canvas manually, demo: https://jsfiddle.net/79tmxrn8/4/

Snippet:

function reflowCanvas () {
  var chart = this;

  Highcharts.each(this.series, function(series) {
    if (series.renderTarget) {
      series.renderTarget.attr({
        x: chart.plotLeft,
        y: chart.plotTop
      });
    }
  });
}

Highcharts.addEvent(Highcharts.Chart, 'redraw', reflowCanvas);
Highcharts.addEvent(Highcharts.Chart, 'load', reflowCanvas);

@ff-sgupta Hopefully it will get into the next release.

@pawelfus pawelfus self-assigned this Oct 15, 2018

@ff-sgupta

This comment has been minimized.

Copy link
Author

commented Oct 16, 2018

@pawelfus The workaround does not seem to work for inverted heatmaps. I added inverted: true attribute in the same fiddle

Inverted heatmap with webgl disabled
inverted_heatmap_webgl_disabled

Inverted heatmap with webgl enabled
inverted_heatmap_webgl_enabled

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Oct 16, 2018

Hi @ff-sgupta

Thank you for pointing this out! It looks like a separate issue, but let's keep it here.

Internal note:
@cvasseng / @TorsteinHonsi FYI:
We have simple translation for canvas-boost here:

ctx.fillRect(
shapeArgs.x,
shapeArgs.y,
shapeArgs.width,
shapeArgs.height
);

However, WebGL boost adds logic for inverted heatmap:
// Fixes issues with inverted heatmaps (see #6981)
// The root cause is that the coordinate system is flipped.
// In other words, instead of [0,0] being top-left, it's
// bottom-right. This causes a vertical and horizontal flip
// in the resulting image, making it rotated 180 degrees.
if (series.type === 'heatmap' && chart.inverted) {
shapeArgs.x = xAxis.len - shapeArgs.x;
shapeArgs.y = yAxis.len - shapeArgs.y;
shapeArgs.width = -shapeArgs.width;
shapeArgs.height = -shapeArgs.height;
}

I tried something similar:

if (inverted) {
    ctx.fillRect(
        yAxis.len - shapeArgs.y,
        xAxis.len - shapeArgs.x + xAxis.top,
        shapeArgs.height,
        shapeArgs.width
    );
} else {
    ctx.fillRect(
        shapeArgs.x + xAxis.left,
        shapeArgs.y + yAxis.top,
        shapeArgs.width,
        shapeArgs.height
    );
}

Note swapped x with y, but it looks the translation is a bit off:

  • canvas-2d:
    screen shot 2018-10-16 at 14 10 05

  • svg and/or canvas-3d:
    screen shot 2018-10-16 at 14 10 13

Short debugging leads to interesting thing: shapeArgs.x are in <0, plotWidth> px range (correct), but shapeArgs.y are in range <0, plotWidth - A>, where A is some random number, thus this extra offset at the beginning (hcy and hcx are just arrays of shapeArgs.x and shapeArgs.y):

screen shot 2018-10-16 at 14 18 11

@ff-sgupta

This comment has been minimized.

Copy link
Author

commented Oct 18, 2018

Thank you for the fix

@pawelfus

This comment has been minimized.

Copy link
Contributor

commented Oct 18, 2018

Issue with inverted chart has a separate issue: #9211

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.