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

随机推荐

go：channel（未完）
注:1)以下的所有讨论建立在包含整形元素的通道类型之上,即 chan int 2)对于“<-”我的理解是,它可能是一个操作符(接收操作符),也可能是类型的一部分(如“chan<- in ...
JSP复习整理（五）JavaBean使用表单处理数据
一.先建立用户输入的数据 usingGetparameter.html <!DOCTYPE html> <html> <head> <meta charset ...
添加OSG各种事件处理器
// add the state manipulator viewer.addEventHandler( new osgGA::StateSetManipulator(viewer.getCamera ...
[Android] charles高级使用总结
reference to : http://blog.csdn.net/a910626/article/details/52823981 charles高级使用总结网速模拟点击菜单“Proxy→T ...
C++开始前篇，深入编译链接（3）
一,COMMON块什么是COMMON块,这是一种机制,早期的Fortran没有动态分配空间的机制,程序员必须事先声明它所需要的临时使用空间的大小.Fortran把这种空间叫做COMMON块,当不同的 ...
libsvm数据处理初略流程
两种方式testng dataprovider结合csv做测试驱动
方式一: 第一.读取csv数据源码 import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream ...
Python中的网络编程
TCPServer端: __author__ = 'Nature' # -*- coding: utf-8 -*- from socket import * from time import ctim ...
python enumerate用法
含义:"枚举,列举" 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enumerate将其组成一个索引序列,利用它可以同时获得索引和值 enumerate多 ...
Datazen图表创建和发布
Datazen是被微软收购的移动端全平台的数据展现解决方案.此篇主要介绍如何创建和发布图表. 如前面介绍,Datazen图表的创建和发布是通过Publisher的应用,它是Windows 8应用商店下 ...

highchart 添加新的series

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

随机推荐

热门专题