Django Chart.js


//차트가 그려지는 메인 페이지
def chart(request):
    return render(request, 'chart.html')
//json 형태로 반환해주는 로직
def Sensor_chart(request):
    labels = []
    temperature = []
    humidity = []
    micro_dust = []
    queryset = 모델명.objects.values().all()
    for entry in queryset:
        labels.append(entry['date_joined'])
        temperature.append(entry['temperature'])
        humidity.append(entry['humidity'])
        micro_dust.append(entry['micro_dust'])
    return JsonResponse(data={
        'labels': labels,
        'temperature': temperature,
        'humidity': humidity,
        'micro_dust': micro_dust
    })
  <div id="container" style="width: 75%;">
    <canvas id="임의의 차트아이디" data-url="{% url 'url이름' %}"></canvas>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script>
    $(function () {
      var $populationChart = $("#임의의 차트아이디");
      $.ajax({
        url: $populationChart.data("url"),
        success: function (data) {
          var ctx = $populationChart[0].getContext("2d");
          new Chart(ctx, {
            type: 'line',
            data: {
              labels:data.labels,
              datasets: [{
                label: '온도',
                backgroundColor: 'blue',
				fill : false,
                data: data.temperature
              },{
				label: '습도',
				fill : false,
                backgroundColor: 'red',
                data: data.humidity
			  } ,
			  {
				label: '미세먼지',    fill : false,
                backgroundColor: 'green',
                data: data.micro_dust
			  }
			  ]  }
           ,
            options: {
              responsive: true,
              legend: {
                position: 'top',
              },
              title: {
                display: true,
                text: 'Population Bar Chart'
              }
            }
          });
        }
      });
    });
  </script>

Leave a Comment