FusionCharts के साथ शानदार ग्राफ बनाएं

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

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

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

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

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

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

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

पहला कदम

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

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

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

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

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

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

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

डेटा बनाएं

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एक अन्य उदाहरण, 3D बार:

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

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

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

मिनी-सारांश

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

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

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

निष्कर्ष

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

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

मुझे उम्मीद है कि आपको यह ट्यूटोरियल अच्छा लगा होगा। फिर मिलेंगे।

प्रोत्साहित करना।