call ajax function to update the chart dynamically? - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

call ajax function to update the chart dynamically?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

@import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-background {
   fill: #222;//w  w  w .java  2 s .  c  o  m
}
.highcharts-title,
.highcharts-axis-title {
   fill: #DDD;
}
.highcharts-credits,
.highcharts-credits:hover {
   fill: #222;
}
body {
   background-color: #222;
   margin 0 !important;
}
#container {
   margin: 0;
   padding: 0;
   border: 0;
   background-color: #222;
   min-height: 400px;
   height:95%;
   width:95%;
   position:absolute;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
const options = {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Live Bitcoin Price'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'Price (USD)'
    }
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'Live Bitcoint Price [USD]',
    data: []
  }]
}
const chart = Highcharts.chart('container', options)
// Data
const getData = () => {
  setInterval(() => {
    window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => {
      return response.json()
    }).then((data) => {
      chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) })
    })
  }, 3000)
}
getData()
    }

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

Related Tutorials