use Api to show multiples values in stock chart - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

use Api to show multiples values in stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    var VanillaRunOnDomReady = function() {
var data = {//from   w  ww .j a  v  a2s  .c  o m
  projects: [{
    name: 'Project X',
    jobs_running: [
      [1459814400000, 121],
      [1459900800000, 205],
      [1459987200000, 155],
      [1460073600000, 458]
    ],
    jobs_pending: [
      [1459814400000, 146],
      [1459900800000, 149],
      [1459987200000, 158],
      [1460073600000, 184]
    ]
  }, {
    name: 'Project Y',
    jobs_running: [
      [1459814400000, 221],
      [1459900800000, 295],
      [1459987200000, 255],
      [1460073600000, 258]
    ],
    jobs_pending: [
      [1459814400000, 246],
      [1459900800000, 249],
      [1459987200000, 258],
      [1460073600000, 284]
    ]
  }]
};
nueva(data);
function nueva(current_data) {
  var seriesOptions = [],
    type = ['jobs_running', 'jobs_pending'];
  for (var j = 0; j < current_data['projects'].length; j++) {
    var project = current_data['projects'][j];
    for (var i = 0; i < type.length; i++) {
      seriesOptions.push({
        name: project.name + ' ' + type[i],
        data: project[type[i]]
      });
    }
  }
  $('#containerChart').highcharts('StockChart', {
    series: seriesOptions
  });
}
    }
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 src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <div id="containerChart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials