CODEWITHSUNDEEP
jsonajaxhighcharts
Darshan theerth
Darshan theerth

Reputation: 536

how to call ajax function to update the Highcharts graph dynamically?

I am using Highcharts to plot the graph of temperature vs time. I am having a JSON file wherein data from the backend keep updates the JSON file. I want to call ajax function such that the graphs automatically generates with respect to time. How to do that? I am new to high charts, please help me.

Upvotes: 0

Views: 1294

Answers (1)

stpoa
stpoa

Reputation: 5573

You can use Series.addPoint method. http://api.highcharts.com/highcharts/Series.addPoint

Here is a example of using Highcharts with live data with GET HTTP requests.

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()
@import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-background {
  fill: #222;
}

.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;
}
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Live example: https://jsfiddle.net/xpfkx91w/

Upvotes: 1

Related Questions