It is currently Thu Oct 02, 2014 4:21 am Advanced search

Range Line Marker for Scatter Chart

Technical support, bug reports and more.

Range Line Marker for Scatter Chart

Postby tredington » Fri Feb 10, 2012 7:02 pm

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
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby jlbriggs » Fri Feb 10, 2012 7:36 pm

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?
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
jlbriggs
 
Posts: 1458
Joined: Tue Sep 21, 2010 4:33 pm

Re: Range Line Marker for Scatter Chart

Postby tredington » Fri Feb 10, 2012 9:34 pm

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
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby Fusher » Mon Feb 13, 2012 1:50 pm

You can in hover event ( http://www.highcharts.com/ref/#point-events--mouseOver ) draw this line using renderer ( http://www.highcharts.com/ref/#renderer )
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7272
Joined: Mon Jan 30, 2012 12:16 pm

Re: Range Line Marker for Scatter Chart

Postby tredington » Wed Feb 15, 2012 10:13 pm

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)?
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby jlbriggs » Wed Feb 15, 2012 10:43 pm

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
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
jlbriggs
 
Posts: 1458
Joined: Tue Sep 21, 2010 4:33 pm

Re: Range Line Marker for Scatter Chart

Postby tredington » Wed Feb 15, 2012 11:27 pm

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);
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby Fusher » Thu Feb 16, 2012 4:33 pm

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)
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7272
Joined: Mon Jan 30, 2012 12:16 pm

Re: Range Line Marker for Scatter Chart

Postby tredington » Thu Feb 16, 2012 5:16 pm

Thanks, that worked!
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby tredington » Thu Feb 16, 2012 7:38 pm

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
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby Fusher » Fri Feb 17, 2012 12:39 pm

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
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7272
Joined: Mon Jan 30, 2012 12:16 pm

Re: Range Line Marker for Scatter Chart

Postby tredington » Fri Feb 17, 2012 5:37 pm

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?
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby Fusher » Mon Feb 20, 2012 12:38 pm

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
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7272
Joined: Mon Jan 30, 2012 12:16 pm

Re: Range Line Marker for Scatter Chart

Postby tredington » Tue Feb 21, 2012 7:47 pm

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?
tredington
 
Posts: 109
Joined: Tue Sep 06, 2011 4:42 pm

Re: Range Line Marker for Scatter Chart

Postby Fusher » Wed Feb 22, 2012 1:39 pm

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?
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7272
Joined: Mon Jan 30, 2012 12:16 pm

Next

Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 5 guests