document

http://iwantmyreal.name/blog/2012/09/16/visualising-conair-data-with-cubism-dot-js

https://hveem.no/vm-monitoring-using-salt-and-cubism

http://sciviz.info/time-series-visualization-using-cubism-js

http://square.github.io/cubism/

api

https://github.com/square/cubism/wiki

example

<script>

function random(name) {

  var value = 0,

      values = [],

      i = 0,

      last;

  /* 支持cube, graphite内建方法, 也可以使用context.metric()方法构造新的数据源。

     context.metric()有一个request函数参数, 还有一个可选的name参数。start & stop是日期类型，step单位ms。

     callback有2个参数，第1参数用于node.js，第2参数是数值形数组 */

  return context.metric(function(start, stop, step, callback) {

    start = +start, stop = +stop;

    if (isNaN(last)) last = start;

    while (last < stop) {

      last += step;

      value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2)));

      values.push(value);

    }

    callback(null, values = values.slice((start - stop) / step));

  }, name);

}

var context = cubism.context()

    .serverDelay(0) // 服务器延时

    .clientDelay(0) // 客户端延时

    .step(1e3)  // 步进1e3（1000ms）, cubism的时间单位是ms

    .size(960); // 960 * 1s, 时间轴是16分钟

var foo = random("foo"),

    bar = random("bar");

// example1

d3.select("#example1").call(function(div) {

  div.append("div")

      .attr("class", "axis")

      .call(context.axis().orient("top"));

  div.selectAll(".horizon")

      .data([foo, bar, foo.add(bar), foo.subtract(bar)])

    .enter().append("div")

      .attr("class", "horizon")

      .call(context.horizon().extent([-20, 20]));

  div.append("div")

      .attr("class", "rule")

      .call(context.rule());

});

// example2a

d3.select("#example2a").call(function(div) {

  div.datum(foo);

  div.append("div")

      .attr("class", "horizon")

      .call(context.horizon()

        .height(120)

        .mode("mirror")

        .colors(["#bdd7e7","#bae4b3"])

        .title("Area (120px)")

        .extent([-10, 10]));

  div.append("div")

      .attr("class", "horizon")

      .call(context.horizon()

        .height(30)

        .mode("mirror")

        .colors(["#bdd7e7","#bae4b3"])

        .title("Area (30px)")

        .extent([-10, 10]));

});

// example2b

d3.select("#example2b").call(function(div) {

  div.datum(foo);

  div.append("div")

      .attr("class", "horizon")

      .call(context.horizon()

        .height(120)

        .colors(["#bdd7e7","#bae4b3"])

        .title("Horizon, 1-band (120px)")

        .extent([-10, 10]));

  div.append("div")

      .attr("class", "horizon")

      .call(context.horizon()

        .height(60)

        .colors(["#6baed6","#bdd7e7","#bae4b3","#74c476"])

        .title("Horizon, 2-band (60px)")

        .extent([-10, 10]));

  div.append("div")

      .attr("class", "horizon")

      .call(context.horizon()

        .height(40)

        .colors(["#3182bd","#6baed6","#bdd7e7","#bae4b3","#74c476","#31a354"])

        .title("Horizon, 3-band (40px)")

        .extent([-10, 10]));

  div.append("div")

      .attr("class", "horizon")

      .call(context.horizon()

        .height(30)

        .colors(["#08519c","#3182bd","#6baed6","#bdd7e7","#bae4b3","#74c476","#31a354","#006d2c"])

        .title("Horizon, 4-band (30px)")

        .extent([-10, 10]));

});

// On mousemove, reposition the chart values to match the rule.

context.on("focus", function(i) {

  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");

});

我的程序

<html>

  <head>

    <title>dashboard</title>

    <script src="{{ url_for('static', filename='js/d3.min.js') }}"></script>

    <script src="{{ url_for('static', filename='js/cubism.v1.min.js') }}"></script>

    <script src="{{ url_for('static', filename='js/jquery-1.11.3.min.js') }}"></script>

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">

  </head>

  <body>

      <div id="cubism"></div>

  </body>

<script type="text/javascript">

function analysis(name, cname, bandwidth, interface, threshold, measure) {

  var label = ((measure.split('_')[1] == 'rx') ? 'In' : 'Out') + ' ' +cname;

  var result = context.metric(function(start, stop, step, callback) {

    $.ajax({

      type: 'GET',

      url: '/api',

      data: {

        'name': name,

        'interface': interface,

        'measure': measure,

        'start': start.toISOString(),

        'stop': stop.toISOString()

      },

      dataType: 'json',

      success: function(data) {

        callback(null, data);

        //console.log(data);

      },

    });

    }, label);

  return result;

}

var seconds = 60;

var default_colors = ['#08519c', '#3182bd', '#6baed6', '#bdd7e7', '#bae4b3', '#74c476', '#31a354', '#006d2c'];

var custom_colors = ['#ffcc99', '#ff9999', '#ffcc00', '#ff6666'];

//default_colors = custom_colors;

var context = cubism.context()

    .serverDelay(seconds*1000)

    .step(seconds*1000)

    .size(60*16);

var dataset = [];

{% for switch in switches %}

  var info = ['{{ switch.name }}', '{{ switch.cname }}', '{{ switch.bandwidth }}', '{{ switch.interface }}', '{{ switch.threshold }}'];

  var traffic_in = analysis(info[0], info[1], info[2], info[3], info[4], 'snmp_rx'),

      traffic_out = analysis(info[0], info[1], info[2], info[3], info[4], 'snmp_tx');

  dataset.push(traffic_in, traffic_out);

{% endfor %}

d3.select("#cubism").call(function(div) {

    div.append("div")

      .attr("class", "axis")

      .call(context.axis()

        .tickFormat(d3.time.format("%H:%M"))

        .ticks(d3.time.minutes, 60)

        .orient("top"));

    div.selectAll(".horizon")

      .data(dataset)

      .enter().append("div")

      .attr("class", "horizon")

      .call(context.horizon()

        .height(30)

        .colors(default_colors)

        .format(d3.format('.2f')));

  div.append("div")

    .attr("class", "rule")

    .call(context.rule());

});

context.on("focus", function(i) {

  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");

});

</script>

</html>


#!/usr/bin/env python

# -*- encoding: utf-8 -*-

import json

import yaml

from flask import Flask, render_template, request, url_for

from influxdb import InfluxDBClient

app = Flask(__name__)

client = InfluxDBClient(host='10.10.32.109', port=8086, username='root', password='root', database='collectd')

@app.route('/', methods=['GET'])

def index():

    file = 'switch.yaml'

    with open(file) as f:

        switches = yaml.load(f)

    return render_template('dashboard.html', switches=switches)

@app.route('/cubism', methods=['GET'])

def cubism():

    return render_template('cubism.html')

@app.route('/api', methods=['GET'])

def api():

    host, interface, measure, start, stop = \

        request.args['name'], request.args['interface'], request.args['measure'], \

        request.args['start'], request.args['stop']

    file = 'dashboard.yaml'

    query = 'select derivative(value)*8/1000/1000 from '+ measure \

        + ' where host=\'' + host + '\' and type_instance=\'' + interface \

        + '\' and time > \'' + start \

        + '\' and time < \'' + stop +'\''

    print query

    result = client.query(query)

    return json.dumps([value[1] for value in result.raw['series'][0]['values'] ])

if __name__ == '__main__':

    app.run(host='0.0.0.0', debug=True)

# influxdb的sql可能有bug，按时间段取值，结果会丢失第1个值

# curl http://127.0.0.1:5000/api?name=bjtn&measure=traffic_out&start=2015-07-28T08:10:00Z&stop=2015-07-28T08:50:59Z

时序js插件cubism使用的更多相关文章

  1. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

  2. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  3. 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)

    参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...

  4. chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

    chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...

  5. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  6. Intense Images – 全屏浏览图像的 JS 插件

    Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...

  7. 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  8. 代码规范和常用的js插件以及测试工具

    1.代码规范 .model层 1.1.1database file_proerty 1.1.2java fileProperty. 1.2.字段要有空指针 1.3.不创建爱数据库外键约束 1.4.已知 ...

  9. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

随机推荐

  1. Windows 7,无法访问internet,DNS无响应

    我电脑网络连接显示有internet访问,但是网页打不开,QQ上不了,但可以PING通谷歌DNS 8.8.8.8,一PING域名就无法解析. 解决方法:开始-运行-输入"netsh wins ...

  2. sqlalchemy字段与mysql数据库字段对应问题

    字段类型是在定义模型时, 对每个 Column 的类型约定. 不同类型的字段类型在输入输出上, 及支持的操作方面, 有所区别. 这里只介绍 sqlalchemy.types.* 中的类型, SQL 标 ...

  3. C#判断字符串是否是数字最简单的正则表达式

    if (theStr!= null)//注意加非空判断,否则报错 { System.Text.RegularExpressions.Regex rex = new System.Text.Regula ...

  4. 洛谷P1772 [ZJOI2006]物流运输

    P1772 [ZJOI2006]物流运输 题目描述 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线 ...

  5. django进阶之缓存

    Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...

  6. EOS区块同步源码分析之见证者

    调了两天,终于把EOS的出块和DPOS共识机制的代码看了个大概,下面做个小总结.因为这一块是EOS比较核心的代码块,稍微复杂些,如果有理解错误之处,请大家见识并帮我指出来,我也会有可能随时改写这里的内 ...

  7. Boost多线程

    一.概述     线程是在同一程序同一时间内允许执行不同函数的离散处理队列,这使得在一个长时间进行某种特殊运算的函数在执行时不阻碍其他的函数时变得十分重要.线程实际上允许同时执行两种函数,而这两者不必 ...

  8. $each 遍历json字符串

    $.each遍历json对象   查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1",&qu ...

  9. 在Maven父项目下创建子项目

    第一步:在父项目上右击,选择NEW 第二步:选择Maven下的Maven Module  ------Next 第三步,Next 第四步点击Advanced-----Name template选择如下 ...

  10. ACM-ICPC 2018 南京赛区网络预赛 Lpl and Energy-saving Lamps （线段树：无序数组找到第一个小于val）

    题意:n个房间,每个房间有ai盏旧灯,每个月可以买m盏新灯,要求:按房间顺序换灯,如果剩下的新灯数目大于ai,那么进行更换,否则跳过该房间,判断下一个房间.如果所有房间都换完灯,那么久不会再买新灯. ...