title: Display multiple data points at once : Highcharts
body: <p>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.</p>
  
  <p>the <code>php</code> code that I created is :</p>
  
  <pre><code>header("Content-type: text/json");
   $random = [] ;
   for($i=0 ;$i&lt;10;$i++)
  {
      $random[] = rand(0,10) ;
  }
   echo json_encode($random);
  </code></pre>
  
  <p>Now I am fetching that array of 10 no's in the Highcharts.</p>
  
  <p>The chart is displaying points but not in an expected manner it shows very weird line plotting.</p>
  
  <p>The Code that I used for Highchart's data Plotting is Given below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var chart;
  
  function requestData() {
    $.ajax({
      url: 'data.php',
      success: function(data) {
        var series = chart.series[0],
          shift = series.data.length &gt; 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: []
      }]
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/series-label.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>I need to show data something like following(just an example of how the line should plot). </p>
  
  <p><a href="https://jsfiddle.net/abnitchauhan/9Lam2b1v/" rel="nofollow noreferrer">https://jsfiddle.net/abnitchauhan/9Lam2b1v/</a> </p>