Highchart datepicker range selector and dynamically select what data to show - Javascript highcharts

Javascript examples for highcharts:Chart Range

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

Description

Highchart datepicker range selector and dynamically select what data to show

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">
$(function () {//from   w w w  .j  a  va2  s.  c  o m
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
            }]
        },
        function (chart) {
            $('#btn').click(function () {
                chart.series[0].update({
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 16.0]
                });
            });
        });
        });
    });

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://github.highcharts.com/v3.0Beta/highcharts.js"></script> 
      <script type="text/javascript" src="https://github.highcharts.com/v3.0Beta/modules/data.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
      <button id="btn">update</button>  
   </body>
</html>

Related Tutorials