Скрипт прорисовки с Flask и Chart. js замораживает Macbook - PullRequest
Новая
       8

Скрипт прорисовки с Flask и Chart. js замораживает Macbook

0 голосов
/ 09 января 2020

Мой Macbook полностью зависает после запуска этой программы построения графиков. Бэкэнд flask отправляет запрос GET с целым числом от 1 до 10, который затем выводится во внешнем интерфейсе.

Я попытался добавить строку <script language="JavaScript" src="livePlotting.js?n=1"></script>, чтобы избежать сохранения кэша в браузере, так как я думал, что это может быть проблемой, но это не решило ее.

Есть идеи относительно того, что происходит? Не уверен, что оперативная память заполнена или что происходит ..

Вот код:

server.py: 

from flask import Flask, jsonify, render_template,request

import webbrowser
import time
import random


app = Flask(__name__)

@app.route('/_stuff', methods = ['GET'])

def stuff():
    response = jsonify(result = random.randint(0,10))
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response


@app.route('/')
def index():
    return render_template('index.html')

if __name__=='__main__':
    app.run()

index. html (КЛИЕНТ): 

  <!DOCTYPE html>
<html lang="en">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>

<body onload="update_values();">
    <h1> Dynamic update</h1>
    <p>
        <span id="result">?</span>
    </p>
    <script>
        document.getElementById("result").innerHTML;
    </script>
    <button onclick="stopTextColor();">Stop</button>
    <div>
        <canvas id="myChart" width="0.02em" height=".02em"></canvas>
        <canvas id="myChart2" width="0.02em" height=".02em"></canvas>

    </div>
    <script language="JavaScript" src="livePlotting.js?n=1"></script>

</body>

</html>

Javascript: 

var intervalID = setInterval(update_values, 5000);
var c = 0;
var temp;
var randomInt = 0;

function update_values() {

  fetch("http://127.0.0.1:5000/_stuff")
    .then(resp => resp.json()) // Transform the data into json
    // Call the fetch function passing the url of the API as a parameter
    .then(function(data) {
      console.log("sumin");
      randomInt = data.result / 10;
      console.log(randomInt);
      // Your code for handling the data you get from the API
    })
    .catch(function() {
      console.log("suminerror");

      // This is where you run code if the server returns any errors
    });

  c = c + 1;

  //console.log('c',c);
  //console.log('temp',temp);
  myChart.data.labels.push(c);

  console.log("HERE" + " " + randomInt);
  myChart.data.datasets.forEach(dataset => {
    dataset.data.push(randomInt);
  });
  myChart.update();
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [c],
    datasets: [
      {
        label: "# of people visiting market",
        data: [temp],
        backgroundColor: ["rgba(102,255,153,1)"],
        borderColor: ["rgba(255,0,0,1)"],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }
});
...