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'] ...

随机推荐

第18讲——ActiveX控件
1,容器应用程序是可以嵌入或链接对象的应用程序.服务器应用程序是创建对象并且当对象被双击时,可以被启动的应用程序. 2,可以安装一个TstCon32来测试ActiveX控件 3,可以用 Invalid ...
mysql安装时到最后start service时就不响应了的解决方法
多功能弹窗控件layer
开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等这里会推荐几个常用的js插件,丰富多样简单易移 ...
【Django】--基础知识
一什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. Web应 ...
CrashMonkey4IOS App测试
下载地址:https://github.com/vigossjjj/CrashMonkey4IOS 根据下载地址里面的说明安装一下,以下进行配置 1.进入CrashMonkey4IOS-master/ ...
第一次使用UML的感觉
刚开始接触的时候,其实我内心是拒绝的,因为感觉这种软件之前接触过,觉得就是相当于思维导图那种的. 可当自己使用的时候,觉得大纲总体上是类似是规划方向的,可是细节却让人深思,用什么图标,特别是用什么线, ...
tp框架之验证码
控制器 function yzm() { /*$config = array( 'fontSize' => 30, // 验证码字体大小 'length' => 4, // 验证码位数 ' ...
python map()
map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明,比如我们有一个函数f(x)=x%2,要把这个函数作用在一个li ...
linux环境中使用转义字符使命令行字符颜色高亮
而通过转义序列设置终端显示属性的格式为: \033[Param {;Param;...}m 其中转义序列以 \033[ 为开头,m 为设置属性结束,中间部分的 Param 为属性值,{} 表示可以设置 ...
JS根据经纬度获取地址信息
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

highchart 添加新的series

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

随机推荐

热门专题