chart tool - ray (extended)

line goes across the screen to the edge

by Amanda Williamson

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 600px, width: 850px;" </div>

CSS

#container {
    border:1px solid;
}

JavaScript

$(function () {
     var renderer = new Highcharts.Renderer($('#container')[0], 850, 600),

         pathArray = [],
         l,
         isDown = false,
         firstClick = true,
         anchorX, anchorY,
         x, y,
         x1, y1, x2, y2,
         slope;

     // formula for the slope
     function getSlope(x1, y1, x2, y2) {
         return ((y2 - y1) / (x2 - x1));
     }
     
     function getY(aX, aY, mouseX, mouseY, isLeft) {
         // aX = anchorX
         // aY = anchorY 
          var m = getSlope(aX, aY, mouseX, mouseY),
              viewportLeft = 0,
              viewportRight = 850;
              //viewportY; // we need to find this
         
         return m * ((isLeft ? viewportLeft : viewportRight) - aX) + aY;
     }
          
     $('#container').mousedown(function (e) {
         //debugger;
         isDown = !isDown;
         anchorX = e.pageX;
         anchorY = e.pageY;
         //console.log(pathArray);

         if (firstClick) {
             pathArray = ['M', anchorX, anchorY];
             pathArray.push('L', anchorX, anchorY);
             l = renderer.path(pathArray)
                 .attr({
                 'stroke-width': 5,
                 stroke: 'red'
             }).add();
         }
         firstClick = !firstClick;
     });

     $('#container').mousemove(function (e) { 

         if (isDown) {
             l.attr('d', 
                    ['M', anchorX, anchorY, 'L', 0, getY(anchorX, anchorY, e.pageX, e.pageY, true), 
                     'M', anchorX, anchorY, 'L', 850, getY(anchorX, anchorY, e.pageX, e.pageY, false)]
                    .join(' '));

         }
 
     });

 });