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

随机推荐

socket泄露的问题
在增加keepalive和libevent 超时后,仍然会几个月后出现lsof统计句柄过多的问题,如下图,红线圈定的是不定期出现的错误关闭流,时间点和server端日志(只看到accpet fd,没有 ...
->code vs 1474 十进制转m进制
1474 十进制转m进制时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解查看运行结果题目描述 Description 将十进制数n转换成m进 ...
java 部分隐藏字段
项目中,很多时候要对数据作隐私保护,隐藏一些数据的关键信息,比如身份证,隐藏其中的出生年月 //利用正则表达式匹配替换字符串 String email = "young452wer@gami ...
EF jsonignore
页面单独指定不循环引用 [JsonIgnore] Newtonsoft.Json.JsonSerializerSettings jsSettings = new Newtonsoft.Json.Jso ...
【python】tarfile的路径问题
假设有路径/home/somebody/test1/test2/test3/ 该路径下有3个文件,a.txt, b.txt, c.txt 在目录/home/somebody下有如下代码,希望打包a.t ...
navicat 破解
首先上官网上下载LINUX版本: http://www.navicat.com/download 下载 navicat110_mysql_en.tar.gz 文件下载后解压tar文件 tar -zx ...
Ionic 常用插件
ionic扩展插件 1.ionic-timepicker 时间选择 https://github.com/rajeshwarpatlolla/ionic-timepicker 2.ionic-da ...
C#设计模式之建造者模式
建造者模式可以将部件本身和它们的组装过程分开,关注如何一步步创建一个包含多个组成部分的复杂对象,用户只需要指定复杂对象的类型即可得到该对象,而无须知道其内部的具体构造细节. 建造者模式:将一个复杂对象 ...
移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]
使用方法引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...
GCC编译过程
以下是C程序一般的编译过程: gcc的编译流程分为四个步骤,分别为:· 预处理(Pre-Processing) 对C语言进行预处理,生成*.i文件.· 编译(Compiling) 将上一步生成的*.i ...

highchart 添加新的series

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

随机推荐

热门专题