Диаграмма. js не отображает Django Остальные данные API - PullRequest
0 голосов
/ 13 марта 2020

У меня есть REST API с django структурой отдыха, например:

[
{
    "id": 2,
    "timestamp": "2020-03-04T11:46:10+07:00",
    "vibration": 3,
    "moisture": 70,
    "gps_latitude": "-7.760776",
    "gps_longitude": "110.376113",
    "gyro_x": 6.58,
    "gyro_y": 85.0,
    "gyro_z": -3.9,
    "accelero_x": 6.58,
    "accelero_y": 85.0,
    "accelero_z": -3.9,
    "displacement": 10,
    "node_id": 1
},
{
    "id": 3,
    "timestamp": "2020-03-05T11:46:10+07:00",
    "vibration": 4,
    "moisture": 40,
    "gps_latitude": "-5.760776",
    "gps_longitude": "115.376113",
    "gyro_x": 5.58,
    "gyro_y": 55.0,
    "gyro_z": -5.9,
    "accelero_x": 5.58,
    "accelero_y": 55.0,
    "accelero_z": -5.9,
    "displacement": 50,
    "node_id": 1
},
{
    "id": 4,
    "timestamp": "2020-03-12T11:46:10+07:00",
    "vibration": 8,
    "moisture": 90,
    "gps_latitude": "-5.769776",
    "gps_longitude": "125.376113",
    "gyro_x": 7.58,
    "gyro_y": 65.0,
    "gyro_z": -9.9,
    "accelero_x": 4.58,
    "accelero_y": 45.0,
    "accelero_z": -4.9,
    "displacement": 40,
    "node_id": 2
}]

И вот код для создания API отдыха:

models.py from app directory

from django.db import models
from django.contrib.auth.models import User

class Data(models.Model):
   node_id = models.ForeignKey("Node", on_delete=models.CASCADE)
   timestamp = models.DateTimeField()
   vibration = models.IntegerField()
   moisture = models.IntegerField()
   gps_latitude = models.CharField(max_length=250)
   gps_longitude = models.CharField(max_length=250)
   gyro_x = models.FloatField()
   gyro_y = models.FloatField()
   gyro_z = models.FloatField()
   accelero_x = models.FloatField()
   accelero_y = models.FloatField()
   accelero_z = models.FloatField()
   displacement = models.IntegerField()

def __str__(self):
    return self.node_id

class Node(models.Model):
     node_id = models.IntegerField()

Это serializers.py из каталог приложения:

serializers.py

from .models import Data,Node
from rest_framework import serializers
from django.contrib.auth.models import User

class UserSerializer(serializers.ModelSerializer):
  id = serializers.IntegerField()
  username = serializers.CharField(max_length=200)
  password = serializers.CharField(max_length=100, style={"input_type":"password"})
  is_staff = serializers.BooleanField(default=False)

def create(self, validated_data):
    """The function called when you create a new User object/instance"""

    return User.objects.create(**validated_data)

def update(self, instance, validated_data):
    """
    Update and return an existing `User` instance, given the validated data.
    """
    instance.username = validated_data.get('username', instance.username)
    instance.password = validated_data.get('password', instance.password)
    instance.is_staff = validated_data.get('is_staff', instance.is_staff)
    instance.save()
    return instance

class Meta:
    model = User
    fields = ('id', 'username', 'password', 'is_staff')


class DataSerializer(serializers.ModelSerializer):
class Meta:
    model = Data
    fields = '__all__'


class NodeSerializer(serializers.ModelSerializer):
class Meta :
    model = Node
    fields = '__all__'

Это views.py из каталога приложения:

from django.views.generic import View
from django.shortcuts import render
from rest_framework import routers, serializers, viewsets
from rest_framework.response import Response
from restapi.serializers import UserSerializer, DataSerializer, NodeSerializer
from django.contrib.auth.models import User
from restapi.models import Data, Node
from django_filters.rest_framework import DjangoFilterBackend
from django.http import HttpResponse
# Create your views here.

class Charts(View):
  def get(self, request, *args, **kwargs):
    return render(request, 'charts.html')


class UserViewSet(viewsets.ModelViewSet):
 queryset = User.objects.all()
 serializer_class = UserSerializer


class DataViewSet(viewsets.ModelViewSet):
 queryset = Data.objects.all()
 serializer_class = DataSerializer
 filter_backends = [DjangoFilterBackend]
 filterset_fields = ['node_id']


class NodeViewSet(viewsets.ModelViewSet):
 queryset = Node.objects.all()
 serializer_class = NodeSerializer

А это urls.py из каталога проекта:

from django.contrib import admin
from django.urls import path, include
from restapi import views

from django.contrib.auth.models import User
from restapi.models import Data, Node
from rest_framework import routers

from restapi.views import UserViewSet, DataViewSet, NodeViewSet, Charts


router = routers.DefaultRouter()
router.register(r'api/users', UserViewSet)

router.register(r'api/data', DataViewSet)

router.register(r'api/node', NodeViewSet)


urlpatterns = [
  path('admin/', admin.site.urls),
  path(r'', include(router.urls)),
  path(r'api/', include('rest_framework.urls', namespace='rest_framework')),
  path('charts/', Charts.as_view(), name='charts'),
]

И это код для диаграммы. js:

$(document).ready(function(){
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $("#firstdatepicker").datepicker();
  $("#lastdatepicker").datepicker();
  $("#filter").click(function() {
    var from_date = $("#firstdatepicker").val();
    var to_date = $("#lastdatepicker").val();
    if (from_date != '' && to_date != '') {
      console.log(from_date, to_date);
      var endpoint = '/api/data'
  $.ajax({
    method: "GET",
    dataType: "json",
    url: endpoint,
    data: {
      from_date: from_date,
      to_date: to_date
    },
    success: function(data){

      var ctx = document.getElementById("myChart2").getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: data.timestamp,
              datasets: [{
                  label: 'moisture',
                  data: data.moisture,
                  backgroundColor: [
                      'rgb(68, 145, 252)'
                  ],
                  borderColor: [
                  '#331698'
                  ],
                  borderCapStyle: 'round',
                  borderWidth: 1
              }]
          },
          options: {
              reponsive: true,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true,
                          max:100,
                          stepSize:10
                      },
                        scaleLabel: {
                        display:     true,
                        labelString: 'moisture'
                    }
                  }],
                  xAxes: [{
                          display: true,
                          ticks: {
                            min: from_date,
                            max: to_date,
                          },
                          type: 'time',
                          time: {
                            displayFormats: {
                              second: 'h:mm:ss a'
                            }
                          },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Date'
                    }
                  }]
              }
          }
      });
    },
    error: function(error_data){
      console.log(error_data)
    }
  });
} else {
  alert("Please Select Date");
}
  });    })

список пунктов:

jango-filter       2.2.0
djangorestframework 3.11.0
get                 2019.4.13
pip                 20.0.2
post                2019.4.13
psycopg2            2.8.4
public              2019.4.13
pytz                2019.3
query-string        2019.4.13
request             2019.4.13
setuptools          40.8.0
sqlparse            0.3.1

Я не знаю, что не так. Данные не могут быть отображены на графике. Я новичок с django. Я использую django 2.2.5

без отображаемых данных

Я очень ценю вас, ребята, если вы хотите мне помочь. Прошу прощения, мой английский sh такой плохой, я не родной.

1 Ответ

0 голосов
/ 17 марта 2020

В коде для диаграммы. js, попробуйте изменить URL endpoint на http address

$(document).ready(function(){
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $("#firstdatepicker").datepicker();
  $("#lastdatepicker").datepicker();
  $("#filter").click(function() {
    var from_date = $("#firstdatepicker").val();
    var to_date = $("#lastdatepicker").val();
    if (from_date != '' && to_date != '') {
      console.log(from_date, to_date);
      var endpoint = '/api/data'
  $.ajax({
    method: "GET",
    dataType: "json",
    url: "http://your-server:port/api/data/",
    data: {
      from_date: from_date,
      to_date: to_date
    },
    success: function(data){
      //check the data, if it's already return the correct array mentioned at the beginning of the question
      console.log(data);

      var ctx = document.getElementById("myChart2").getContext('2d');
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: data.timestamp,
              datasets: [{
                  label: 'moisture',
                  data: data.moisture,
                  backgroundColor: [
                      'rgb(68, 145, 252)'
                  ],
                  borderColor: [
                  '#331698'
                  ],
                  borderCapStyle: 'round',
                  borderWidth: 1
              }]
          },
          options: {
              reponsive: true,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true,
                          max:100,
                          stepSize:10
                      },
                        scaleLabel: {
                        display:     true,
                        labelString: 'moisture'
                    }
                  }],
                  xAxes: [{
                          display: true,
                          ticks: {
                            min: from_date,
                            max: to_date,
                          },
                          type: 'time',
                          time: {
                            displayFormats: {
                              second: 'h:mm:ss a'
                            }
                          },
                        scaleLabel: {
                        display:     true,
                        labelString: 'Date'
                    }
                  }]
              }
          }
      });
    },
    error: function(error_data){
      console.log(error_data)
    }
  });
} else {
  alert("Please Select Date");
}
  });    })
...