stock chart to Change date format dynamically on clicking range selector button - Javascript highcharts

Javascript examples for highcharts:Stock Chart

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

Description

stock chart to Change date format dynamically on clicking range selector button

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Stock Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <script type="text/javascript">
$(function() {/*from w  w w . j  av a  2s  .  c om*/
    var df=['%I:%M %p','%a, %b %e %I:%M %p','%a, %b %e'];
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function(data) {
        // create the chart
        chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },
            title: {
                text: 'AAPL stock price by minute'
            },
            xAxis: {
                gapGridLineWidth: 0
            },
            rangeSelector : {
                buttons : [{
                    type : 'hour',
                    count : 1,
                    text : '1h'
                }, {
                    type : 'day',
                    count : 1,
                    text : '1D'
                }, {
                    type : 'all',
                    count : 1,
                    text : 'All'
                }],
                selected : 1,
                inputEnabled : false
            },
            series : [{
                name : 'AAPL',
                type: 'area',
                data : data,
                gapSize: 5,
                tooltip: {
                    valueDecimals: 2,
                    //xDateFormat: '%A %e. %B, %Y %l:%M:%S'
                },
                dataGrouping: {
                    enabled: false
                },
                fillColor : {
                    linearGradient : {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
                },
                threshold: null
            }],
            tooltip : {
                formatter : function(){
                    var selected = this.points[0].series.chart.rangeSelector.selected;
               var s=Highcharts.dateFormat(df[selected], this.x);
                    console.log(this);
               s+="<br/>";
               $.each(this.points, function(i, series){
                  s += '<span style="color:' + this.series.color + '">' + this.series.name + '</span> : <b>'+ this.y.toFixed(2) +'</b><br/>';
               });
               return s;
         }
            }
        });
    });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 600px"></div> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>  
   </body>
</html>

Related Tutorials