Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

function selectPoint(pointId, chart) {
  var point = chart.get(pointId);

  point.setState('hover');
  chart.tooltipAllowed = true;
  chart.tooltip.refresh(point);
  chart.tooltipAllowed = false;
}

var thisPoint='';

Highcharts.chart('container', {
  series: [
  	{data: [{ id: 'p1', x: 10, y: 20 }, {id: 'p2', x: 12, y: 21}, 
    			 { id: 'p3', x: 15, y: 22 }
    		],
    		point: {
      			events: {
        				click: function() {
										var pointId = this.id;
                    thisPoint=this.id
          					sessionStorage.setItem('HCselectedPoint', pointId);
          					selectPoint(pointId, this.series.chart);
        				}
      			}
    		}
  	},
    {data: [{ id: 'p11', x: 10, y:30 }, {id: 'p12', x: 12, y: 31}, 
    			 { id: 'p13', x: 15, y: 32 }
    		],
    		point: {
      			events: {
        				click: function() {
										var pointId = this.id;
          					sessionStorage.setItem('HCselectedPoint', pointId);
          					selectPoint(pointId, this.series.chart);
        				}
      			}
    		}
  	}
  ],
  tooltip: {
    formatter: function() {
      var chart = this.series.chart,
        tooltip = chart.tooltip;

      if (!chart.tooltipAllowed) {
        return false; // no tooltip
      }

      return tooltip.defaultFormatter.call(this, tooltip);
    }
  }
}, function(chart) {
  var pointId = sessionStorage.getItem('HCselectedPoint');
  
  if (pointId) {
    selectPoint(pointId, chart);
  }
});