Блог

Главная - Вопросы по программированию - Построение графика с Chart.js использование nodejs и moongose

Построение графика с Chart.js использование nodejs и moongose

#javascript #node.js #mongodb #chart.js

#javascript #node.js #mongodb #chart.js

Вопрос:

Я пытаюсь построить график из mongodb, используя Chart.js код App.js , считывающий данные из mongodb, и все работает нормально. Проблема возникает, когда я пытаюсь отправить данные в client side для построения графика. Каков наилучший способ отправки данных на сторону клиента для построения графика? Ниже graph.ejs html-файл для построения данных.

App.js

     var mongoose = require('mongoose');
    var Schema   = mongoose.Schema;
    ObjectID = require('mongodb').ObjectID;
    var configDB = require('./config/database.js');
    mongoose.connect(configDB.url);

    mongoose.model('Temperatura',
                   new Schema({ time: Number, temperature: Number}),
                   'col');

    var dados = mongoose.model('Temperatura');

            dados.find({}, function(err, data)
            {
                    if(err){
                            console.log(err, data, data.length);
                    }else{
                            console.log(data);
                    }

                    var Time = [];
                    var Temperature = [];
                    var Grafico = [];


                    for ( index in data){

                      var doc = data[index];
                      var objectId = new ObjectID(doc['_id'])
                      var time = objectId.getTimestamp();
                      console.log(doc['temp']);
                      var temperature = doc['temp'];

                      Temperature.push({"value" : temperature});
                      Time.push({"value" : time});

                      }
    }).sort('-date').limit(100);

app.get("/dados", function(req, res){
          res.render('grafico.ejs',{val: Temperature},{ message: req.flash('loginMessage') });
});

Graph.ejs

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title>myWeather</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
    <script type="text/javascript">
        var data = !{JSON.stringify(data)};
    </script>
</head>
<body>
    <% if (message.length > 0) { %>
        <div class="alert alert-danger"><%= message %></div>
    <% } %>
    <h1>Val: <span id="val"><%=val%></span></h1>
    <script>
        var data;
        getData(data);

        var x = data.x;
        var y = data.y;

        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: x,
            datasets: [{
                label: 'apples',
                data: y,
                backgroundColor: "rgba(153,255,51,0.4)"
          }]
        }
      });
    </script>
    <canvas id="myChart" syle="width: 80%; margin: 15px auto;"></canvas>

</body>
</html>

Комментарии:

1. Это очень расплывчато. Не могли бы вы, пожалуйста, прояснить свой вопрос, чтобы он был сфокусирован на том, с чем вы на самом деле боретесь. У вас возникли проблемы с отправкой данных или использованием chartjs? Помните, SO — это не форум для консультаций, это сайт контроля качества.

2. @Soviut, моя особая проблема заключается в отправке результата функции getdata () на сторону клиента для построения данных с использованием Chartjs.