Highstocks to Move Renderer elements along with navigator/ Draw Trendlines - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Highstocks to Move Renderer elements along with navigator/ Draw Trendlines

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://code.jquery.com/jquery-1.4.3.min.js"></script> 
      <script type="text/javascript">
    $(function(){//from  w w w  . j  a  v a 2 s  .c o m
$(function () {
    $('#container').highcharts('StockChart', {
series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });
    var chart = $('#container').highcharts();
    function a(chart) { // on complete
        var obj = chart.renderer.rect(100, 100, 100, 100, 5)
            .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow',
            zIndex: 0
        })
            .add();
        $('#move').click(function(){
            obj.translate(120,20);
        });
    };
    a(chart);
});
    });

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script> 
      <div id="container" style="height: 300px"></div> 
      <button id="move">move</button>  
   </body>
</html>

Related Tutorials