send data from controller which is acceptable format to Highstock? - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

send data from controller which is acceptable format to Highstock?

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(document).ready(function(){
             //converting two arrays to two-dimesional array, It's not working
       var xAxisdata=[1420051860000,1420052160000,1420052460000,1420052760000,1420053060000,
                 1420053360000,1420060620000,1420060920000,1420062720000,1420063320000,1420063620000,
               1420063920000,1420064220000,1420064520000,1420072920000,1420073220000,
               1420073520000,1420073820000,1420074120000,1420074420000,1420074720000,1420075020000,1420075320000,
               1420075620000,1420075920000,1420076220000,1420076520000,1420076820000,1420077120000,1420077420000,
                 1420077720000,1420078020000,1420078320000,1420078620000,1420078920000,
                 1420079220000,1420079940000,1420080240000,1420080540000,1420082040000,
                 1420086240000,1420086240000,1420087740000,1420090140000,1420090140000,
                 1420090440000,1420090740000,1420091040000,1420091340000,1420095240000,
                 1420095540000,1420095840000,1420096140000,1420096440000,1420096740000,
                 1420104540000,1420104840000,1420105140000,1420105440000,1420106640000,
                 1420108740000,1420109040000,1420116240000,1420116540000,123];
 var yAxisdata=[100,110,112,113,110,112,111,110,115,116,114,114,110,114,112,113,110,110,112,114,112,121,112,114,113,
            115,121,112,114,113,121,112,114,113,115,121,112,114,113,115,121,112,114,113,121,112,114,113,115,121,
              112,114,113,121,112,114,113,112,121,124,115,116,115,123];
      var jarray = [];//from  www .j  a v a2 s .  c o m
         for (var i=0; i<xAxisdata.length && i<yAxisdata.length; i++){
            jarray[i] = [xAxisdata[i], yAxisdata[i]];
             }
//Creates chart
var chart =new Highcharts.StockChart({
         chart: {
                 renderTo: "container",
                 zoomType: 'x'
             },
         rangeSelector : {
            selected : 1,
            inputEnabled: $('#container').width() > 280
         },
         title : {
            text : 'AAPL Stock Price'
         },
         credits: {
                enabled: false
            },
         xAxis: {
                   title: {
                    text: 'Time'
                },
                type: 'datetime',
               labels:{
                      formatter:function(){
                          return Highcharts.dateFormat('%H<br/>%d<br/>%m<br/>%Y',this.value);
                      }
                  },
                },
                yAxis: {
                    title: {
                        text: "Stock "
                    },
                    lineWidth: 1,
                    min:0,
                    gridLineWidth: 0
                },
         series : [{
            name : 'AAPL',
            showInLegend: true,
            data : jarray,
            marker : {
               enabled : true,
               radius : 3
            }
         }]
      });
} );

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials