फ्यूज़नचार्ट्स के साथ पेशेवर, एनिमेटेड चार्ट बनाएं

क्या आपके पास एक बॉस है जो सामग्री की परवाह किए बिना फैंसी विजुअल ट्रिक्स से आसानी से प्रभावित हो जाता है? क्या आप मार्केटिंग टाइप के आदमी हैं? क्या आपके पास एक वेबसाइट है और आप पेजों को कुछ शानदार फ्लैश ग्राफ़ के साथ जीवंत करना चाहेंगे? क्या आपको ऑनलाइन प्रेजेंटेशन टूल की आवश्यकता है जो स्थिर वेब पेजों से आगे जाएं? तो आपको फ्यूज़नचार्ट्स पर एक नज़र डालनी चाहिए।

फ्यूज़नचार्ट्स एक फ्लैश चार्टिंग सॉफ्टवेयर है जो आपको अपने वेब प्रोजेक्ट्स में सौंदर्य की दृष्टि से सुखद, एनिमेटेड फ्लैश ग्राफ़ और चार्ट को एकीकृत करने देता है। फ्यूज़नचार्ट्स 2D और 3D चार्ट की एक विस्तृत श्रृंखला प्रदान करता है, जिसमें क्षेत्र, बार, पाई, कॉलम, स्कैटर, और कई अन्य शामिल हैं, जिनमें से सभी को सादे HTML फ़ाइलों या ASP, PHP, रूबी ऑन रेल, पायथन, और अन्य वेब तकनीकों के साथ उपयोग किया जा सकता है। फ्यूज़नचार्ट्स डेटाबेस के साथ भी काम करता है, जैसे SQL और Oracle।

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

इन सभी प्रोग्रामों की कीमत चुकानी पड़ती है, लेकिन फ्यूज़नचार्ट्स में एक मुफ्त संस्करण भी है! हालांकि पेयवेयर समाधान से कम शक्तिशाली, फ्यूज़नचार्ट्स फ्री अधिकांश घरेलू उपयोगकर्ताओं के लिए पर्याप्त से अधिक है। इसके अलावा, यह बहुत गैर-घुसपैठ है, बिना किसी शेयरवेयर-शैली वॉटरमार्क ब्रांडिंग के।

रुचि हुई? खैर, मुझे आपको दिखाने दें कि आप फ्यूज़नचार्ट्स कैसे सेटअप कर सकते हैं। इस ट्यूटोरियल में, मैं फ्यूज़नचार्ट्स v3 के साथ प्रदर्शन करूंगा, जिसे आप कुछ समय के लिए ट्रायल कर सकते हैं। खैर, मैं सभी कानूनी पहलुओं को आप पर छोड़ देता हूं। दोनों की तुलना के लिए, कृपया निम्नलिखित पृष्ठ की जांच करें।

डाउनलोड और सेटअप

फ्यूज़नचार्ट्स डाउनलोड करने के लिए आपको पंजीकरण करना होगा। आपके द्वारा आर्काइव को अपनी मशीन पर डाउनलोड करने के बाद, डाउनलोड की गई ज़िप फ़ाइल को अपनी पसंद के किसी भी फ़ोल्डर में निकालें।

पहले कदम

उस फ़ोल्डर को खोलें जहां आपने अभी फ्यूज़नचार्ट्स निकाला है। आप देखेंगे कि इसमें काफी कुछ सब-फ़ोल्डर हैं।

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

एक प्रोजेक्ट बनाएं

आपको अपने प्रोजेक्ट के लिए एक डायरेक्टरी बनाने की आवश्यकता है। एक बार जब आप इसे बना लेते हैं, तो चार्ट्स सब-फ़ोल्डर के अंदर मौजूद सभी फ़ाइलों को अपने प्रोजेक्ट फ़ोल्डर में कॉपी करें। आप देखेंगे कि ये फ़ाइलें SWF फॉर्मेट में हैं। अगला, JSClass फ़ोल्डर से FusionCharts.js फ़ाइल को अपने प्रोजेक्ट फ़ोल्डर में कॉपी करें।

नोट: फ्रीवेयर संस्करण के उपयोगकर्ताओं के पास भी स्क्रिप्ट उपलब्ध होगी। हालांकि, उपलब्ध चार्ट प्रकारों का संग्रह छोटा होगा। अधिक विवरण के लिए उपरोक्त तुलना देखें।

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

अगला चरण चार्ट के लिए अपने डेटा को कॉपी और बनाना है। फ्यूज़नचार्ट्स के लिए आवश्यक है कि आप डेटा कंटेनर के रूप में XML का उपयोग करें।

डेटा बनाएं

मुफ्त संस्करण में, आपको टेक्स्ट एडिटर का उपयोग करके स्वयं फ़ाइल बनानी होगी। पूर्ण-विशेषताओं वाला v3 आपको XML जनरेटर यूटिलिटी का उपयोग करने देता है, जो वास्तव में आसान है, क्योंकि यह आपकी सेटिंग्स को स्वचालित रूप से HTML या संबंधित कोड में परिवर्तित करता है।

XML जनरेटर टूल्स सब-फ़ोल्डर में पाया जा सकता है।

डेटा किसी भी तरह से दर्ज करें। एक बार हो जाने पर, कन्वर्ट टू XML पर क्लिक करें।

आपका डेटा अब XML प्रारूप में दिखाई देगा। जैसा कि मैंने पहले उल्लेख किया है, आप नोटपैड जैसे टेक्स्ट एडिटर का उपयोग करके स्वयं फ़ाइल बना सकते थे। वास्तव में, आपको कोड को टेक्स्ट एडिटर में कॉपी करना होगा और फ़ाइल को something.xml के रूप में सहेजना होगा।

फ्यूज़नचार्ट्स गाइड आपको फ़ाइल को Data.xml कहने की सलाह देता है। यदि आप स्वयं HTML फ़ाइलों को संपादित करने में सहज नहीं हैं, तो आपको निश्चित रूप से डिफ़ॉल्ट नाम का उपयोग करना चाहिए। अन्यथा, आप जो चाहें किसी भी नाम का उपयोग कर सकते हैं।

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

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

आप ग्राफ़ की चौड़ाई और ऊंचाई भी बदल सकते हैं। आप बाद में HTML कोड बदलकर इसे मैन्युअली ट्वीक कर सकते हैं।

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

डेटा की समीक्षा करें

आइए हमारी फ़ाइलों पर एक नज़र डालें। यहां Data.xml फ़ाइल है:

जैसा कि आप देख सकते हैं, यह मानक XML है। यदि आप चाहते हैं या जानते हैं तो आप इस फ़ाइल को सीधे संपादित कर सकते हैं। आप मान और कुंजियों को बदल सकते हैं, चार्ट कैप्शन और अधिक संपादित कर सकते हैं।

यहां HTML फ़ाइल है:

हमारी फ़ाइल है। वह बिट जो आप चाहते हैं वह दो टिप्पणियों के बीच समाहित है, फ्यूज़नचार्ट्स चार्ट के लिए स्टार्ट कोड और फ्यूज़नचार्ट्स चार्ट के लिए एंड कोड। आप इसे किसी भी प्रोजेक्ट में कॉपी कर सकते हैं। .js फ़ाइल, .swf फ़ाइल, चार्ट आकार, आदि के सापेक्ष पथ देखें। आप इन सभी को अपनी इच्छानुसार अनुकूलित कर सकते हैं। अब, आइए देखें कि फ्यूज़नचार्ट्स क्या कर सकता है।

शानदार ग्राफ़

वहां जाएं, वास्तव में फैंसी सामान, कुछ 2D और 3D पाई:

एक और उदाहरण, 3D बार:

आइए देखें कि ये प्यारे चार्ट एक वेबपेज में एकीकृत होने पर कैसे दिखते हैं, चार्ट से पहले और बाद में कुछ टेक्स्ट के साथ, एक बहुत सभ्य लेख के लिए:

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

ग्राफ़ में लोड होने पर एक प्यारा प्रवेश एनीमेशन भी होता है, जो स्टाइल जोड़ता है। यहां यह कैसा दिखता है, विंक का उपयोग करके रिकॉर्ड किया गया:

मिनी-सारांश

निष्कर्ष [sic] पर जाने से पहले, यहां उन चरणों की एक छोटी सूची है जिन्हें आपको फ्यूज़नचार्ट्स को चालू और चालू करने के लिए करने की आवश्यकता होगी:

• आर्काइव डाउनलोड करें और निकालें।
• फ्लैश फ़ाइलें (.swf फॉर्मेट चार्ट्स के अंदर) और जावास्क्रिप्ट फ़ाइल (.js, JSClass के अंदर) को अपनी प्रोजेक्ट फ़ाइल में कॉपी करें। आप एक सिंगल फ़ोल्डर या कई स्थानों का उपयोग कर सकते हैं। कम जानकार उपयोगकर्ताओं को शायद एक सिंगल, एकीकृत प्रोजेक्ट फ़ोल्डर का उपयोग करना चाहिए।
• चार्ट डेटा बनाएं, इसे टेक्स्ट फ़ाइल में कॉपी करें और इसे Data.xml के रूप में सहेजें।
• HTML कोड बनाएं, इसे अनुकूलित करें और इसे टेक्स्ट फ़ाइल में कॉपी करें और सहेजें; इसे जिस तरह से चाहें नाम दें। आप सभी प्रासंगिक फ़ाइलों के स्थान के लिए सापेक्ष या निरपेक्ष पथ का उपयोग कर सकते हैं। उन्नत उपयोगकर्ता सेटअप को किसी भी तरह से ट्वीक करेंगे।
• नव निर्मित HTML फ़ाइल को वेब ब्राउज़र के अंदर लोड करें और अपने कूल चार्ट का आनंद लेना शुरू करें। कुंजियों, मानों, कैप्शन, आकार, प्रकार, पैलेट को अपनी आवश्यकताओं के अनुरूप बदलें।

जैसा कि आप देख सकते हैं, फ्यूज़नचार्ट्स सेटअप करना प्लग-एंड-प्ले सौदा नहीं है, लेकिन यह निश्चित रूप से करने योग्य है। यदि आप पहले से ही किसी प्रकार के वेब डिज़ाइन से परिचित हैं, आखिरकार आप क्यों नहीं होंगे यदि आप ऑनलाइन प्रेजेंटेशन तकनीक का उपयोग करने का इरादा रखते हैं, तो फ्यूज़नचार्ट्स का उपयोग करना आपके लिए आसान होगा। यदि आप नौसिखिया हैं, तो आपके आगे कुछ काम है, लेकिन उम्मीद है, मेरे ट्यूटोरियल ने इसे सरल बना दिया है।

निष्कर्ष

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

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

मुझे आशा है कि आपको यह ट्यूटोरियल पसंद आया। फिर मिलते हैं।

चीयर्स।