Pubnub和Cubism.js

Question

我正在使用pubnub来为我正在开发的仪表板供电。我的所有小工具是基于这样的代码：

Polymer({ 
    is: 'widget-horizon', 
    properties: { ... }, 
    ready: function() { 
     registerCallback(this.channel, function (data) { 

     }); 
    } 
}); 

然后当pubnub信道接收到消息时，回调被调用并且将数据传递。对于这个特殊的图表，数据看起来是这样的：

{ 
    "id": "RegResponseTimes", 
    "type": null, 
    "timestamp": "2016-10-14T11:12:13.2313043-05:00", 
    "data": [ 
     { 
      "label": "Metric1", 
      "Value": 0.05 
     }, 
     { 
      "label": "Metric2", 
      "Value": 0.17 
     } 
    ] 
} 

现在我试图开发基于cubism.js一个小部件，但所有的文档在提取数据，有针对性的更具体使用Cube或Graphite 。

我有很多麻烦将立体主义代码集成到我的回调中。我遇到了像“度量标准访问器”和“范围”这样的所有语言。

---

大量的试验和错误后，我种了一个价值的工作，但这里有我需要解决的问题：

1. 没有实际的图表，只是价值。
2. 我需要每个数据集的一个范围。

下面是它目前的样子：

而且下面是我完整的代码（这是一个聚合物组分）。 “随机”样本的主要变化包括：

1. 停止并启动上下文。我不确定在没有获取数据的情况下如何防止它被勾选。

2. 而不是推动一个随机数，推其中一个值作为一个POC。

   </style> 
       <strong id="widgetName">{{name}}</strong> 
       <div id="chart1"></div> 
   </template> 
   <script> 
   
       var data = []; 
   
       Polymer({ 
        is: 'widget-horizon', 
        properties: { 
         dataid: { 
          type: String 
         }, 
         name: { 
          type: String 
         }, 
         gethistory: { 
          type: Number 
         }, 
         testvalue: { 
          type: Number 
         }, 
         isloading: { 
          type: Boolean, 
          value: true 
         } 
        }, 
        ready: function() { 
         var self = this; 
         subscribe(self.dataid); 
         getHistory(self.dataid,self.gethistory); 
         registerCallback(this.dataid, function (data) { 
          context.start(); 
          var y = data.data[0]; 
          self.testvalue = y.Value; 
          self.isloading = false; 
         }); 
   
         var context = cubism.context() 
           .serverDelay(0) 
           .clientDelay(0) 
           .step(1e4) 
           .size(600); 
         var foo = setval("foo"); 
   
         var chart = self.$$('#chart1'); 
         d3.select(chart).call(function(div) { 
          div.append("div") 
            .attr("class", "axis") 
            .call(context.axis().orient("top")); 
          div.selectAll(".horizon") 
            .data([foo]) 
            .enter().append("div") 
            .attr("class", "horizon") 
            .call(context.horizon().extent([0, 120])); 
          div.append("div") 
            .attr("class", "rule") 
            .call(context.rule()); 
   
         }); 
   
   
         function setval(name) { 
          var value = 0, 
            values = [], 
            last; 
          return context.metric(function(start, stop, step, callback) { 
           start = +start, stop = +stop; 
           if (isNaN(last)) last = start; 
           while (last < stop) { 
            last += step; 
            value = self.testvalue; 
            if (value != "") { 
             values.push(self.testvalue); 
             context.stop(); 
            } 
           } 
           callback(null, values = values.slice((start - stop)/step)); 
          }, name); 
         } 
   
         context.on("focus", function(i) { 
          d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px"); 
         }); 
        } 
       }); 
   </script> 
   

Answer 1

我明白了。这里是我的全部回调：

registerCallback(this.dataid, function (data) { 
    if (self.isloading) { 
     for (var i = 0; i < data.data.length; i++){ 
      datas[i] = setval(data.data[i].MessageBodyClassName); 
     } 

     d3.select(chart).call(function(div) { 
      div.append("div") 
        .attr("class", "axis") 
        .call(context.axis().orient("top")); 
      div.selectAll(".horizon") 
        .data(datas) 
        .enter().append("div") 
        .attr("class", "horizon") 
        .call(context.horizon().extent([0, 120])); 
      div.append("div") 
        .attr("class", "rule") 
        .call(context.rule()); 

     }); 
    } else { 
     for (var i = 0; i < data.data.length; i++){ 
      vals[data.data[i].MessageBodyClassName] = data.data[i].Value; 
     } 
    } 
    context.start(); 
    self.isloading = false; 
}); 

这里是转换random功能：

function setval(name) { 
    var value = 0, 
      values = [], 
      last; 
    return context.metric(function(start, stop, step, callback) { 
     start = +start, stop = +stop; 
     if (isNaN(last)) last = start; 
     while (last < stop) { 
      last += step; 
      value = self.testvalue; 
      if (value != "") { 
       values.push(vals[name]); 
       context.stop(); 
      } 
     } 
     callback(null, values = values.slice((start - stop)/step)); 
    }, name); 
} 

基本上我只是定义的全局vals阵列，我用它来存储新值pubnub更新时并使用度量标准访问器更新值...我想。