ভিজ্যুয়ালাইজেশন: গেজ

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

ওভারভিউ

SVG বা VML ব্যবহার করে ব্রাউজারের মধ্যে রেন্ডার করা ডায়াল সহ একটি গেজ।

উদাহরণ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></div> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); } <span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Gauge Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></div> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Gauge 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='Gauge Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 400px; height: 120px;"></div> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Gauge 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> <div id="chart_div" style="width: 400px; height: 120px;"></div> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80], ['CPU', 55], ['Network', 68] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); }

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

এই মুহূর্তে একটি গেজ চার্টের শিরোনাম নির্দিষ্ট করার কোন উপায় নেই যেমন আপনি অন্যান্য Google চার্টের সাথে পারেন৷ উপরের উদাহরণে, শিরোনাম প্রদর্শন করতে সাধারণ HTML ব্যবহার করা হয়।

এছাড়াও, অন্যান্য অনেক Google চার্টের জন্য উপলব্ধ animation.startup বিকল্পটি গেজ চার্টের জন্য উপলব্ধ নয়। আপনি যদি একটি স্টার্টআপ অ্যানিমেশন চান, প্রথমে শূন্যতে সেট করা মান সহ চার্টটি আঁকুন এবং তারপরে আপনি যে মানটি অ্যানিমেট করতে চান তা দিয়ে আবার আঁকুন।

লোড হচ্ছে

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

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

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

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

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

প্রতিটি সংখ্যাসূচক মান একটি গেজ হিসাবে প্রদর্শিত হয়। দুটি বিকল্প ডেটা ফর্ম্যাট সমর্থিত:

1. দুই কলাম। প্রথম কলামটি একটি স্ট্রিং হওয়া উচিত এবং এতে গেজ লেবেল থাকা উচিত। দ্বিতীয় কলামটি একটি সংখ্যা হওয়া উচিত এবং এতে গেজ মান থাকতে হবে।
2. সাংখ্যিক কলামের যেকোনো সংখ্যা। প্রতিটি গেজের লেবেল হল কলামের লেবেল।

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

নাম
animation.duration	অ্যানিমেশনের সময়কাল, মিলিসেকেন্ডে। বিস্তারিত জানার জন্য, অ্যানিমেশন ডকুমেন্টেশন দেখুন। প্রকার: সংখ্যা ডিফল্ট: 400
animation.easing	অ্যানিমেশনে প্রয়োগ করা ইজিং ফাংশন। নিম্নলিখিত বিকল্পগুলি উপলব্ধ: 'রৈখিক' - স্থির গতি। 'ইন' - ইজ ইন - ধীরে শুরু করুন এবং গতি বাড়ান। 'আউট' - সহজ আউট - দ্রুত শুরু করুন এবং ধীরে ধীরে করুন। 'inAndOut' - সহজে প্রবেশ এবং আউট - ধীর শুরু করুন, গতি বাড়ান, তারপর ধীর করুন। প্রকার: স্ট্রিং ডিফল্ট: 'লিনিয়ার'
forceIFrame	একটি ইনলাইন ফ্রেমের ভিতরে চার্ট আঁকে। (উল্লেখ্য যে IE8 এ, এই বিকল্পটি উপেক্ষা করা হয়েছে; সমস্ত IE8 চার্ট আই-ফ্রেমে আঁকা হয়েছে।) প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা
সবুজ রং	HTML রঙের স্বরলিপিতে সবুজ বিভাগের জন্য যে রঙটি ব্যবহার করা হবে। প্রকার: স্ট্রিং ডিফল্ট: '#109618'
সবুজ থেকে	সবুজ রঙ দ্বারা চিহ্নিত একটি ব্যাপ্তির জন্য সর্বনিম্ন মান৷ প্রকার: সংখ্যা ডিফল্ট: কোনোটিই নয়
সবুজ থেকে	সবুজ রঙ দ্বারা চিহ্নিত একটি ব্যাপ্তির সর্বোচ্চ মান। প্রকার: সংখ্যা ডিফল্ট: কোনোটিই নয়
উচ্চতা	চার্টের উচ্চতা পিক্সেলে। প্রকার: সংখ্যা ডিফল্ট: কন্টেইনারের প্রস্থ
মেজরটিক্স	প্রধান টিক চিহ্নের জন্য লেবেল। লেবেলের সংখ্যা সমস্ত গেজে প্রধান টিকগুলির সংখ্যা নির্ধারণ করে। ন্যূনতম এবং সর্বাধিক গেজ মানের লেবেল সহ ডিফল্ট পাঁচটি প্রধান টিক। প্রকার: স্ট্রিং এর অ্যারে ডিফল্ট: কোনোটিই নয়
সর্বোচ্চ	একটি গেজের সর্বোচ্চ মান। প্রকার: সংখ্যা ডিফল্ট: 100
মিনিট	একটি গেজের সর্বনিম্ন মান। প্রকার: সংখ্যা ডিফল্ট: 0
minorTicks	প্রতিটি প্রধান টিক বিভাগে ছোট টিক বিভাগের সংখ্যা। প্রকার: সংখ্যা ডিফল্ট: 2
লাল রং	HTML রঙের স্বরলিপিতে লাল অংশের জন্য ব্যবহার করা রঙ। প্রকার: স্ট্রিং ডিফল্ট: '#DC3912'
লাল থেকে	একটি লাল রঙ দ্বারা চিহ্নিত একটি ব্যাপ্তির জন্য সর্বনিম্ন মান৷ প্রকার: সংখ্যা ডিফল্ট: কোনোটিই নয়
লাল টু	লাল রঙ দ্বারা চিহ্নিত একটি ব্যাপ্তির সর্বোচ্চ মান। প্রকার: সংখ্যা ডিফল্ট: কোনোটিই নয়
প্রস্থ	চার্টের প্রস্থ পিক্সেলে। প্রকার: সংখ্যা ডিফল্ট: কন্টেইনারের প্রস্থ
হলুদ রং	HTML রঙের স্বরলিপিতে হলুদ বিভাগের জন্য ব্যবহার করা রঙ। প্রকার: স্ট্রিং ডিফল্ট: '#FF9900'
হলুদ থেকে	একটি হলুদ রঙ দ্বারা চিহ্নিত একটি ব্যাপ্তির জন্য সর্বনিম্ন মান৷ প্রকার: সংখ্যা ডিফল্ট: কোনোটিই নয়
হলুদ টু	হলুদ রঙ দ্বারা চিহ্নিত একটি ব্যাপ্তির সর্বোচ্চ মান। প্রকার: সংখ্যা ডিফল্ট: কোনোটিই নয়

পদ্ধতি

পদ্ধতি
draw(data, options)	চার্ট আঁকে। রিটার্ন টাইপ: কোনোটিই নয়
clearChart()	চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে। রিটার্ন টাইপ: কোনোটিই নয়

ঘটনা

কোন ট্রিগার ইভেন্ট.

ডেটা নীতি

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