Replace data set every min from area spline chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Replace data set every min from area spline 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" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*  w  ww. j  ava 2  s.c o m*/
   Highcharts.setOptions({
     lang: {
       rangeSelectorZoom: '' //have no word 'zoom' before range selector
     }
   });
   var varyData = [
     [1451606400000, 23.61],
     [1454284800000, 23.60],
     [1456790400000, 23.79],
     [1459468800000, 24.33],
     [1462060800000, 24.70],
     [1464739200000, 24.45]
   ];
   $(function() {
     $('#chart2').highcharts('StockChart', {
       exporting: {
         enabled: false
       },
       rangeSelector: {
         buttons: [{
           type: 'day',
           count: 1,
           text: 'Day'
         }, {
           type: 'week',
           count: 1,
           text: 'Week'
         }, {
           type: 'month',
           count: 1,
           text: 'Month'
         }],
         selected: 2,
         inputEnabled: true,
         buttonPosition: {
           x: 340
         },
         buttonSpacing: 10
       },
       credits: {
         enabled: false
       },
       scrollbar: {
         enabled: true
       },
       navigator: {
         enabled: true
       },
       series: [{
         name: 'Response Time (ms)',
         data: varyData,
         type: 'areaspline',
         threshold: null,
         tooltip: {
           valueDecimals: 2
         },
         fillColor: {
           linearGradient: {
             x1: 0,
             y1: 0,
             x2: 0,
             y2: 1
           },
           stops: [
             [0, Highcharts.getOptions().colors[0]],
             [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
           ]
         }
       }]
     });
     $('#updateButton').click(function() {
       var date = $('#newDate').val();
       var epoch = Math.round(new Date(date).getTime());
       var value = parseInt($('#newValue').val());
       var chart = $('#chart2').highcharts();
       chart.series[0].addPoint([epoch, value], true);
     });
     $('#resetChart').click(function() {
       var chart = $('#chart2').highcharts();
       chart.series[0].setData(null, true);
     });
   });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.0.min.js">

      </script> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="chart2"></div>
       Enter Date and Time: 
      <input type="datetime-local" id="newDate"> 
      <br>
       Enter Value: 
      <input type="number" id="newValue"> 
      <br> 
      <button id="updateButton">Add Chart Data</button> 
      <button id="resetChart"> Reset </button>  
   </body>
</html>

Related Tutorials