How to display data with amcharts and django in realtime?

Question

I want the chart refresh itself(not to refresh the whole web page) ,like a heart monitor ,everytime a new data has been added to the database,is that possible?

With codes below,i must refresh the web page and see if there's any new data.

views.py:

from tempsensors.models import temp

def temp_page(request):
#this view is to store the temperature value into my database
#data is send by my board with a temperature sensor
if request.method == 'POST' and 'tem' in request.POST and request.POST['tem']:
    temp_value = float(request.POST['tem']) 
    temp_add = temp(temp=temp_value)
    temp_add.save()
else:
#only for post data
    raise Http404
return render_to_response("temp.html",locals(),context_instance=RequestContext(request))

def chart_page(request):
    #this view will display a chart
    temps = temp.objects.all()
    # formatting JSON file
    prefix = ''
    chartData = "[" 
    for t in temps:
        chartData += prefix
        chartData += "{\n" 
        chartData += "                      date: "
        chartData += "new Date(" + str(t.temp_date.year) + "," 
        chartData += str(t.temp_date.month-1) + "," 
        chartData += str(t.temp_date.day) + "," 
        chartData += str(t.temp_date.hour) + "," 
        chartData += str(t.temp_date.minute) + "),\n"
        chartData += "                      value: "
        chartData += str(t.temp) + "\n                      }"
        prefix = ", "
    chartData += "]" 
    temp_now = temp.objects.order_by("-id")[0].temp
    return render_to_response('chart.html', locals())

chart.html

var chartData = {{chartData}}
chart.dataProvider = chartData;

Answer 1

If you want the data to be streaming to the page in "real time" you're going to have to have some framework to do it. Django is all about generating html and will return the data needed when the page requests it but what you want is data transfer after POST. For this I recommend taking a look at socket.io. A good example project that helped me understand how this integrates with django can be found here on github.

Hope this helps get you started.

Answer 2

I can't speak specifically for Django or Amcharts, but in general this is what you would want to do.

In your client side web page, you will want to have a periodic AJAX call to your web server to get either the full, most recent, dataset or just the latest data point. The AJAX call could be implemented with jQuery or more raw Javascript, if you would like. With the new dataset (or datapoint) at the client, update the Amchart.

Another method, that would be more realtime, would be to use web sockets and establish a connection to your server from your client. Web sockets keep a connection open, so that the server can essentially push a new datapoint to the client. Of course, this may depend on your host and if they support having web sockets. You would need an appropriate library on your server side as well as on the client side.