update graph from array data in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

update graph from array data in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <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">
var Data_A = [];
var Data_B = [];
Data_A[ 2500 ] = 98;
Data_A[ 2501 ] = 95;
Data_A[ 2502 ] = 98;
Data_A[ 2503 ] = 98;
Data_A[ 2504 ] = 92;
Data_A[ 2505 ] = 98;
Data_A[ 2506 ] = 95;
Data_A[ 2507 ] = 98;
Data_A[ 2508 ] = 98;
Data_A[ 2509 ] = 92;
Data_B[ 2500 ] = 20;
Data_B[ 2501 ] = 30;
Data_B[ 2502 ] = 55;
Data_B[ 2503 ] = 66;
Data_B[ 2504 ] = 02;
Data_B[ 2505 ] = 20;
Data_B[ 2506 ] = 11;
Data_B[ 2507 ] = 26;
Data_B[ 2508 ] = 8;
Data_B[ 2509 ] = 96;
$(function () {/*from www  .j a va  2 s .  co m*/
    var chart = new Highcharts.Chart({
        chart : {
            renderTo : $('#container')[0]
        },
        xAxis: {
            categories: []
        },
        tooltip: {
            shared: true,
            useHTML: true,
            formatter: function() {
                HTML = "";
                HTML = HTML + "<table>";
                HTML = HTML + "<tr><td>Pressure A:</td><td>" + Data_A[this.x] + "</td></tr>";
                HTML = HTML + "<tr><td>Other data:</td><td>" + Data_B[this.x] + "</td></tr>";
                HTML = HTML + "</table>";
                return HTML;
            }
        },
        series: [{
            name: 'Compressebility',
            data: [
                {
                    x: 2500,
                    y: Data_A[2500],
                },
                {
                    x: 2501,
                    y: Data_A[2501],
                },
                {
                    x: 2502,
                    y: Data_A[2502],
                },
                {
                    x: 2503,
                    y: Data_A[2503],
                },
                {
                    x: 2504,
                    y: Data_A[2504],
                },
                {
                    x: 2505,
                    y: Data_A[2505],
                },
                {
                    x: 2506,
                    y: Data_A[2506],
                },
                {
                    x: 2507,
                    y: Data_A[2507],
                }
            ]
        }]
    });
    setInterval(function(){
        chart.series[0].data[0].update({
            y : Data_A[ 2500 ]++
        });
    },1000);
});

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

Related Tutorials