Clever Geek Handbook

Want to draw data using chartjs in django

My application will take data using a form and store it in a database and then draw it using charts. I tried this code but gave me an error. My code looks like this:

def get_temperature_show(request):
all_temperatures = Temper.objects.all()

dates_label = []
sensor1_temp = []
sensor2_temp = []
sensor3_temp = []
sensor4_temp = []

for model in all_temperatures:
    dates_label.append(model.date)
    sensor1_temp.append(model.sensor1_temp)
    sensor2_temp.append(model.sensor2_temp)
    sensor3_temp.append(model.sensor3_temp)
    sensor4_temp.append(model.sensor4_temp)

data = {
    'dates': dates_label,
    'sensor1': sensor1_temp,
    'sensor2': sensor2_temp,
    'sensor3': sensor3_temp,
    'sensor4': sensor4_temp
}

return render(request, 'weather/showtemper.html', json.dumps({"data":data}))

But it gives the following -

datetime.date (2017, 4, 4) is not JSON serializable

My example template looks like this:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        datasets: [{
            label: 'apples',
            data: [12, 19, 3, 17, 6, 3, 7],
            backgroundColor: "rgba(153,255,51,0.4)"
        }, {
            label: 'oranges',
            data: [2, 29, 5, 5, 2, 3, 10],
            backgroundColor: "rgba(255,153,0,0.4)"
        }]
    }
});

Please help me to solve this error.

Thank you in advance

+3


source to share


2 answers


The view should look like this:

def get_temperature_show(request):

data = Temper.objects.all()
return render(request,'weather/showtemper.html',{'data':data})


In the template, just iterate over the data. The code looks like this:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
    {#        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],#}

    labels: [{% for d in data %} "{{ d.date }}", {% endfor %}],
    datasets: [{
        label: 'Sensor 1',
        {#            data: [12, 19, 3, 17, 6, 3, 7],#}
        data: [{% for temp in data %} "{{ temp.sensor1_temp }}", {% endfor %}],
        backgroundColor: "rgba(153,255,51,0.4)"
    }, {
        label: 'Sensor 2',
        data: [{% for temp in data %} "{{ temp.sensor2_temp }}", {% endfor %}],
        backgroundColor: "rgba(255,153,0,0.4)"
    },
        {
            label: 'Sensor 3',
            data: [{% for temp in data %} "{{ temp.sensor3_temp }}", {% endfor %}],
            backgroundColor: "rgba(0,0,255,0.4)"
        },
        {
            label: 'Sensor 4',
            data: [{% for temp in data %} "{{ temp.sensor4_temp }}", {% endfor %}],
            backgroundColor: "rgba(255,0,0,0.4)"
        }]
}
});
+1


source 


from json import JSONEncoder
class MyEncoder(JSONEncoder):
   def default(self, o):
       if isinstance( o, datetime.datetime):
           return o.isoformat()
       return o 


json.dumps(cls=MyEncoder)


try this when django dump code

0


source






More articles:


All Articles