highchart 添加新的series

code：

 <!DOCTYPE HTML>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>流量统计</title>

     <script type="text/javascript" src="/ads/static/js/jquery-1.7.1.min.js"></script>

     <!--script type="text/javascript" src="./statics/js/bootstrap.min.js"></script>

      <script type="text/javascript" src="./statics/js/bootstrap-datetimepicker.js"></script>

      <script type="text/javascript" src="./statics/js/bootstrap-datetimepicker.zh-CN.js"></script>

      <script type="text/javascript" src='./statics/js/jquery.custom.js' type="text/javascript"></script>

     <script type="text/javascript" src='./statics/js/jquery.cookie.js' type="text/javascript"></script>

     <script type="text/javascript" src='./statics/js/jquery.dynatree.js' type="text/javascript"></script>

     <script type="text/javascript" src="./statics/js/ajaxProgressUpload.js"></script>

     <script type="text/javascript" src='/statics/js/uploadfile.js' type="text/javascript"></script>

     <script type="text/javascript" src='/statics/js/jquery.pagination.js' type="text/javascript"></script-->

     <script type="text/javascript" src="/ads/static/highcharts/highcharts.js"></script>

     <script type="text/javascript" src="/ads/static/highcharts/highcharts-3d.js"></script>

     <script type="text/javascript" src="/ads/static/highcharts/modules/exporting.js"></script>

     <script type="text/javascript">

     var g_submitInfo = null;

     var g_TrafficChart = null;

     $(function (){

         g_submitInfo = null;

         g_TrafficChart = null;

         $(document).ready(function()

         {

             Highcharts.setOptions({

                 global:{

                     useUTC: false

                 }

             });

             g_TrafficChart = new Highcharts.Chart({

                 chart: {

                     renderTo: 'container',//renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的DIV元素

                 type: 'line',

                 animation: Highcharts.svg,

                 //marginRight: 10,

                 events: {

                        load: function() {

                     }

                  }

              },

                 title:{

                     text:'设备流量统计图'

                 },

                 xAxis:{

                     type: 'datetime',

                     //dateTimeLabelFormats: {

                     //    minute: '%H:%M'

                      //},

                     tickPixelInterval: 120

                 },

                 yAxis:{

                     title:{

                         text: 'bps',

                         style: {

                             color: '#3E576F'

                         }

                     }

                 },

                 exporting: {                    //说明：导出及打印选项,打印导出功能的配置项

                     enabled: false

                 },

                 tooltip:{

                     //valueSuffix: 'Mbps',

                     formatter: function(){

                         return ''+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ this.series.name + ':' + Highcharts.numberFormat(this.y, 2) + 'bps';

                     }

                 },

                 legend:{                                //图例框参数配置项的使用

                     layout: 'vertical',            //图例的布局方式。可选项为"horizontal"(水平) 或者 "vertical"(垂直)

                     align: 'right',                    //图例的水平对齐方式，可选项为"right"、"center"和"left"

                     verticalAlign: 'middle',//图例的垂直对齐方式。可选项为"top", "middle" 或者 "bottom"

                     borderWidth: 0                //图例的边框宽度。

                 },

               credits: {

                  enabled: false

                }

             });

             g_TrafficChart.addSeries({

                   id:2,

                   name: "beijing",

                   data: (function() {

                     // generate an array of random data

                     var data = [],

                       time = (new Date()).getTime(),

                         i;

                     for (i = -14; i <= 0; i++) {

                         data.push({

                             x: time + i * 1000*60*5,

                             y: Math.random()*10

                         });

                     }

                     return data;

                 })()

                },false);

             g_TrafficChart.redraw();

             submitInfo();

         });

     });

     function ajaxobj(_url, _tag, _way, _form)

    {

       var m = (typeof(_way)  ==  "undefined" ? "GET" :_way );

       var par = (typeof(_form)  ==  "undefined" ? "" :$(_form).serialize());

       var info = "";

       $.ajax({

          type:m,

          url:_url,

          data:par,

          async: false,

          error: function(request) {

             //alert("Connection error");

          },

          success: function(data) {

             //$(_tag).html(data);

             //alert(data);

                  info = data;

          }

       });

         return info;

    }

    function postInfo()

    {

            var order = -1;

            var interval = -1;

            var startTime = null;

            var endTime = null;

    }

        function getSubmitInfo()

        {

            g_submitInfo = new     postInfo();

            g_submitInfo.    order = $("#orderingBy")[0].value;

            g_submitInfo.    interval = $("#timeInterval")[0].value;

        }

        function updateTrafficChart(json)

        {

            if(json.length == 0) return false;

            for(var i = 0; i<json.length; i++)

            {

                traffic = json[i];

                host = traffic.ip;

                g_TrafficChart.addSeries({

                   id:1,

                   name: host,

                   data: (function(){

                       var data = [];

                       var node = traffic.data;

                       for(var j = node.length-1; j >= 0; j--)

                       {

                           xValue = new Date(node[j].time);

                           yValue = parseFloat(node[j].bps);

                           data.push({

                               x: xValue,

                               y: yValue

                           });

                       }

                       return data;

                   })()

                },false);

            }

            g_TrafficChart.redraw();

        }

     function submitInfo()

     {

         getSubmitInfo();

         $("#postData").attr("value", JSON.stringify(g_submitInfo));

         result =  ajaxobj("/statistical/getTraffic/", "", "post", "#InfoForm");

         alert(result);

         var json = $.parseJSON(result);

         updateTrafficChart(json);

     }

     </script>

 </head>

 <body>

     <form id="InfoForm" method='post'>

      {% csrf_token %}

         <input type='hidden' name="Info" value="{{data}}" id="postData" />

     </form>

     <div>

         <table>

             <tr>

                 <td>规则：</td>

                 <td>

                     <select id="orderingBy" name="orderingBy">

                         <option value="0" selected="selected">SourceIP</option>

                         <option value="1">DestinationIP</option>

                         <option value="2" >SourcePort</option>

                         <option value="3">DestinationPort</option>

                         <option value="4">Protocol</option>

                     </select>

                 </td>

                 <td>时长：</td>

                 <td>

                     <select id="timeInterval" name="timeInterval">

                         <option value="30" selected="selected">30分钟</option>

                         <option value="60" >1小时</option>

                         <option value="120">2小时</option>

                         <option value="240">4小时</option>

                         <option value="480">8小时</option>

                     </select>

                 </td>

                 <td>

                     <button id="updateRule" type="updateRule" title="submit" onclick="updateRule()" >

                         <span class=""></span>

                     </button>

                 </td>

             </tr>

         </table>

     </div>

     <!--margin:设置外边框距离(CSS)-->

     <div id="container" style="min-width:310px; height:350px; margin:0 auto"></div>

 </body>

 <html>

addSeries

说明：本HTML为显示主机流量统计，每次向后台获取信息后，讲总流量排名top n的主机流量显示在统计图中。因此在开始时不知道图中series的任何信息。需要在获取后台数据后再添加series数据。

addSeries说明
addSeries方法中第二个参数表示是否重绘图，false表示不刷新重绘，等所有的series添加完成后调用redraw()重绘
注意：
想series的data：[]中插入数据时需要按照X轴正方向的排序方式排序后，再将数据插入[]中。否则会导致箭头停留在曲线图的节点上时，显示的是其他点的数据，造成页面提示信息错误。本例中由于获取到的数据在数组中为由大到小排列，而x轴正方向是由小到大。所以需要将获取的数据从后向前读取，并插入series中，以保证serise：[]中的数据是由小到大排列。

highchart 添加新的series的更多相关文章

【译】Meteor 新手教程：在排行榜上添加新特性
原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...
【PostgreSQL】PostgreSQL添加新服务器连接时，报错“Server doesn't listen ”，已解决。
PostgreSQL添加新的服务器连接时,报错:
一个新人如何学习在大型系统中添加新功能和Debug
文章背景: 今年七月份正式入职,公司主营ERP软件,楼主所在的组主要负责二次开发,使用的语言是Java. 什么叫二次开发呢?ERP软件的客户都是企业.而这些企业之间的情况都有所不同,一套标准版本的企业 ...
ASP.NET MVC 5 - 给电影表和模型添加新字段
在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entit ...
Linux 使用fdisk添加新分区
Linux系统由于数据累计增长.前期存储规划不合理等诸多因素,出现存储不够用的情况时,此时就需要扩展逻辑分区或添加新的逻辑分区.下面介绍一下通过使用fdsik添加新的逻辑分区. 首先使用df命令检查文 ...
[译]：Orchard入门——给网站添加新博客
原文链接:Adding a Blog to Your Site 文章内容基于Orchard 1.8版本 Orchard提供一个博客引擎--这让添加一个新博客到你网站变得非常容易. 本文将介绍怎样添加一 ...
【tomcat ecplise】新下载一个tomcat,无法成功启动，或者启动了无法访问localhost:8080页面/ecplise无法添加新的tomcat/ecplise启动tomcat启动不起来
今天转头使用ecplise,于是新下载一个tomcat7来作为服务器使用但是问题来了: [问题1:全新的tomcat启动即消耗了不可思议的时间,并且启动了之前其他tomcat中的很多项目] [注意: ...
vmware 虚拟机中添加新网卡无配置文件
系统:centos 6/7 问题: 为虚拟机添加新网卡后,/etc/sysconfig/network-scripts/下无配置文件ifcfg-eth1 #ip addr //显示存在eth ...
Ecshop：后台添加新功能栏目以及管理权限设置
一.添加菜单项打开 /admin/includes/inc_menu.php文件(后台框架左边菜单),在最后添加一行如下: $modules['17_other_menu']['sns_list'] ...

随机推荐

Excel中VBA进行插入列、格式化、排序
在数据分析中经常需要对数据进行排序.排名,观察指标排名变化情况,手工处理的话不是太困难,但经常使用,还是编写宏比较方便. 宏命令比较简单,不多解释,只说一下注意事项: 1.有合并单元格,比如列.行合并 ...
./configure,make,make install的作用
这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或GCC ...
dreamweaver cs6 mac破解版
http://www.sdifenzhou.com/dreamweaver-cs6-mac.html
tp5 中 model 的修改器
修改器可以在数据赋值的时候自动进行转换处理 class User extends Model { public function setNameAttr($value){ return strtolo ...
Android-RelativeLayout（相对布局）、LinearLayout（线性布局）
RelativeLayout(相对布局):按照各子元素之间的位置关系完成布局. 定位:android:layout_above="@id/xxx" --将控件置于给定ID控件之上 ...
如何用qq代理发送邮件
今天我想写一篇服务器发送验证邮件的的文章,我查阅过其他博客里面写的文章,都是可以实现的,但是对于初学者来说是一个很痛苦的事情,很多代码看不懂,原因有多种,写的多,写的乱,然后就不想往下看了.我今天详细 ...
Android语录
1. application对象的生命周期是整个程序中最长的,它的生命周期就等于这个程序的生命周期.因为它是全局的单例的,所以在不同的Activity,Service中获得的对象都是同一个对象.因此在 ...
angular1.x的简单介绍(二)
首先还是要强调一下DI,DI(Denpendency Injection)伸手获得,主要解决模块间的耦合关系.那么模块是又什么组成的呢?在我看来,模块的最小单位是类,多个类的组合就是模块.关于在根模块 ...
六个漂亮的 ES6 技巧
六个漂亮的 ES6 技巧转载原文:2ality 译文:众成翻译链接:http://www.zcfy.cc/article/346 在这篇文章里,我将演示 6 种 ES6 新特性的使用技巧.在每个 ...
进击的Python【第七章】：Python的高级应用（四）面向对象编程进阶
Python的高级应用(三)面向对象编程进阶本章学习要点: 面向对象高级语法部分静态方法.类方法.属性方法类的特殊方法反射异常处理 Socket开发基础一.面向对象高级语法部分静态方法 ...

highchart 添加新的series

highchart 添加新的series的更多相关文章

随机推荐

热门专题