CODEWITHSUNDEEP
javascriptjqueryhighchartsbubble-charterrorbar
mshaffer
mshaffer

Reputation: 991

Highcharts bubble graph - Custom Tooltip with Error bar (either horizontal or vertical)

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.

Upvotes: 0

Views: 153

Answers (1)

morganfree
morganfree

Reputation: 12472

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/

Upvotes: 1

Related Questions