Place Highstock inside a SVG - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

Place Highstock inside a SVG

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <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">
$(function () {/*from  w  w w. j a va 2  s.  c  o  m*/
    window.setTimeout(function () {
        $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
            var div = $('<div>This is an hidden unatached container.</div>');
            div.highcharts('StockChart', {
                chart: {
                    width: 480,
                    height: 400,
                    events: {
                        load: function () {
                            var stockSvg = $('svg', this.container);
                            var svgObj = $('#mySvg').svg();
                            stockSvg.attr('x', 20);
                            stockSvg.attr('y', 30);
                            $('#container', svgObj).replaceWith(stockSvg);
                        }
                    }
                },
                series : [{
                    name : 'AAPL',
                    data : data,
                    tooltip: {
                        valueDecimals: 2
                    }
                }]
            });
        });
    }, 500);
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.src.js"></script> 
      <script src="http://keith-wood.name/js/jquery.svg.js"></script> 
      <svg width="600" height="500" id="mySvg"> 
         <rect x="0" y="0" width="600" height="500" style="stroke: #006600; fill: #006600" /> 
         <rect x="20" y="30" width="480" height="400" style="fill: #FF30FF" id="container" /> 
      </svg>  
   </body>
</html>

Related Tutorials