Range Line Marker for Scatter Chart

[tredington]

Hi,

I am wondering if it is possible to add a 'range' line to a scatter chart. Meaning, say one plot point is @ 100(y) for the current chart and when you hover that point it displays it's value from the previous chart as a line from, say 50. Is something like that possible?

Thanks

[jlbriggs]

It sounds like what you want is possible, but I am not clear on what you mean.
Can you provide a visual example or more details?

[tredington]

Here is an image of what I mean:

http://www.law.com/json/chartJS/tal/amlaw100/early_numbers/chart_range_line.jpg

The red line would appear on the hover. It's value(how far up or down on the y axis it would extend) would be determined by a value in the data

Let me know if that makes sense

Thanks

[Fusher]

You can in hover event ( http://www.highcharts.com/ref/#point-events--mouseOver ) draw this line using renderer ( http://www.highcharts.com/ref/#renderer )

[tredington]

Thanks.

Seems to be working so far. however, i am a bit confused how to set the paths x,y values.

I tried to set it to values based on the x,y of each point but the path is reading actual pixels. how would i convert the x,y of the point which has numbers like 2500000000 to the actual position on the chart(in pixels)?

[jlbriggs]

If you do a search of the forum for 'translate' you'll find a variety of posts dealing with the translate function, which converts data x/y values to pixel x/y values and vice-versa

[tredington]

Thanks. getting closer. got the x rendering fine, however, the y seems to get calculating the yAxis[0] as the pixel 0,0(the upper left) instead of the chart 0,0(the lower left). Any reason for this? I have:

var ypos = options.yAxis[0].translate(this.y);

[Fusher]

It was pretty hard - working without documentation When you look into source code, you will finde another options for translate. According this use translate for yAxis this way : translate(this.y,false,true)

Edit:

/**
* Translate from axis value to pixel position on the chart, or back
*
*/
translate = function (val, backwards, cvsCoord, old, handleLog)

[tredington]

Thanks, that worked!

[tredington]

However, the zoom does not update the paths. How would i reference the translate function inside of the formatter function for the zoom? Seems to be breaking this way:

inside formatter for zoom:

Code: Select all

var xpos = getPixels(this.x);


outside:

Code: Select all

function getPixels(axis){
     return options.xAxis[0].translate(axis);
}


**edit
I figured out how to reference the y and x axis using:
this.series.yAxis, etc

Although, now i am not sure how to reference the renderer. In the callback function, i can reference the renderer as chart.renderer. How about from inside the chart?

Thanks

[Fusher]

try something like this.series.chart.renderer
ps: with you can paste your code to jsbin ( www.highcharts.com/jsbin ) and share, I could more help

Of corse remember - it's not standard functionality of highcharts - it could have problems very hard to solve

[tredington]

Thanks, that worked! I got the paths to 'redraw' accurately when zooming. However, is there a way to remove the paths are are currently rendered?

[Fusher]

Of course, use destroy() on your path. Or on your group of paths. For example:

Code: Select all

var group = this.chart.renderer.g().add();
chart.renderer.rect(100, 100, 100, 100, 5)
         .attr({
               'stroke-width': 2,
               stroke: 'red',
               fill: 'yellow',
               zIndex: 3,
         })
         .add(group);
// some code

group.destroy();


More about renderer and groups: http://www.highcharts.com/ref/#renderer

[tredington]

Thanks, that works. However, I am having an issue with scope. I am adding the paths to the chart within the callback for the chart declaration:

Code: Select all

chart = new Highcharts.Chart(options, function(options){
...
},function(){
...
group_init = options.renderer.g().add();
options.renderer.path(['M', xpos+105, ypos+5, 'L', xpos+105, my+5]).attr({'stroke-width': 1, stroke: '#ad2b2b'}).add(group_init);
});

Then I would like to call the destroy() method in the formatter function for the zoom:

Code: Select all

dataLabels: {
  formatter: function(){
     var e = this.series.yAxis.getExtremes();
     if (e.max - e.min < 2500000000){
          group_init.destroy();
          ...
     }
   }
}

This seems to break the chart. The var for group_init is being declared globally(at the beginning of the document.ready statement). Is there something I am missing?

[Fusher]

I think that the problem is that you are creating once group_init, but destroying it for each dataLabel with your condition. So after second value < 25000000 you are trying to destroy .. exatly - what do you want to destroy?