如何将视图中的值传递给模板以绘制曲线图

问题描述:

template.html 
<script src="http://code.highcharts.com/highcharts.js"> 
</script> 
<script > 
$(document).ready(function() { 
var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container', 
     type: 'line' 
    }, 
    title: { 
     text: 'Power Consumption Vs Generator Consumption' 
    }, 
    xAxis: { 
     categories: [{{month_number|join:"','" }}] 
    }, 
    yAxis: { 
     title: { 
      text: 'Fruit eaten' 
     } 
    }, 

    // series: [{ 
     // name: 'Truepower Consumed', 
     // data: [1, 0, 4]}, 
    // { 
     // name: 'Generator Consumed', 
     // data: [5, 7, 3]}], 
// }); 
series: [{ 
     name: 'Truepower Consumed', 
     data: [ '{{ p|join:"','" }}']}, 
    { 
     name: 'Generator Consumed', 
     data: [ '{{ q|join:"','" }}']}], 
}); 

});如何将视图中的值传递给模板以绘制曲线图

views.py 

def plot_graph(request): 
    month_number=[] 
    months=KEBReading.objects.filter().values("datetime_reading") 
    print months 
    for obj in months: 
     month_number=obj["datetime_reading"].day 
     print month_number 
    q2=KEBReading.objects.filter().values("truepower_consumed") 
    print q2 
    q3=GeneratorReading.objects.filter().values("perday_dgunit") 
    print q3 
    for item in q2: 
     power_values=item["truepower_consumed"] 
     print power_values 
    print "tee" 
    for item in q3: 
     gen_values=item["perday_dgunit"] 
     print gen_values 
    context={'m':month_number,'p':power_values,'q':gen_values}  
    return render_to_response('graph.html',context, 
           context_instance=RequestContext(request)) 

即时通讯试图绘图。我可以知道如何将视图中的值传递给图形的jQuery。 上下文= { 'M':MONTH_NUMBER, 'P':power_values, 'Q':gen_values} p和q是y轴的值和m的x轴值

models.py 


class KEBReading(models.Model): 

    datetime_reading=models.DateTimeField() 

    truepower_reading=models.DecimalField(verbose_name="True Power       Reading(KWH)",max_digits=6,decimal_places=2,blank=False,null=False) 
apparentpower_reading=models.DecimalField(verbose_name="Apparent Power Reading(KVAH)",max_digits=6,decimal_places=2,blank=False,null=False) 
truepower_consumed=models.DecimalField(max_digits=6,decimal_places=2,blank=False,null=False) 
voltage_reading=models.IntegerField(blank=False,null=False) 
powerfactor=models.DecimalField(max_digits=3,decimal_places=2) 



class GeneratorReading(models.Model): 

    datetime_reading=models.DateTimeField() 

running_time=models.IntegerField(blank=False,null=False) 
running_time_consumed=models.SmallIntegerField(blank=False,null=False) 
dgunit_reading=models.DecimalField(max_digits=6, blank=True,decimal_places=2) 
perday_dgunit=models.DecimalField(max_digits=6, decimal_places=2) 
+0

你从哪里得到perday_dgunit? – catherine 2013-02-11 11:10:23

+0

我在我的应用程序中使用了highcharts,我想回答这个问题,但如果我发布它,它会很长。 – catherine 2013-02-11 13:14:06

+0

现在为我工作。我做了一个Ajax请求来获取数据并将json对象传递给jquery。无论如何感谢很多 – prithu 2013-02-11 13:21:25

当我需要这种行为,我经常编写一个过滤器,将我的Object或Queryset转换为json对象。

def jsonify(object): 
    if isinstance(object, QuerySet): 
     return serialize('json', object) 
    return simplejson.dumps(object) 

register.filter('jsonify', jsonify) 

<script id="json_data" type="text/javascript"> 
    {{ my_data|jsonify|safe }} 
</script>