क्या cubism.js + WebSocket के लिए कोई ट्यूटोरियल या उदाहरण हैं?

Question

क्या वेबसाकेट (या अन्य गैर-मतदान डेटा स्रोत) और cubism.js को जोड़ने के बारे में विशेष रूप से कोई ट्यूटोरियल है?

विशेष रूप से, मैं सर्वर से डेटा स्ट्रीमिंग का वास्तविक समय ग्राफ बनाने में सक्षम होना चाहता हूं, उदाहरण के लिए cubism page पर उदाहरण के समान।

संदर्भ: - https://github.com/square/cubism/issues/5 - http://xaranke.github.io/articles/cubism-intro/ - Using Other Data Sources for cubism.js

Answer 1

यहाँ कुछ मैं के साथ कर रही हूँ। यह आधिकारिक नहीं है लेकिन यह काम करता प्रतीत होता है: https://gist.github.com/cuadue/6427101

जब वेबसाकेट से डेटा आता है, तो इसे एक बफर में डाल दें। कॉलबैक को पंप करें (मैं उन लोगों को समझाऊंगा), बफर को तर्क के रूप में भेजना। "सफलता" या "अधिक डेटा के लिए प्रतीक्षा करें" के लिए रिटर्न कोड देखें। सफलता का मतलब है कि डेटा क्यूबिज्म को भेजा गया था और हम इस कॉलबैक को हटा सकते हैं।

जब क्यूबिज्म डेटा के फ्रेम का अनुरोध करता है, तो एक कॉलबैक सेट करें जो जांचता है कि आखिरी बिंदु क्यूबिज्म के बाद बफर में अंतिम बिंदु है या नहीं। अन्यथा, अधिक डेटा के लिए प्रतीक्षा करें।

यदि अनुरोधित फ्रेम के स्टॉप को कवर करने के लिए डेटा है, तो हम इस अनुरोध को पूरा करेंगे। इतिहास के अनुरोध के लिए एपीआई के बिना, हमें अतीत में डेटा छोड़ना होगा।

फिर, बस बफर को क्यूबिज्म चरण आकार पर विभाजित करें।

ऐसा लगता है कि कई बार एक ही बिंदु से डेटा क्यूबिज्म अनुरोध डेटा की तरह लगता है, इसलिए यह आपके ऊपर है कि आप अपने बफर को कैसे छीन लें। मुझे नहीं लगता कि अनुरोधित प्रारंभ समय से पहले सभी डेटा को छोड़ना सुरक्षित है।

• WebSocket एक realTimeData सरणी
• क्यूबिज्म कुछ वेब सेवाओं से प्रारंभिक लाने करता भरें, फिर realTimeData सरणी

 

    var firstTime = true; 
    context.metric(function(start, stop, step, callback) { 
     if (firstTime) { 
     firstTime = false; 
     d3.json("... { 
      var historicalData = []; 
      callback(null, historicalData); 
     } 
     } else { 
     callback(null, realTimeData); 
     } 
 

से खींच:

Answer 2

मैं एक त्वरित और गंदा हैक किया था ध्यान दें कि cubism.js प्रति अंक 6 अंक (cubism_metricOverlap) की अपेक्षा करता है, इसलिए वास्तविक बिंदु में 6 अंक रखना सुनिश्चित करें