//차트가 그려지는 메인 페이지
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>