pageX, pageY to chartX, chartY's datapoints - Javascript highcharts

Javascript examples for highcharts:Chart Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Data

Description

pageX, pageY to chartX, chartY's datapoints

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <style id="compiled-css" type="text/css">

.blokky {/*from w  ww. j  a  v  a 2  s.  c  o  m*/
   background-color: #00ff00;
}
#parent {
   padding: 60px 0 0 60px;
   margin: 10px 0 0 20px;
}


      </style> 
      <script type="text/javascript">
    $(function(){
var manualPt = {
    pageX: 175,
    pageY: 242
}
function onClick(e) {
    $('#report').text('x: ' + e.pageX + ', y: ' + e.pageY).css({
        'position': 'absolute',
        'left': e.offsetX,
        'top': e.offsetY
    })
}
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load() {
                var chart = this,
                    xAxis = chart.xAxis[0],
                    yAxis = chart.yAxis[0],
                    container = chart.renderTo,
                    x = xAxis.toValue(manualPt.pageX - container.offsetLeft),
                    y = yAxis.toValue(manualPt.pageY - container.offsetTop);
                this.series[1].addPoint({
                    x: x,
                    y: y
                });
            }
        }
    },
    xAxis: {},
    tooltip: {
        enabled: false
    },
    plotOptions: {
        series: {
            events: {
                click: onClick
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    }, {
        type: 'scatter'
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <div id="parent"> 
         <div id="container" style="height: 400px"></div> 
         <div id="report" class="blokky"></div> 
      </div>  
   </body>
</html>

Related Tutorials