change variable with click in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

change variable with click in line 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">
    window.onload=function(){/*w ww. j  a v a  2s.c  o  m*/
function drawHighchart(timeFrameUrl) {
    $.ajax({url: timeFrameUrl, success: function(result){
        $('#container').highcharts({
            xAxis: {
            },
            series: [{
                data: result
            }]
        });
    }});
}
$(document).ready(function() {
      var selectedTimeFrameUrl = null;
      selectedTimeFrameUrl = $("#day").data( "url" );
    drawHighchart(selectedTimeFrameUrl);
    $("#month, #day, #hour").click(function(){
           selectedTimeFrameUrl = $(this).data( "url" );
        drawHighchart(selectedTimeFrameUrl);
    });
    setInterval(function() {
          drawHighchart(selectedTimeFrameUrl);
    }, 300000);// 5 minutes === 300000 ms
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <button id="month" data-url="https://api.myjson.com/bins/12at1e">Month</button> 
      <button id="day" data-url="https://api.myjson.com/bins/16cjya">Day</button> 
      <button id="hour" data-url="https://api.myjson.com/bins/1fecci">Hour</button> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials