Dual axis using percentage and absolute value to same series in stock chart - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Dual axis using percentage and absolute value to same series in stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Jugal | Dual axes | Highchart &amp; Highstock</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container{//from  w  ww . ja v  a 2  s  .  c om
   min-width:500px;
}


      </style> 
      <script type="text/javascript">
    var VanillaRunOnDomReady = function() {
var chartingOptions = {
    yAxis:[{
        },
        {
            labels:{
                formatter:function(){
                    var max=this.axis.linkedParent.dataMax,
                        min=this.axis.linkedParent.dataMin,
                        range=max-min;
                    return ((this.value-min)/(range)*100) + ' %';
                }
            },
            linkedTo:0,
            opposite:true
        }
    ]
};
                        chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.StockChart(chartingOptions);
    }
var alreadyrunflag = 0;
if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1;
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}
window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script> 
      <script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/modules/exporting.src.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials