1

I have a chart created with highcharts.js, where the axis are inverted (y is horizontal, and x is vertical). In the chart I have a couple of plots, one being a scatter plot with pictures as markers. The problem I am having is that the markers are per default rotated 90 degrees when the chart is inverted. Is there a way to make the markers not being rotated for a chart with inverted axis?

Mark
  • 106,305
  • 20
  • 172
  • 230
Knut Marius
  • 1,588
  • 18
  • 40
  • Are you using `url(graphic.png)` to specify the markers? – Mark Feb 25 '13 at 15:41
  • Yes, I am using url(graphic.png) for the value of marker.symbol – Knut Marius Feb 26 '13 at 08:19
  • Simplest way, pre-rotate the image, so that when Highcharts rotates it the orientation is how you want it. – Mark Feb 26 '13 at 14:11
  • That is in fact the workaround I had for a while, but as I started to have quite a lot of different icons to maintain it turned out to not be very nice to have to create duplicates for all of them.. If nothing else works, this is probably what I'll have to do though =/ – Knut Marius Feb 26 '13 at 14:25
  • I played around with rotating the image back after the plot was drawn by applying an `SVN rotate transform` but was having trouble getting the matrix correct (you need to rotate around a point). The basic code was something like this `$('.highcharts-markers').children().attr('transform','rotate(90)')` – Mark Feb 26 '13 at 15:06
  • Yes, I think you are on to a good idea here, but I am also facing some issues with just applying the rotate(90) to the images: The height of the container surrounding the images is then suddenly much bigger, and the markers seem to appear somewhere outside of my screen. Is this the same issue you described as "trouble getting the matrix correct"? I am not very familiar with SVG transforms, so not sure what is happening here, and why a simple rotate(90) would not be enough – Knut Marius Feb 27 '13 at 08:41

2 Answers2

2

Here's the best I can come up with...

function rotateMarker()
{
    $.each( $('.highcharts-markers').children(), function(){
        var marker = $(this);
        // rotate 90 degrees around the middle point of the marker
        var rotateAttr = 'rotate(90,'+(parseFloat(marker.attr('x'))+parseFloat(marker.attr('width'))/2)+','+marker.attr('y')+')';
        marker.attr('transform',rotateAttr);
    });
}

The next problem is you can not run this code until the plot is fully rendered. And with highcharts animation, I had to resort to putting it on a setTimeout.

See fiddle here.

Response to Comment

I originally was working with an image that was the same left to right. For the "mirror" problem can you rotate 270, to get it going the same direction as the original?

See updated fiddle here.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • This is very good! Thanks alot! Only problem now is that the images seem to be mirrored as well, so I think would need to do another transform in addition. According to another SO question (see link below) you need to combine the scale and the translate features to achieve this, but it does not seem to work out of the box. Again, the icons are pushed out of the visible area when I apply this: 'translate(0,' + marker.attr('width') + ') scale(1,-1)'. Do you by chance have a suggestion for this as well? Reference: http://stackoverflow.com/questions/3846015/flip-svg-coordinate-system – Knut Marius Feb 28 '13 at 08:29
  • @KnutMarius are they mirrored or just not in the right direction? See edits above. – Mark Mar 01 '13 at 15:00
  • No, unfortunately, rotating the image does not fix the mirror problem (no matter how many degrees you rotate it). If you look at the icons from your latest fiddle you can see the big eye of the bug is on the right side in the legend, while it's on the left in the chart. The reason why this i particularly important for my icons is that they contain a letter. From what I see I need to apply another transformation to the icons, in addition to the rotation, but doing the scale+translate mentioned in the last comment did not work as intended.. – Knut Marius Mar 02 '13 at 11:02
0
var markers= document.getElementsByClassName("highcharts-markers");
for(var i= 0; i< markers.length; i++) {
  var items= markers[i].childNodes;
    for(var j= 0; j< items.length; j++) {
      var bbox= items[j].getBBox(); var cx= bbox.x+ bbox.width/2; var cy= bbox.y+ bbox.height/2;
      items[j].setAttribute("transform", "rotate(90" + ", " + cx + ", " + cy + ")");
    }
  }
}
ngzhongcai
  • 1,793
  • 3
  • 23
  • 31