हाईस्टॉक डायनेमिक चार्ट

नमस्ते मैं रूस में एक प्रमुख नृत्य ऑनलाइन रेडियो स्टेशनों में से एक का प्रतिनिधित्व करता हूं - फ्रेशबीट रेडियो ।

हम, इंटरनेट रेडियो की तरह, एफएम प्रसारण पर एक बड़ा फायदा है। श्रोताओं की संख्या, उनके स्थान, अवधि और सुनने की आवृत्ति का पता लगाने के लिए हमें महंगे बाजार अनुसंधान करने की आवश्यकता नहीं है।

हमारे पास लगातार बड़ी मात्रा में सांख्यिकीय डेटा तक पहुंच है जिसका उपयोग हमारे लक्षित दर्शकों को आगे बढ़ाने के लिए किया जा सकता है। छात्रों पर डेटा का विश्लेषण करने से पहले, उन्हें एकत्र करने और व्यवस्थित करने की आवश्यकता है ताकि उनके साथ काम करना सुविधाजनक हो।

इस लेख में, मैं आपको हाईस्टॉक का उपयोग करके समय-समय पर कल्पना और अद्यतन करने के बारे में बताऊंगा। इस उपकरण के सेट के बारे में हबराब्र पर पहले से ही कई लेख थे, लेकिन उनमें से सभी ने केवल स्थैतिक डेटा के साथ काम करने का वर्णन किया है।

डेटा संग्रह

हमारे मामले में, सभी आवश्यक जानकारी एक php स्क्रिप्ट द्वारा संसाधित होती है जो सभी आवश्यक डेटा के साथ मानक icecast पेज को पार्स करती है और मूल्यों की एक सरणी बनाती है (प्रत्येक ऑडियो स्ट्रीम के लिए आपको श्रोताओं की संख्या प्राप्त करने की आवश्यकता होती है)।

क्योंकि हम केवल वाई अक्ष के साथ मूल्य में रुचि रखते हैं, हमने सबसे सरल सरल प्रारूप चुना है जो हाईस्टॉक स्वीकार करता है। एक गतिशील ग्राफ के लिए, X का मान संचारित करना व्यर्थ है, क्योंकि हम वर्तमान समय का उपयोग नए बिंदु के लिए मान के रूप में करते हैं।
Php स्क्रिप्ट के आउटपुट में, हमें JSON फॉर्मेट में डेटा मिलता है:

[214,2,13,2,35,0,0,65,97] 

डेटा पुनर्प्राप्ति

पृष्ठ लोड करने के तुरंत बाद, आपको डेटा प्राप्त करने और शेड्यूल सेट करने की आवश्यकता है। हम अजाक्स अनुरोध भेजते हैं, एक कॉलबैक फ़ंक्शन में हम प्रत्येक स्ट्रीम के लिए अंक (ग्राफ़) की एक श्रृंखला बनाते हैं। हम उनमें से प्रत्येक को पहले बिंदु से भरते हैं, और सभी चार्ट को छिपाते हैं, सामान्य एक (सभी प्रवाह का योग) को छोड़कर। X के मान के रूप में, यूनिक्स टाइमस्टैम्प प्रारूप में वर्तमान समय सेट करें।

 var seriesOptions=[], data=[], chart; $(function() { $.getJSON('protected/live_values.php', function(lst) { time = (new Date()).getTime()+14400000; //  (utc+4) //  data.push({x:time, y:lst[0]}); seriesOptions[0] = { name: '/all', data: data }; data=[]; //  ,   for (i=1; i<9; i++) { data.push({x:time, y:lst[i]}); seriesOptions[i] = { name: 'series '+i, data: data, visible: false }; data=[]; }; createChart(); }); }); 

प्लॉटिंग

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

 function createChart() { chart = new Highcharts.StockChart({ series: seriesOptions, //   title: {text: 'Live Statistics Viewer v0.8'}, //     30  xAxis: {maxZoom: 30000}, //   plotOptions: {line: {step: true}}, 

जब आप ग्राफ़ पर किसी बिंदु पर होवर करते हैं तो हम संकेत का रूप बनाते हैं। हम समय और श्रोताओं की संख्या को छोड़कर सब कुछ छिपाते हैं। हम पाठ को थोड़ा बढ़ाते हैं।

 tooltip: { yDecimals: 0, xDateFormat: '%H:%M:%S', headerFormat: '<span style="font-size: 12px">{point.key}</span>', pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' }, 

हम ग्राफ वृद्धि चयनकर्ता को भी प्रारूपित करते हैं। हमें वर्षों और महीनों की आवश्यकता नहीं है, हम केवल 3 अवधियों को छोड़ देते हैं, अधिकतम - 15 मिनट।

 rangeSelector: { buttons: [ {type: 'minute', count: 1, text: '1m'}, {type: 'minute', count: 5, text: '5m'}, {type: 'minute', count: 15, text: '15m'}, {type: 'all', text: 'All'} ], selected: 0 }, 

शेड्यूल को स्विच करने के लिए, आपको एक किंवदंती की आवश्यकता है। सेटिंग्स में हम तत्वों के बीच स्थिति, अभिविन्यास और इंडेंटेशन का संकेत देते हैं।

 legend: { enabled: true, layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 60, itemStyle: {padding: '10px'} }, 

हाईस्टॉक में चित्र या प्रिंट ग्राफिक्स को निर्यात करने की क्षमता है। केवल प्रिंट करें और png को निर्यात करें:

 exporting: { type: 'image/png', buttons: { exportButton: { menuItems: null, onclick: function() { this.exportChart(); } } } } 

बिंदुओं को गतिशील रूप से जोड़ें

अंत में, सबसे महत्वपूर्ण बात। हम एक फ़ंक्शन निर्दिष्ट करते हैं जो अंक जोड़ देगा, और इसकी कॉल के अंतराल को मिलीसेकेंड में सेट करेगा। चार्ट बहुत जल्दी से अपडेट किए जाते हैं, कम से कम हर 50 एमएस। तुरंत उस डिव के नाम को इंगित करें जिसमें ग्राफिक्स प्रदर्शित किए जाएंगे।

 chart: { renderTo: 'containerlive', zoomType: 'x', events: { load: function() { setInterval(load, 50); } } } }); }; 

यह फ़ंक्शन चार्ट को इनिशियलाइज़ करते समय उसी ajax रिक्वेस्ट को भेजता है। AddPoint विधि के लिए पैरामीटर के रूप में, प्रत्येक स्ट्रीम के लिए वर्तमान समय और श्रोताओं की संख्या निर्दिष्ट करें। यदि आपको किसी भी अंक तक पहुंचने के बाद ग्राफ को स्थानांतरित करने की आवश्यकता है, तो अंतिम मूल्य को addPoint विधि में बदलकर सच करें।

 function load() { $.getJSON('protected/live_values.php', function(lst) { x = (new Date()).getTime()+14400000; for (i=0; i<9; i++) chart.series[i].addPoint([x, lst[i]], true, false); }); }; 

वह सब

Html पेज पर ग्राफ को प्रदर्शित करने के लिए, हम अपनी js स्क्रिप्ट, jquery, highstock को और निर्यात मॉड्यूल को इससे जोड़ते हैं। खैर, चार्ट स्थापित करते समय निर्दिष्ट आईडी के बराबर एक div बनाएं।

परिणाम

अनुसूची को लगभग एक घंटे में अपडेट किया गया था:

कई रेखांकन:


हाईस्टॉक एक बहुत शक्तिशाली चीज है, बल्कि मूडी है। उदाहरण के लिए, नवीनतम संस्करण 1.1.0 क्रोम में सही ढंग से काम नहीं करता है, यहां तक ​​कि आधिकारिक वेबसाइट पर भी। इसलिए, मेरी परियोजना में, मैं अभी भी 1.0.2 संस्करण का उपयोग करता हूं। इसके अलावा, संस्करण की परवाह किए बिना, वस्तुओं की एक बड़ी सरणी के हस्तांतरण के साथ समस्याएं हो सकती हैं, ग्राफिक्स बस नहीं बनाया जा सकता है।