title: Plotting Real Time data using Flask Chart.js
body: <p>I am sending some data to my Flask server from another application using HTTP requests. I need to plot and display the data on my webpage. The graph needs to update whenever new data comes in. The plot is a real-time plot. So far data transfer is working properly but I am unable to plot the data.
  This is my python code</p>
  <pre><code>@app.route('/', methods=[&quot;GET&quot;, &quot;POST&quot;])
  def main():
     
  return render_template('index.html')
  
  
  @app.route('/data', methods=[&quot;GET&quot;, &quot;POST&quot;])
  def data():
      # Using Static data
      #data = [time() * 1000, random() * 100]
  
  
      data = [request.json[&quot;time&quot;],request.json[&quot;value&quot;]]
      print(data)
  
      response = make_response(json.dumps(data))
      response.content_type = 'application/json'
      return response
  </code></pre>
  <p>Using data inside the app, the plot works but when I try to get data from server, it does not work.</p>
  <p>The script used for 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-html lang-html prettyprint-override"><code>&lt;script&gt;
          var chart;
  
          function requestData()
          {
              // Ajax call to get the Data from Flask
              var requests = $.get('/data');
  
  
              var tm = requests.done(function (result)
              {
                  var series = chart.series[0],
                      shift = series.data.length &gt; 20;
  
                  // add the point
                  chart.series[0].addPoint(result, true, shift);
  
                  // call it again after one second
                  setTimeout(requestData, 2000);
              });
          }
  
          $(document).ready(function() {
              chart = new Highcharts.Chart({
                  chart: {
                      renderTo: 'data-container',
                      defaultSeriesType: 'spline',
                      events: {
                          load: requestData
                      }
                  },
                  title: {
                      text: 'Live random data'
                  },
                  xAxis: {
                      type: 'datetime',
                      tickPixelInterval: 150,
                      maxZoom: 20 * 1000
                  },
                  yAxis: {
                      minPadding: 0.2,
                      maxPadding: 0.2,
                      title: {
                          text: 'Value',
                          margin: 80
                      }
                  },
                  series: [{
                      name: 'Random data',
                      data: []
                  }]
              });
  
          });
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I keep getting the error &quot;NoneType&quot; object is not subscript-able. Any help would be much appreciated. Thanks in advance.</p>