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'] ...
随机推荐
- centos6安装php5.4以上版本
1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 yum remove php.x86_64 php-cli.x86_64 p ...
- 移居 GitHub
博客很久没能更新了,很多代码也从博客园逐渐转移到 GitHub,欢迎新老用户光顾: https://github.com/kedebug 个人博客:http://kedebug.me/
- 【svn】SSL error: A TLS warning alert has been received的解决方法
第一次用svn(>_<),结果在运行下面语句时,svn很不友好的报错了..... svn co http:10.11.12.13/test1/test2 . 报错信息: svn: OPTI ...
- STL heap usage
简介 heap有查找时间复杂度O(1),查找.插入.删除时间复杂度为O(logN)的特性,STL中heap相关的操作如下: make_heap() push_heap() pop_heap() sor ...
- Erlang--etc结构解析
Erlang中可以用List表达集合数据,但是如果数据量特别大的话在List中访问元素就会变慢了;这种主要是由于List的绝大部分操作都是基于遍历完成的. Erlang的设计目标是软实时(参考:htt ...
- kettle系列-我的开源kettle管理平台[kettle-manager]介绍
kettle管理工具 专门为kettle这款优秀的ETL工具开发的web端管理工具. 项目简介 kettle作为非常优秀的开源ETL工具得到了非常广泛的使用,一般的使用的都是使用客户端操作管理,但问题 ...
- 当攻击者熟读兵法，Camouflage病毒实战演示暗度陈仓之计
"明修栈道,暗度陈仓"的典故许多人都听说过,该典故出自楚汉争霸时期,刘邦意图进入关中,需要攻下关中咽喉之地--陈仓.韩信献出一计:表面上浩浩荡荡地修复通往陈仓的栈道以迷惑陈仓守将, ...
- 微信小程序资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权. 1:下载开发者工具 ...
- 关于P,V操作理解的突破，关于并发设计与并行
今天又找了一篇博客研究P,V操作.. 发现..它有一个变量没有声明.. 我就换了篇博客..http://c.biancheng.net/cpp/html/2600.html 然后就看懂了.. 关键突破 ...
- 一些VS2013的使用技巧
作者:h46incon的Blog 1. Peek View 可以在不新建TAB的情况下快速查看.编辑一个函数的代码. 用法:在光标移至某个函数下,按下alt+F12. 然后在Peek窗口里可以继续按a ...