0

I have setup a time-series bubble chart.

http://jsfiddle.net/mshaffer/kLk22j37/

The elements will be of 3 types: P, A, B.

data: [
                { x: Date.UTC(1990,1,1), y: .63, z: 1.2, name: 'P', patent: {docid:07654321, vecsim: .63, title:'My Patent Title',abstract:'My Patent Abstract',firm:'My Patent Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datefiled: 'March 1, 2005', dategranted: 'July 1, 2007'} }, 
                { x: Date.UTC(2010,1,1), y: .93, z: 1.1, name: 'A', application: {docid:216000313,  vecsim: .93, title:'My Application Title',abstract:'My Application Abstract', firm:'My Application Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datepublished: 'August 1, 2005'} }, 
                 { x: Date.UTC(2000,1,1), y: .73, z: 1.3, name: 'B', patent: {docid:07654321,  vecsim: .73, title:'My Patent Title',abstract:'My Patent Abstract',firm:'My Patent Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datefiled: 'March 1, 2005', dategranted: 'July 1, 2007'}, application: {docid:216000313,  vecsim: .77, title:'My Application Title',abstract:'My Application Abstract', firm:'My Application Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datepublished: 'August 1, 2005'} }, 
            ]

For the scenario of 'B' both (which means data exists for both "P" and "A"), I want to draw a error bar (in this case vertically) to connect the two vecsim values in the respective objects. [.77, .73]

The tooltip custom function 'writeToolTip' needs to draw the error bar, and the str so the error bar is still visible.

As a tooltip, when the hover removes, the error bar needs to also disappear.

mshaffer
  • 959
  • 1
  • 9
  • 19
  • both vertical and horizontal would imply (x1,y1) and (x2,y2) as the error bar endpoints ... and maybe with different shapes for each point ... arrows, dots, etc. – mshaffer Dec 14 '16 at 11:43
  • Your description is not clear for me. Do you have a picture of what you try to achieve or can you make that? When the tooltip appears you want to make the error bar series visible? – morganfree Dec 14 '16 at 11:53
  • In addition to the default tooltip, display a single "error-bar" associated with element's data. In this case, draw an error-bar at x=Date.UTC(2000,1,1) from y1=0.73 to y2=0.77 for point named "B" ontooltiped. Maybe an errorbar "series" or maybe just a new render object. I haven't figured that out yet. – mshaffer Dec 14 '16 at 14:22

1 Answers1

1

Create a series of error bars with no color. In that series associate error bars with the bubble points with a custom property, e.g. linkedTo:

 {
  type: 'errorbar',
  enabledMouseTracking: false,
  color: 'none',
  data: [{
    x: Date.UTC(1990, 1, 1),
    low: 0.73,
    high: 0.77,
    linkedTo: 'P'
  },{
    x: Date.UTC(2000, 1, 1),
    low: 0.73,
    high: 0.77,
    linkedTo: 'B'
  },{
    x: Date.UTC(2010, 1, 1),
    low: 0.73,
    high: 0.77,
    linkedTo: 'A'
  }]
}

In the tooltip formatter set the proper color for the associated error bar.

function writeToolTip(obj) {
  var errorBars = obj.series.chart.series[1].data;
  errorBars.forEach(point => {
  if (point.linkedTo === obj.key) {
    var paths = point.graphic.element.children;
    Array.prototype.forEach.call(paths, path => {
      path.setAttributeNS(null, 'stroke', 'black');
    });
  }
});

var str = '';
str += 'Write out details based on existence of which (patent / app)';
return str;
}

Also, you need to wrap tooltip's refresh and hide method, so the arror bars will disappear.

  Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(p, delay) {
    p.call(this, delay);
    hideErrorBars(this.chart.series[1].data);
  });

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(p, point, mouseEvent) {
  if (point) {
    hideErrorBars(point.series.chart.series[1].data);
  }

  p.call(this, point, mouseEvent);
});

example: http://jsfiddle.net/kLk22j37/13/

morganfree
  • 12,254
  • 1
  • 14
  • 21