用highcharts做动态趋势图 (django,jquery)

用highcharts做动态趋势图 (django,jquery)

highcharts官方有个动态图的demo
(Spline updating each second)
http://www.highcharts.com/demo/dynamic-update

觉得效果不错,作为维护工作用的监控很合适

于是进行丰富(以下代码仅作参考,未考虑异常和安全)
==============================
1、后台返回y值

使用django框架

from  mainapp.models import mymodel


def dynamic_update(request):
 dy_data = mymodel.objects.filter(xxx='111')
 dy_id = dy_data.aggregate(Max('id'))
 dy_max_data = mymodel.objects.filter(id=dy_id['id__max'])
 html = ''
 json_serializer = serializers.get_serializer("json")()
 html += json_serializer.serialize(dy_max_data)
 return HttpResponse(html,mimetype="text/json")

可以先用浏览器测试下

2、在动态图demo的脚本中增加一个函数


 function getAjaxvalue()  
 {
          var y = 0;
   $.ajax({
      type:"GET",
      async:false,
  url:"/dynamic_update/",
  datatype:"json",
      success:function(result){
  $.each(result,function(idx,item){
                     y = item.fields['value']    
                       });
  } 
   });
  return y;
 }

 3、修改原来demo中的y赋值语句
   y = Number(getAjaxvalue())


打开浏览器看看吧

后面还需要修改间隔时间
还有 就是 初始化的20条 随机数 我简单设置为0了

posted @ 2012-09-06 16:38  4admin2root  阅读(1500)  评论(0编辑  收藏  举报