ভিজ্যুয়ালাইজেশন: মোশন চার্ট

1. ওভারভিউ
2. উদাহরণ
3. লোড হচ্ছে
4. প্রাথমিক অবস্থা সেট করা হচ্ছে
5. উপাত্ত বিন্যাস
6. কনফিগারেশন অপশন
7. পদ্ধতি
8. ঘটনা
9. ডেটা নীতি
10. মন্তব্য

ওভারভিউ

সময়ের সাথে সাথে বিভিন্ন সূচক অন্বেষণ করার জন্য একটি গতিশীল চার্ট। চার্টটি ফ্ল্যাশ ব্যবহার করে ব্রাউজারের মধ্যে রেন্ডার করা হয়।

বিকাশকারীদের জন্য নোট : ফ্ল্যাশ সুরক্ষা সেটিংসের কারণে, ব্রাউজারে একটি ফাইল অবস্থান থেকে অ্যাক্সেস করার সময় এটি (এবং সমস্ত ফ্ল্যাশ-ভিত্তিক ভিজ্যুয়ালাইজেশন) সঠিকভাবে কাজ নাও করতে পারে (যেমন, file:///c:/webhost/myhost/myviz.html ) একটি ওয়েব সার্ভার URL থেকে না করে (যেমন, http://www.myhost.com/myviz.html)। এটি সাধারণত শুধুমাত্র একটি পরীক্ষার সমস্যা। Adobe ওয়েব সাইটে বর্ণিত হিসাবে আপনি এই সমস্যাটি কাটিয়ে উঠতে পারেন৷

উদাহরণ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Fruit'); data.addColumn('date', 'Date'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addColumn('string', 'Location'); data.addRows([ ['Apples', new Date (1988,0,1), 1000, 300, 'East'], ['Oranges', new Date (1988,0,1), 1150, 200, 'West'], ['Bananas', new Date (1988,0,1), 300, 250, 'West'], ['Apples', new Date (1989,6,1), 1200, 400, 'East'], ['Oranges', new Date (1989,6,1), 750, 150, 'West'], ['Bananas', new Date (1989,6,1), 788, 617, 'West'] ]); var chart = new google.visualization.MotionChart(document.getElementById('chart_div')); chart.draw(data, {width: 600, height:300}); } <span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Motion Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Fruit'); data.addColumn('date', 'Date'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addColumn('string', 'Location'); data.addRows([ ['Apples', new Date (1988,0,1), 1000, 300, 'East'], ['Oranges', new Date (1988,0,1), 1150, 200, 'West'], ['Bananas', new Date (1988,0,1), 300, 250, 'West'], ['Apples', new Date (1989,6,1), 1200, 400, 'East'], ['Oranges', new Date (1989,6,1), 750, 150, 'West'], ['Bananas', new Date (1989,6,1), 788, 617, 'West'] ]); var chart = new google.visualization.MotionChart(document.getElementById('chart_div')); chart.draw(data, {width: 600, height:300}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Motion Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Motion Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Fruit'); data.addColumn('date', 'Date'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addColumn('string', 'Location'); data.addRows([ ['Apples', new Date (1988,0,1), 1000, 300, 'East'], ['Oranges', new Date (1988,0,1), 1150, 200, 'West'], ['Bananas', new Date (1988,0,1), 300, 250, 'West'], ['Apples', new Date (1989,6,1), 1200, 400, 'East'], ['Oranges', new Date (1989,6,1), 750, 150, 'West'], ['Bananas', new Date (1989,6,1), 788, 617, 'West'] ]); var chart = new google.visualization.MotionChart(document.getElementById('chart_div')); chart.draw(data, {width: 600, height:300}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Motion Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['motionchart']}); </script> <div id="chart_div" style="width: 600px; height: 300px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Fruit'); data.addColumn('date', 'Date'); data.addColumn('number', 'Sales'); data.addColumn('number', 'Expenses'); data.addColumn('string', 'Location'); data.addRows([ ['Apples', new Date (1988,0,1), 1000, 300, 'East'], ['Oranges', new Date (1988,0,1), 1150, 200, 'West'], ['Bananas', new Date (1988,0,1), 300, 250, 'West'], ['Apples', new Date (1989,6,1), 1200, 400, 'East'], ['Oranges', new Date (1989,6,1), 750, 150, 'West'], ['Bananas', new Date (1989,6,1), 788, 617, 'West'] ]); var chart = new google.visualization.MotionChart(document.getElementById('chart_div')); chart.draw(data, {width: 600, height:300}); }

(মনে রাখবেন যে স্থানীয় ফাইল হিসাবে লোড করার সময় নিম্নলিখিত কোডটি কাজ করবে না; এটি একটি ওয়েব সার্ভার থেকে লোড করা আবশ্যক।)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["motionchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

লোড হচ্ছে

google.charts.load প্যাকেজের নাম হল "motionchart" ।

  google.charts.load('current', {'packages': ['motionchart']});

ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization.MotionChart ।

  var visualization = new google.visualization.MotionChart(container);

উপাত্ত বিন্যাস

• প্রথম কলামটি অবশ্যই 'স্ট্রিং' টাইপের হতে হবে এবং এতে সত্তার নাম থাকতে হবে (উদাহরণস্বরূপ, উপরের উদাহরণে "আপেল", "কমলা", "কলা")।
• দ্বিতীয় কলামে অবশ্যই সময়ের মান থাকতে হবে। সময় নিম্নলিখিত ফর্ম্যাটে প্রকাশ করা যেতে পারে:
  • বছর - কলামের ধরন: 'সংখ্যা'। উদাহরণ: 2008।
  • মাস, দিন এবং বছর - কলামের ধরন: 'তারিখ'; মানগুলি জাভাস্ক্রিপ্ট Date উদাহরণ হওয়া উচিত।
  • সপ্তাহের সংখ্যা - কলামের ধরন: 'স্ট্রিং'; মানগুলির YYYYWww প্যাটার্ন ব্যবহার করা উচিত, যা ISO 8601 এর সাথে সামঞ্জস্যপূর্ণ। উদাহরণ: '2008W03'।
  • কোয়ার্টার - কলামের ধরন: 'স্ট্রিং'; মানগুলিতে YYYYQq প্যাটার্ন থাকা উচিত, যা ISO 8601- এর সাথে সামঞ্জস্যপূর্ণ। উদাহরণ: '2008Q3'।
• পরবর্তী কলামগুলি 'সংখ্যা' বা 'স্ট্রিং' টাইপের হতে পারে। সংখ্যা কলামগুলি X, Y, রঙ এবং আকার অক্ষের জন্য ড্রপডাউন মেনুতে প্রদর্শিত হবে। স্ট্রিং কলাম শুধুমাত্র রঙের জন্য ড্রপডাউন মেনুতে প্রদর্শিত হবে। উপরের উদাহরণ দেখুন।

প্রাথমিক অবস্থা সেট করা হচ্ছে

আপনি নির্দিষ্ট করতে পারেন যে মোশন চার্টটি একটি নির্দিষ্ট অবস্থা দিয়ে শুরু হয়: অর্থাৎ, নির্বাচিত সত্তার একটি সেট এবং কাস্টমাইজেশন দেখুন৷ এটি করার জন্য, আপনাকে প্রথমে চার্ট তৈরি করতে হবে এবং প্রদর্শন করতে হবে, তারপরে আপনি চার্টটি দেখাতে চান এমন কোনও অবস্থার পরিবর্তন করতে হবে (মান নির্বাচন করুন, সেটিংস পরিবর্তন করুন, ইত্যাদি), তারপর এই সেটিংসগুলিকে একটি স্ট্রিং হিসাবে রপ্তানি করুন এবং অবশেষে এটি ব্যবহার করুন আপনার কোডে স্ট্রিং, এটি "স্টেট" বিকল্পে বরাদ্দ করে। পরবর্তী দুটি বিভাগ বর্ণনা করে যে কীভাবে রপ্তানি করতে হয় এবং তারপরে রাষ্ট্রীয় কোড ব্যবহার করতে হয়।

1. একটি কাজের চার্ট খুলুন এবং আপনি ক্যাপচার করতে চান এমন সেটিংস সেট করুন। আপনি যে সেটিংস নির্দিষ্ট করতে পারেন তাতে অস্বচ্ছতার মাত্রা, জুমিং এবং লগ বনাম লিনিয়ার স্কেলিং অন্তর্ভুক্ত রয়েছে।
2. চার্টের নীচের ডানদিকে কোণায় রেঞ্চ প্রতীকে ক্লিক করে সেটিংস প্যানেলটি খুলুন৷
3. সেটে অ্যাডভান্সড প্যানেল যোগ করতে নীচের বাম কোণে উন্নত লিঙ্কে ক্লিক করুন।
4. উন্নত প্যানেল প্রসারিত করুন এবং আপনার ক্লিপবোর্ডে রাজ্য পাঠ্য বাক্সের বিষয়বস্তু অনুলিপি করুন। (দ্রষ্টব্য: মেনু ব্যবহার করার পরিবর্তে, ধাপ 2-4 এ বর্ণিত, আপনি আপনার পৃষ্ঠায় একটি বোতাম সন্নিবেশ করতে পারেন যা getState() কল করে এবং একটি বার্তা বাক্সে বর্তমান অবস্থা প্রদর্শন করে।)
5. আপনার কোডের "স্টেট" বিকল্পের প্যারামিটারে পূর্ববর্তী ধাপে কপি করা স্টেট স্ট্রিংটি বরাদ্দ করুন, যেমনটি এখানে দেখানো হয়েছে। draw() পদ্ধতিতে পাস করা হলে, চার্টটি স্টার্টআপের সময় নির্দিষ্ট অবস্থায় শুরু হবে।

var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

কনফিগারেশন অপশন

নাম	টাইপ	ডিফল্ট	বর্ণনা
উচ্চতা	সংখ্যা	300	চার্টের উচ্চতা পিক্সেলে।
প্রস্থ	সংখ্যা	500	চার্টের প্রস্থ পিক্সেলে।
অবস্থা	স্ট্রিং	কোনটি	চার্টের জন্য একটি প্রাথমিক প্রদর্শন অবস্থা। এটি একটি ক্রমিক JSON অবজেক্ট যা জুম স্তর, নির্বাচিত মাত্রা, নির্বাচিত বুদবুদ/সত্তা এবং অন্যান্য রাষ্ট্রের বর্ণনা বর্ণনা করে। এটি কিভাবে সেট করতে হয় তা জানতে প্রাথমিক অবস্থা সেটিং দেখুন।
শোচার্ট বাটন	বুলিয়ান	সত্য	মিথ্যা উপরের ডানদিকে কোণায় চার্টের ধরন (বুদবুদ / লাইন / কলাম) নিয়ন্ত্রণ করে এমন বোতামগুলিকে লুকিয়ে রাখে।
শো হেডার	বুলিয়ান	সত্য	false সত্তার শিরোনাম লেবেল লুকিয়ে রাখে (ডেটা টেবিলের প্রথম কলামের লেবেল থেকে প্রাপ্ত)।
শো সিলেক্টলিস্ট কম্পোনেন্ট	বুলিয়ান	সত্য	মিথ্যা দৃশ্যমান সত্তার তালিকা লুকিয়ে রাখে।
শো সাইডপ্যানেল	বুলিয়ান	সত্য	মিথ্যা ডান হাতের প্যানেল লুকায়।
শোএক্সমেট্রিক পিকার	বুলিয়ান	সত্য	মিথ্যা x এর জন্য মেট্রিক পিকার লুকায়।
showYMetricPicker	বুলিয়ান	সত্য	মিথ্যা y এর জন্য মেট্রিক বাছাইকারীকে লুকিয়ে রাখে।
showXScalePicker	বুলিয়ান	সত্য	মিথ্যা x এর জন্য স্কেল পিকার লুকায়।
showYScalePicker	বুলিয়ান	সত্য	মিথ্যা y এর জন্য স্কেল বাছাইকারী লুকায়।
অ্যাডভান্সড প্যানেল দেখান	বুলিয়ান	সত্য	false সেটিংস প্যানেলে অপশন কম্পার্টমেন্ট নিষ্ক্রিয় করে।

পদ্ধতি

পদ্ধতি	রিটার্ন টাইপ	বর্ণনা
draw(data, options)	কোনটি	প্রদত্ত বিকল্পগুলির সাথে চার্ট আঁকে।
getState()	স্ট্রিং	মোশনচার্টের বর্তমান অবস্থা দেখায়, একটি JSON স্ট্রিং-এ সিরিয়াল করা হয়েছে। চার্টে এই স্টেট বরাদ্দ করতে, draw() পদ্ধতিতে state অপশনে এই স্ট্রিংটি বরাদ্দ করুন। এটি প্রায়শই ডিফল্ট অবস্থা ব্যবহার করার পরিবর্তে স্টার্টআপে একটি কাস্টম চার্ট অবস্থা নির্দিষ্ট করতে ব্যবহৃত হয়।

ঘটনা

নাম	বর্ণনা	বৈশিষ্ট্য
error	চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়।	আইডি, বার্তা
প্রস্তুত	চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে ড্র পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে।	কোনোটিই নয়
রাষ্ট্র পরিবর্তন	ব্যবহারকারী চার্টের সাথে কিছু উপায়ে যোগাযোগ করেছে। চার্টের বর্তমান অবস্থা জানতে getState() কে কল করুন।	কোনোটিই নয়

ডেটা নীতি

সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।

মন্তব্য

ফ্ল্যাশ নিরাপত্তা সেটিংসের কারণে, ব্রাউজারে একটি ফাইল অবস্থান থেকে অ্যাক্সেস করার সময় এটি (এবং সমস্ত ফ্ল্যাশ-ভিত্তিক ভিজ্যুয়ালাইজেশন) সঠিকভাবে কাজ নাও করতে পারে (যেমন, ফাইল:///c:/webhost/myhost/myviz.html) থেকে একটি ওয়েব সার্ভার URL (যেমন, http://www.myhost.com/myviz.html)। এটি সাধারণত শুধুমাত্র একটি পরীক্ষার সমস্যা। Macromedia ওয়েব সাইটে বর্ণিত হিসাবে আপনি এই সমস্যাটি কাটিয়ে উঠতে পারেন৷