ফিউশনচার্টের সাহায্যে অত্যাশ্চর্য গ্রাফ তৈরি করুন

আপনার কি এমন কোনো বস আছে যিনি বিষয়বস্তু নির্বিশেষে অভিনব ভিজ্যুয়াল কৌশল দ্বারা সহজেই প্রভাবিত হন? আপনি কি একজন মার্কেটিং ধরনের লোক? আপনি কি একটি ওয়েবসাইটের মালিক এবং কিছু অত্যাশ্চর্য ফ্ল্যাশ গ্রাফ সহ পৃষ্ঠাগুলিকে প্রাণবন্ত করতে চান? আপনার কি অনলাইন উপস্থাপনা সরঞ্জামের প্রয়োজন যা স্ট্যাটিক ওয়েব পৃষ্ঠাগুলির বাইরে যায়? তারপর আপনি FusionCharts এ কটাক্ষপাত করা উচিত.

FusionCharts হল একটি ফ্ল্যাশ চার্টিং সফ্টওয়্যার যা আপনাকে আপনার ওয়েব প্রকল্পগুলিতে নান্দনিকভাবে মনোরম, অ্যানিমেটেড ফ্ল্যাশ গ্রাফ এবং চার্টগুলিকে একীভূত করতে দেয়৷ ফিউশনচার্টস এলাকা, বার, পাই, কলাম, স্ক্যাটার এবং আরও অনেকগুলি সহ 2D এবং 3D চার্টের বিস্তৃত পরিসর অফার করে, যার সবকটি প্লেইন HTML ফাইল বা ASP, PHP, Ruby on Rail, Python, এবং অন্যান্য ওয়েবের সাথে ব্যবহার করা যেতে পারে। প্রযুক্তি FusionCharts SQL এবং Oracle এর মত ডাটাবেসের সাথেও কাজ করে।

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

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

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

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

FusionCharts ডাউনলোড করতে আপনাকে নিবন্ধন করতে হবে। আপনি আপনার মেশিনে সংরক্ষণাগারটি ডাউনলোড করার পরে, ডাউনলোড করা জিপ ফাইলটি আপনার পছন্দের যেকোনো ফোল্ডারে বের করুন।

প্রথম ধাপ

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

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

একটি প্রকল্প তৈরি করুন

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

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

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

পরবর্তী ধাপ হল চার্টের জন্য আপনার ডেটা কপি করে তৈরি করা। FusionCharts এর প্রয়োজন যে আপনি ডেটা ধারক হিসাবে XML ব্যবহার করুন৷

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

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

XML জেনারেটর টুল সাব-ফোল্ডারে পাওয়া যাবে।

আপনি যে কোনো উপায়ে ডেটা লিখুন। একবার হয়ে গেলে কনভার্ট টু এক্সএমএল ক্লিক করুন।

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

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

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

এরপরে, আপনার ফাইল তৈরি করতে জেনারেট এইচটিএমএল এ ক্লিক করুন। এখানে, আপনি চার্টের ধরন বেছে নিতে পারেন। এই মানটি সরাসরি SWF ফাইলগুলিকে নির্দেশ করে যা আমরা আগে কপি করেছি, তাই আপনি যদি চার্ট সাব-ফোল্ডার থেকে চার্ট ফাইলগুলির একটি সাবসেকশন কপি করে থাকেন তবে নিশ্চিত করুন যে সেগুলি আপনার প্রোজেক্ট ফোল্ডারে আছে৷ অন্যথায়, আপনার প্রকল্প সত্যিই কাজ করবে না। এটি একটি ইমেজ ফাইল না থাকার মতই যেখানে এটি হওয়া উচিত।

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

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

ডেটা পর্যালোচনা করুন

আমাদের ফাইল কটাক্ষপাত করা যাক. এখানে Data.xml ফাইল আছে:

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

এখানে HTML ফাইল আছে:

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

চমৎকার গ্রাফ

আপনি সেখানে যান, সত্যিই অভিনব জিনিস, কিছু 2D এবং 3D পাই:

আরেকটি উদাহরণ, 3D বার:

চলুন দেখি এই সুন্দর চার্টগুলি কেমন দেখায় যখন একটি ওয়েবপেজে একত্রিত করা হয়, চার্টের আগে এবং পরে কিছু পাঠ্য সহ, একটি খুব শালীন নিবন্ধ তৈরি করে:

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

লোড করার সময় গ্রাফগুলিতে একটি সুন্দর প্রবেশদ্বার অ্যানিমেশন রয়েছে, যা শৈলী যোগ করে। এখানে এটি দেখতে কেমন, উইঙ্ক ব্যবহার করে রেকর্ড করা হয়েছে:

মিনি-সারাংশ

আমি উপসংহারে যাওয়ার আগে [sic], এখানে একটি সংক্ষিপ্ত তালিকা রয়েছে যা আপনাকে FusionCharts চালু করতে এবং চালানোর জন্য সম্পাদন করতে হবে:

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

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

উপসংহার

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

উইঙ্ক এবং সম্ভবত স্লিডির সাথে মিলিত, আপনি একটি ট্রিট করার জন্য আছেন। আপনি যদি এটি সম্পর্কে গুরুতর হন তবে আপনি সম্পূর্ণ, পেওয়্যার সংস্করণ কেনার কথাও বিবেচনা করতে পারেন।

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

চিয়ার্স।