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

随机推荐

sharepoint关键位置
GAC:C:\Windows\assembly,也就是部署的位置: ISAPI位置,SharePoint API:C:\Program Files\Common Files\microsoft sha ...
JHChart iOS图表工具库1.0.3新版本详解
前言. 从2016年4月14日开始,本人着手开发了JHChart图表工具库.经过断断续续的开发,截止到现在,已经实现了折线图.柱状图.饼状图.环形图和表格样式的图表功能.为了方便使用,我已经将一个简单 ...
JAVA的模式对话框和非模式对话框
周末的时候,一位网友让我帮他把他的无模式对话框改成有模式对话框. 界面是由swing制作的,都是JFrame,我从来没有接触过swing编程.大致的代码还是看的懂,很多都和C#很相似. 然后就去查资料 ...
WPF之Binding初探
初学wpf,经常被Binding搞晕,以下记录写Binding的基础. 首先,盗用张图.这图形象的说明了Binding的机理. 对于Binding,意思是数据绑定,基本用法是: 1.在xmal中使用 ...
记一次proc_open没有开启心得感悟
引言: 今天在部署服务器的时候,使用composer来安装依赖.遇到了 The Process class relies on proc_open, which is not available on ...
HTML学习笔记--HTML的语法【1】
1.什么是HTML标记语言? HTML是表示网页信息的符号标记语言. 2.HTML的标记和他的属性 HTML文档的保存格式:.html..htm..xhtml 标记和被标记的内容构建出HTML文档.格 ...
【React】Stateless Function
React创建组件的时候,有3种写法: // 1. 传统写法 const App = React.createClass({}); // 2. es6 的写法 class App extends Re ...
【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】
之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计实现统计图显示的流 ...
Js（DOM）和Jq 对象的相互转换
JQuery 对象不能使用DOM对象中的方法,同样,Dom对象不能使用JQuery 中的方法,但有时候 ,我们不得不使用JQuery的方法或者 Dom对象的方法,该怎么办呢? 下面介绍一下 jq对象 ...
HashMap源码阅读笔记（基于jdk1.8）
1.HashMap概述: HashMap是基于Map接口的一个非同步实现,此实现提供key-value形式的数据映射,支持null值. HashMap的常量和重要变量如下: DEFAULT_INITI ...

highchart 添加新的series

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

随机推荐

热门专题