zoukankan      html  css  js  c++  java
  • 用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了

  • 相关阅读:
    ddd
    对Map按key和value分别排序
    两端通信
    WinDBG调试.NET程序示例
    FAQ:仓储实现为什么在基础设施层?
    Please Send Me a Card
    Web API 入门指南
    Node.js
    聊天工具mychat
    C语言面试问答5
  • 原文地址:https://www.cnblogs.com/4admin2root/p/2673735.html
Copyright © 2011-2022 走看看