Display multiple data points at once : Highcharts

Question

What I am trying to do is that I have created a php file to create a dynamic array of no's which changes on every page load.

the php code that I created is :

header("Content-type: text/json");
 $random = [] ;
 for($i=0 ;$i<10;$i++)
{
    $random[] = rand(0,10) ;
}
 echo json_encode($random);

Now I am fetching that array of 10 no's in the Highcharts.

The chart is displaying points but not in an expected manner it shows very weird line plotting.

The Code that I used for Highchart's data Plotting is Given below.

var chart;

function requestData() {
  $.ajax({
    url: 'data.php',
    success: function(data) {
      var series = chart.series[0],
        shift = series.data.length > 20; // shift if the series is 
      y = data;
      console.log(y);

      chart.series[0].addPoint(y, true, shift);

      setTimeout(requestData, 1000);
    },
    cache: false
  });
}

document.addEventListener('DOMContentLoaded', function() {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'line',
      events: {
        load: requestData
      }
    },
    title: {
      text: 'Live random data'
    },
    xAxis: {
      crosshair: false
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: 'Value',
        margin: 80
      }
    },
    series: [{
      name: 'Random data',
      data: []
    }]
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

I don't understand where I am making mistake. the console shows no errors and also shows the array values but the chart doesn't render as expected.

I need to show data something like following(just an example of how the line should plot).

https://jsfiddle.net/abnitchauhan/9Lam2b1v/

Hi @Abnit Chauhan, What is the result of console.log(y) in requestData function? — ppotaczek
– ppotaczek, Commented Sep 4, 2019 at 15:52
It's an array consisting of 10 no's like [1,5,3,6,3,5,6,4,6,3]. Which changes on Every AJAX Call. @ppotaczek — Chempooro
– Chempooro, Commented Sep 5, 2019 at 4:53

ppotaczek · Accepted Answer · 2019-09-05 12:10:05Z

1

By using the addPoint method you can add only one point. You need to use setData method or addPoint in a loop:

function requestData() {
    $.ajax({
        url: 'https://api.myjson.com/bins/wmxsn',
        success: function(data) {
            var series = chart.series[0],
                shift = series.data.length > 20, // shift if the series is 
                y = data;

            data.forEach(function(el) {
                chart.series[0].addPoint(el, false, shift);
            });

            chart.redraw();

            //setTimeout(requestData, 1000);
        },
        cache: false
    });
}

Live demo: http://jsfiddle.net/BlackLabel/02b83Lkh/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Series#setData

answered Sep 5, 2019 at 12:10

ppotaczek

39.3k2 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chempooro Over a year ago

Brilliant. Just few things to ask. data.forEach(function(el) { chart.series[0].addPoint(el, false, shift); }); 1. why did you put false in the second parameter of the function 2. Can we change the animation type of this data points coming in bunches. I want to show it as a live stream

ppotaczek Over a year ago

1. I set false for performance, chart.redraw() is called only once after the loop. 2. You can create intervals with animation: jsfiddle.net/BlackLabel/81z932vg

Ashu · Accepted Answer · 2019-09-04 12:10:30Z

1

I will suggest better use the inbuilt function of highchart if you have dynamic JSON file as input.

[ rowsURL: string ] Since 4.0.0 A URL to a remote JSON dataset, structured as a row array. Will be fetched when the chart is created using Ajax.

Please check below example:

var chart = Highcharts.chart('container', {		
    data: {
        rowsURL: 'https://demo-live-data.highcharts.com/time-rows.json',
        firstRowAsNames: false,
        enablePolling: true,
        dataRefreshRate:2
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>

API Reference:https://api.highcharts.com/highcharts/data.rowsURL

var chart = Highcharts.chart('container', {		
    data: {
        rowsURL: 'https://api.jsonbin.io/b/5d6f9fd2de27e46cb7db3a10/1',
        firstRowAsNames: false,
        enablePolling: true,
        dataRefreshRate:2
    }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>

if you want to do it via custom ajax call, below is the sample:

var chart;
var seriesData = [1, 2];

function requestData() {
  $.ajax({
    url: 'https://api.jsonbin.io/b/5d6fa89c8ea2fe6d64ecb00c',
    success: function(data) {
      values = data;
      seriesData = seriesData.concat(values);
      chart.update({
        series: [{
          data: seriesData
        }]
      });
      //console.log(seriesData);

      setTimeout(requestData, 1000);
    },
    cache: false
  });
}

document.addEventListener('DOMContentLoaded', function() {
  chart = Highcharts.chart('container', {
    series: [{
      data: seriesData
    }],

  });
});
setTimeout(requestData, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


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

edited Sep 4, 2019 at 12:10

answered Sep 4, 2019 at 9:53

Ashu

2,2763 gold badges22 silver badges39 bronze badges

9 Comments

Chempooro Over a year ago

Will this possible with one axis value data(My custom Data). my dynamic data returns input as following [1,5,3,6,3,5,6,4,6,3]

Ashu Over a year ago

I don't think so this can be passed as input. I have not tried anything like that.

Chempooro Over a year ago

What kind of data then can be passed as an input? I will try to create something like that.

Ashu Over a year ago

sample data can be seen here demo-live-data.highcharts.com/time-rows.json

Ashu Over a year ago

Data needs to be in 2D array format which specify x and y axis values . like api.jsonbin.io/b/5d6f9fd2de27e46cb7db3a10/1

|

Collectives™ on Stack Overflow

Display multiple data points at once : Highcharts

2 Answers 2

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related