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'] ...
随机推荐
- windows 中去除Ctrl+Alt+Del才能登录
安装windows 7后登录的时候有一样很麻烦的步骤是需要先按Ctrl+Alt+Del,才能输入用户密码进行登录.这里笔者介绍一下如何取消这个东西. 点击“开始菜单”,点击“控制面板”. [管理工具] ...
- c/c++ string
string类的定义.操作. #include<iostream> #include<string> using namespace std; int main() { // ...
- java多线程wait notify join
wait notify 几个注意点: wait 与 notify/notifyAll 方法必须在同步代码块中使用,即要先对调用对象加锁. 当线程执行wait()时,会把当前的锁释放,然后让出CPU,进 ...
- JSP复习整理（一）表单
好久没更了,一周完成了SRDP,一周完成了课程设计,这一周就要好好回顾回顾Java Web的学习轨迹了. 用的eclipse Mars 一.表单 start.jsp <%@ page langu ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- apk反编译工具
反编译工具: apktool:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar:将apk反编译成Java源码(classes.dex转化成jar文件) jd-gui:查看APK中 ...
- myeclipse2015卸载、安装、破解全过程-----myeclipse2015
myeclipse2015安装以及破解步骤: 下载地址:myeclipse2015-->https://pan.baidu.com/s/1i4RFCBb 密码:qxsu 破解文件地址--&g ...
- react开发环境搭建
---恢复内容开始--- 要想用react,需要安装: 1)babel-sublime: 作用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示. 安装步骤: ...
- 剑指Offer-【面试题07：两个栈实现队列】
package com.cxz.question7; import java.util.Stack; /** * 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail 和del ...
- centos配置虚拟主机
首先注释掉 DocumentRoot /var/www/html 然后添加如下代码至文件底部: NameVirtualHost 192.168.0.3 <virtualhos ...