ফিউশনচার্টস দিয়ে পেশাদার, অ্যানিমেটেড চার্ট তৈরি করুন

আপনার বস কি ফ্যান্সি ভিজুয়াল ট্রিক্স দেখে সহজে মুগ্ধ হয়ে যান, কন্টেন্ট যাই হোক? আপনি কি একজন মার্কেটিং টাইপের লোক? আপনার একটি ওয়েবসাইট আছে এবং পেজগুলকে কিছু চমৎকার ফ্ল্যাশ গ্রাফ দিয়ে চমকপ্রদ করতে চান? আপনাকে অনলাইন প্রেজেন্টেশন টুলস প্রয়োজন যা স্ট্যাটিক ওয়েব পেজের চেয়ে বেশি? তবে আপনাকে ফিউশনচার্টস (FusionCharts) দেখতে হবে।

ফিউশনচার্টস একটি ফ্ল্যাশ চার্টিং সফটওয়্যার যা আপনাকে सौন্দর্যময়, অ্যানিমেটেড ফ্ল্যাশ গ্রাফ এবং চার্ট আপনার ওয়েব প্রজেক্টে ইন্টিগ্রেট করতে দেয়। ফিউশনচার্টস ২ডি এবং ৩ডি চার্টের একটি ব্যাপক রেঞ্জ অফার করে, যার মধ্যে রয়েছে এরিয়া, বার, পাই, কলাম, স্ক্যাটার, এবং অন্যান্য অনেক, যেগুলো প্লেইন HTML ফাইল বা ASP, PHP, Ruby on Rail, Python, এবং অন্যান্য ওয়েব টেকনোলজির সাথে ব্যবহার করা যায়। ফিউশনচার্টস ডেটাবেসের সাথে ও কাজ করে, যেন SQL এবং Oracle।

ফিউশনচার্টস ইনফোসফটের (InfoSoft) অনেক পণ্যের মধ্যে একটি। অন্যান্য অফারিংসের মধ্যে, আপনি পাবেন ড্যাশবোর্ডের জন্য ফ্ল্যাশ উইজেটস, ফ্ল্যাশ ম্যাপস এবং অ্যাডোব ফ্ল্যাশ, ড্রিমওয়েভার, ফাইলমেকার, ভিজুয়াল বেসিক, এবং গুগল গ্যাজেটের জন্য ইন্টারঅ্যাক্টিভ চার্ট।

এই সব প্রোগ্রামের টাকা খরচ হয়, কিন্তু ফিউশনচার্টস একটি ফ্রি ভার্সনও অফার করে! যদিও পেমেন্ট করা সমাধানের চেয়ে কম শক্তিশালী, ফিউশনচার্টস ফ্রি অধিকাংশ হোম ইউজারের জন্য পর্যাপ্ত। আরও, এটি খুব নন-ইনট্রুসিভ, কোনো শেয়ারওয়্যার-স্টাইল 워터мар্ক ব্র্যান্ডিং ছাড়া।

কৌতূহলী? খুব, আমি আপনাকে দেখাচ্ছি কীভাবে ফিউশনচার্টস সেটআপ করতে হয়। এই টিউটোরিয়ালে, আমি ফিউশনচার্টস v3-এ ডেমো করব, যা আপনি কিছুক্ষণের জন্য ট্রায়াল করতে পারেন। খুব, আমি সকল লিগাল দিক আপনার ওপর ছেড়ে দিচ্ছি। দুটির মধ্যে তুলনার জন্য, নিচের পেজটি পরীক্ষা করুন।

ডাউনলোড এবং সেটআপ

ফিউশনচার্টস ডাউনলোড করতে আপনাকে রেজিস্টার করতে হবে। আপনি আর্কাইভটি আপনার মেশিনে ডাউনলোড করার পর, ডাউনলোড করা জিপ ফাইলটি আপনার পছন্দের যেকোনো ফোল্ডারে এক্সট্র্যাক্ট করুন।

প্রথম ধাপগুলো

আপনি যেটি এক্সট্র্যাক্ট করেছেন সেই ফোল্ডারটি খুলুন। আপনি লক্ষ্য করবেন এতে কয়েকটি সাব-ফোল্ডার আছে।

ফাইলটি একটি ডকুমেন্টেশন/হেল্প ফাইল যা আপনাকে আপনার প্রথম ওয়েব প্রজেক্ট তৈরি করতে এবং এর মধ্যে ফিউশনচার্টস ব্যবহার করতে সাহায্য করবে। আপনাকে ইনস্ট্রাকশন পড়তে কিছু সময় ব্যয় করা উচিত, কিন্তু আপনি আমার আর্টিকেলটিও স্কিম থ্রু করতে পারেন।

একটি প্রজেক্ট তৈরি করুন

আপনার প্রজেক্টের জন্য একটি ডিরেক্টরি তৈরি করতে হবে। একবার তৈরি হলে, Charts সাব-ফোল্ডারের ভেতর থাকা সকল ফাইল আপনার প্রজেক্ট ফোল্ডারে কপি করুন। আপনি লক্ষ্য করবেন এই ফাইলগুলো SWF ফরম্যাটে। পরের ধাপ, JSClass ফোল্ডার থেকে FusionCharts.js ফাইলটি আপনার প্রজেক্ট ফোল্ডারে কপি করুন।

নোট: ফ্রিউয়্যার ভার্সনের ব্যবহারকারীদের স্ক্রিপ্টও উপলব্ধ থাকবে। যাইহোক, উপলব্ধ চার্ট টাইপের সংগ্রহ ছোট হবে। আরও ডিটেলের জন্য উপরের তুলনা দেখুন।

আপনাকে আসলেই এটা করতে হবে না, আপনি যেকোনো ডিরেক্টরি ব্যবহার করতে পারেন এবং তারপর আপনার ওয়েব কোডে রিলেটিভ পাথ ব্যবহার করে সঠিক ফাইলগুলো পয়েন্ট করতে পারেন, যেন আপনি যেকোনো ওয়েব প্রজেক্টের সাথে করবেন। যাইহোক, ফিউশনচার্টস প্রথমবার ব্যবহার করার সময়, ওয়েব পেজ, স্ক্রিপ্ট এবং ফ্ল্যাশ চার্ট সব একই ফোল্ডারে থাকলে সহজ হয়।

পরবর্তী ধাপ হল চার্টের জন্য আপনার ডেটা কপি ও তৈরি করা। ফিউশনচার্টস আপনাকে XML ডেটা কন্টেইনার হিসেবে ব্যবহার করতে বাধ্য করে।

ডেটা তৈরি করুন

ফ্রি ভার্সনে, আপনাকে নিজে ফাইলটি তৈরি করতে হবে একটি টেক্সট এডিটর ব্যবহার করে। ফুল-ফিচারড v3 আপনাকে XML Generator Utility ব্যবহার করতে দেয়, যা খুব হ্যান্ডি, কারণ এটি আপনার সেটিংসকে অটোমেটিক্যালি HTML বা সংশ্লিষ্ট কোডে কনভার্ট করে দেয়।

XML Generator Tools সাব-ফোল্ডারে পাওয়া যাবে।

আপনার পছন্দমতোভাবে ডেটা এন্টার করুন। একবার হলে, Convert to XML-এ ক্লিক করুন।

আপনার ডেটা এখন XML ফরম্যাটে দেখাবে। আমি আগে বলেছিলাম, আপনি টেক্সট এডিটর ব্যবহার করে নিজে ফাইলটি তৈরি করতে পারতেন, যেমন নোটপ্যাড, উদাহরণস্বরূপ। অবশ্যই, আপনাকে কোডটি টেক্সট এডিটরে কপি করতে হবে এবং ফাইলটি something.xml হিসেবে সেভ করতে হবে।

ফিউশনচার্টস গাইড আপনাকে ফাইলটি Data.xml বলতে সুপারিশ করে। আপনি যদি নিজে HTML ফাইল এডিট করার সাথে কামফরটেবল না হন, তবে আপনাকে অবশ্যই ডিফল্ট নামটি ব্যবহার করা উচিত। অন্যথায়, আপনি আপনার পছন্দমতো যেকোনো নাম ব্যবহার করতে পারেন।

Configure Chart-এ ক্লিক করুন চার্টের লুক অ্যান্ড ফিল কাস্টোমাইজ করতে। আপনি আপনার চার্টের জন্য টাইটেল এবং সাব-টাইটেল এবং অ্যাক্সেস যোগ করতে পারেন, কালার প্যালেট পরিবর্তন করতে পারেন, গ্রাফে ভ্যালু দেখাতে পারেন, এবং অন্যান্য সংশ্লিষ্ট প্রপার্টি।

পরবর্তী, Generate HTML-এ ক্লিক করুন আপনার ফাইল তৈরি করতে। এখানে, আপনি চার্ট টাইপ বেছে নিতে পারেন। এই ভ্যালু সরাসরি SWF ফাইলগুলোকে পয়েন্ট করে যা আমরা আগে কপি করেছিলাম, তাই আপনি যদি Charts সাব-ফোল্ডার থেকে কেবল একটি সাবসেকশন চার্ট ফাইল কপি করেছেন, নিশ্চিত করুন সেগুলো আপনার প্রজেক্ট ফোল্ডারে আছে। অন্যথায়, আপনার প্রজেক্ট কাজ করবে না। এটি ঠিক সেটি যেন একটি ইমেজ ফাইল তার সঠিক জায়গায় নেই।

আপনি গ্রাফের প্রস্থ এবং উচ্চতাও পরিবর্তন করতে পারেন। আপনি পরে HTML কোড ম্যানুয়ালি পরিবর্তন করে এটিও টুইক করতে পারেন।

শেষে, কন্টেন্টগুলো কপি করুন একটি টেক্সট এডিটরে এবং আপনার নিজস্ব HTML ফাইল তৈরি করুন। আপনার পছন্দমতো নাম দিন। আরও ডিটেলের জন্য, ডাউনলোড করা প্যাকেজের সাথে আসা ফাইলটি রেফার করুন।

ডেটা রিভিউ

আমাদের ফাইলগুলো দেখি। এখানে Data.xml ফাইলটি:

আপনি দেখতে পাচ্ছেন, এটি স্ট্যান্ডার্ড XML। আপনি চাইলে সরাসরি এই ফাইলটি এডিট করতে পারেন বা জানেন কীভাবে। আপনি ভ্যালু এবং কীগুলো পরিবর্তন করতে পারেন, আপনি চার্ট ক্যাপশন এবং আরও অনেক কিছু এডিট করতে পারেন।

এখানে HTML ফাইলটি:

এটা আমাদের ফাইল। যা আপনার প্রয়োজন সেটি Start Code for FusionCharts chart এবং End code for FusionCharts chart এই দুটি কমেন্টের মধ্যে রয়েছে। আপনি যেকোনো প্রজেক্টে এটি কপি করতে পারেন। .js ফাইল, .swf ফাইল, চার্ট সাইজ ইত্যাদির রিলেটিভ পাথ লক্ষ্য করুন। আপনি আপনার ইচ্ছামতো এগুলো কাস্টোমাইজ করতে পারেন। এখন, দেখি ফিউশনচার্টস কী করতে পারে।

চমৎকার গ্রাফস

এইলে, সত্যিকারের ফ্যান্সি জিনিসপত্র, কিছু ২ডি এবং ৩ডি পাই:

আরেকটি উদাহরণ, ৩ডি বার:

দেখি এই লাবলি চার্টগুলো একটি ওয়েবপেজে ইন্টিগ্রেটেড হয়ে কেমন দেখে, কিছু টেক্সট চার্টের আগে এবং পরে, একটি খুব ডিসেন্ট আর্টিকেল বানিয়ে:

এখন, সেরা অংশ হল, আপনি গ্রাফগুলো ম্যানিপুলেট করতে পারেন, রোটেট করতে পারেন, ডেটার টুকরো আলাদা করতে পারেন, সব ধরনের কুল ট্রিকস। অবশ্যই, আপনার জাভাস্ক্রিপ্ট এনাবলড থাকতে হবে এবং ফ্ল্যাশ প্লাগইন ইনস্টলড থাকতে হবে পুরো ব্যাপারটি কাজ করতে।

গ্রাফগুলোর একটি লাবলি এন্ট্র্যান্স অ্যানিমেশন থাকে লোড হওয়ার সময়, যা স্টাইল যোগ করে। এটা কেমন দেখে, উইঙ্ক (Wink) ব্যবহার করে রেকর্ড করা:

মিনি-সামারি

কনক্লুশনে যাওয়ার আগে [sic], এখানে আপনাকে ফিউশনচার্টস আপ অ্যান্ড রানিং করার জন্য যা যা ধাপ নিতে হবে তার একটি সংক্ষিপ্ত তালিকা:

• আর্কাইভ ডাউনলোড ও এক্সট্র্যাক্ট করুন।
• ফ্ল্যাশ ফাইলগুলো (.swf ফরম্যাট, Charts-এ) এবং জাভাস্ক্রিপ্ট ফাইল (.js, JSClass-এ) আপনার প্রজেক্ট ফাইলে কপি করুন। আপনি একক ফোল্ডার বা একাধিক লোকেশন ব্যবহার করতে পারেন। কম জ্ঞানবান ব্যবহারকারীরা প্রযাপ্য একটি একক, ইউনিফাইড প্রজেক্ট ফোল্ডার ব্যবহার করা।
• চার্ট ডেটা তৈরি করুন, টেক্সট ফাইলে কপি করুন এবং Data.xml হিসেবে সেভ করুন।
• HTML কোড তৈরি করুন, কাস্টোমাইজ করুন এবং টেক্সট ফাইলে কপি করুন এবং সেভ করুন; আপনার পছন্দমতো নাম দিন। আপনি সকল প্রাসঙ্গিক ফাইলের লোকেশনের জন্য রিলেটিভ বা অ্যাবসোলিউট পাথ ব্যবহার করতে পারেন। অ্যাডভান্সড ব্যবহারকারীরা সেটআপ যেকোনোভাবে টুইক করবেন।
• নতুন তৈরি করা HTML ফাইলটি ওয়েব ব্রাউজারে লোড করুন এবং আপনার কুল চার্টগুলো উপভোগ শুরু করুন। কী, ভ্যালু, ক্যাপশন, সাইজ, টাইপ, প্যালেট পরিবর্তন করে আপনার প্রয়োজন অনুযায়ী করুন।

আপনি দেখতে পাচ্ছেন, ফিউশনচার্টস সেটআপ করা একটি প্লাগ-অ্যান্ড-প্লে ডিল নয়, কিন্তু এটি নিশ্চিতভাবে সম্ভব। আপনি যদি ইতিমধ্যে ওয়েব ডিজাইনের কিছু ধরণে পরিচিত হন, בסוף আপনি কেন অপরিচিত হবেন যদি আপনি একটি অনলাইন প্রেজেন্টেশন টেকনোলজি ব্যবহার করার ইচ্ছা রাখেন, তবে ফিউশনচার্টস ব্যবহার করা আপনার জন্য একটি ব্রিজ হবে। আপনি যদি নতুন হন, তবে কিছু কাজ আপনার সামনে আছে, কিন্তু আশা করি, আমার টিউটোরিয়াল এটিকে সহজ করে দিয়েছে।

উপসংহার

ফিউশনচার্টস নিশ্চিতভাবে একটি উপকারী, অনন্য প্রযুক্তি। এটি আপনাকে আপনার অনলাইন প্রেজেন্টেশন সমৃদ্ধ করতে দেয়, দ্রুত এবং সহজে। সবচেয়ে ভালো কথা, আপনাকে ফিউশনচার্টস ব্যবহার করার জন্য কোড মাস্টার হতে হবে না। কঠিন কাজটি ইতিমধ্যে করা হয়েছে, আপনাকে শুধু সেই ফ্যান্সি গ্রাফগুলো আপনার ওয়েব পেজে সুসজ্জিত করতে হবে।

Wink এবং সম্ভবত Slidy-এর সাথে মিলিয়ে, আপনি একটি ট്രീটের জন্য আছেন। আপনি যদি এর সম্পর্কে সিরিয়াস হন, তবে আপনি ফুল, পেমেন্ট করা ভার্সন কেনার কথাও ভাবতে পারেন।

আশা করি আপনি এই টিউটোরিয়ালটি উপভোগ করেছেন। আবার দেখা হবে।

চিয়ার্স।