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

Box plots not visible in inverted charts in oldIE #1680

Closed
TorsteinHonsi opened this issue Apr 5, 2013 · 2 comments
Closed

Box plots not visible in inverted charts in oldIE #1680

TorsteinHonsi opened this issue Apr 5, 2013 · 2 comments

Comments

@TorsteinHonsi
Copy link
Collaborator

  1. Open IE8
  2. Go to http://jsfiddle.net/highcharts/Zzba7/

The reason is that all the graphic elements in the box are grouped in an SVG g element, which is a div in the VMLRenderer. This doesn't handle rotation correctly. The fix will be not to group each point's elements.

@pawelfus
Copy link
Contributor

+1

@jabas
Copy link

jabas commented Jun 28, 2013

I had posted the original Issue #1676, and was able to work around it by using the sweet toPixels method combined with the renderer after the fact. Since the chart is still drawn with the correct axes, just no boxes, you can add them afterwards. There's a lot of other stuff happening in my chart function, so I'm just copying the pertinent part:

 if ($.browser.msie === true) {
     for (i = 0; i < categoryList.length; i++) {
          var vB = Math.floor(chart.xAxis[0].toPixels(i)); // vertical baseline for each series converted to px
          var hMin = Math.floor(chart.yAxis[0].toPixels(boxStats[i][0])); // horzontal Minimum converted to px
          var hLQ = Math.floor(chart.yAxis[0].toPixels(boxStats[i][1])); // horzontal Lower Quartile converted to px
          var hMed = Math.floor(chart.yAxis[0].toPixels(boxStats[i][2])); // horzontal Median converted to px
          var hUQ = Math.floor(chart.yAxis[0].toPixels(boxStats[i][3])); // horzontal Upper Quartile converted to px
          var hMax = Math.floor(chart.yAxis[0].toPixels(boxStats[i][4])); // horzontal Maximum converted to px
          // render range connector
          chart.renderer.path(['M', hMin, vB + 0.5, 'L', hMax, vB + 0.5]).attr({
               'stroke-width': 1, stroke: '#A9856A', zIndex: 4
          }).add();
          // render min line
          chart.renderer.path(['M', hMin + 0.5, vB - 10, 'L', hMin + 0.5, vB + 10]).attr({
               'stroke-width': 1, stroke: '#0071B5', zIndex: 4
          }).add();
          // render max line
          chart.renderer.path(['M', hMax + 0.5, vB - 10, 'L', hMax + 0.5, vB + 10]).attr({
               'stroke-width': 1, stroke: '#0071B5', zIndex: 4
          }).add();
          // render interquartile range
          chart.renderer.rect(hLQ, vB - 10, hUQ - hLQ, 20, 0).attr({
               'stroke-width': 1, stroke: '#A9856A', fill: '#F0E9D8', zIndex: 4
          }).add();
          // render median line
          chart.renderer.path(['M', hMed, vB - 10, 'L', hMed, vB + 10]).attr({
               'stroke-width': 2, stroke: '#E37100', zIndex: 4
          }).add();
     }
}

In my chart, categoryList is our category array, and boxStats is our series data array, so that's what's being referenced. Some of this is specific to style choices I made in the regular chart object, like the pointWidth being 20 pixels. You might use a different browser check if you can't use the deprecated jQuery.browser.

I hope this helps for now.

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

No branches or pull requests

3 participants