विज़ुअलाइज़ेशन: जेनरिक इमेज चार्ट

अहम जानकारी: 20 अप्रैल, 2012 से Google चार्ट टूल के 'इमेज चार्ट' वाले हिस्से को आधिकारिक तौर पर बंद कर दिया गया है. यह खाता, सुविधा बंद करने की हमारी नीति के हिसाब से काम करता रहेगा.

  1. खास जानकारी
  2. उदाहरण
  3. लोड हो रहा है
  4. डेटा फ़ॉर्मैट
  5. कॉन्फ़िगरेशन के विकल्प
  6. तरीके
  7. इवेंट
  8. डेटा से जुड़ी नीति
  9. स्थानीय भाषा में कॉन्टेंट उपलब्ध कराना

खास जानकारी

सामान्य इमेज चार्ट, Google Chart API के बनाए गए सभी चार्ट के लिए एक जेनरिक रैपर है. इस विज़ुअलाइज़ेशन का इस्तेमाल करने से पहले, कृपया चार्ट एपीआई का दस्तावेज़ पढ़ें. ध्यान दें कि इस विज़ुअलाइज़ेशन का इस्तेमाल करके 16,000 तक डेटा भेजा जा सकता है. वहीं, चार्ट एपीआई को डायरेक्ट कॉल में 2,000 की सीमा तय की जाती है.

सभी डेटा को DataTable या DataView का इस्तेमाल करके चार्ट में पास किया जाता है. इसके अलावा, कुछ लेबल, डेटा टेबल में कॉलम के तौर पर पास किए जाते हैं.

chd के अलावा, Chart API के अन्य सभी यूआरएल पैरामीटर, विकल्पों के तौर पर पास किए जाते हैं.

इसके ज़रिए: Google

उदाहरण

यहां अलग-अलग तरह के चार्ट के उदाहरण दिए गए हैं.

लाइन चार्ट

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

वर्टिकल बार चार्ट

ध्यान दें कि रैप किए गए बार चार्ट में, आपको chxt='x' लिखने की ज़रूरत नहीं है, जैसा कि चार्ट को खुद कॉल करने पर किया जाता है. अगर आपने कोई ऐक्सिस नहीं चुना है, तो जेनरिक इमेज चार्ट डिफ़ॉल्ट रूप से, चार्ट को ठीक से सेट अप करने की कोशिश करता है.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

पाई चार्ट

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

रडार चार्ट

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

मैप चार्ट

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

लोड हो रहा है

google.charts.load पैकेज का नाम 'imagechart' है

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

विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.ImageChart है

  var visualization = new google.visualization.ImageChart(container_div);

डेटा फ़ॉर्मैट

सामान्य डेटा फ़ॉर्मैट दो तरह के होते हैं: एक मैप चार्ट के लिए और दूसरा अन्य सभी चार्ट के लिए. ध्यान दें कि डेटा के लिए सिर्फ़ JavaScript नंबर टाइप ही न्यूमेरिक फ़ॉर्मैट है.

ध्यान दें आपको डेटा या विकल्पों के तौर पर पास की जाने वाली किसी भी स्ट्रिंग वैल्यू को यूआरएल-एन्कोड नहीं करना चाहिए.

मैप चार्ट

मैप चार्ट में, दो ज़रूरी कॉलम वाली डेटा टेबल ली गई है:

ज़्यादा जानकारी के लिए मैप चार्ट का दस्तावेज़ देखें.

नॉन-मैप चार्ट

नॉन-मैप चार्ट, दो वैकल्पिक कॉलम वाली डेटा टेबल लेते हैं (एक कॉलम की शुरुआत में और दूसरा कॉलम के बीच में) और एक या उससे ज़्यादा डेटा कॉलम होते हैं:

  • पहला कॉलम - [ज़रूरी नहीं, स्ट्रिंग] हर एंट्री, X ऐक्सिस पर इस्तेमाल किए गए लेबल के बारे में बताती है (chl या chxl पैरामीटर के बराबर) जो चार्ट के साथ काम करता है.
  • अगले कॉलम - संख्या वाले कॉलम की संख्या. हर कॉलम में डेटा सीरीज़ दिखती है.
  • आखिरी कॉलम - [ज़रूरी नहीं, स्ट्रिंग] डेटा कॉलम के बाद कितने भी स्ट्रिंग कॉलम की संख्या, जहां हर एंट्री चार्ट के लिए एक डेटा पॉइंट लेबल दिखाती है. अगर आपको इस कॉलम का इस्तेमाल करना है, तो आपको annotationColumns विकल्प बताना होगा.

चार्ट के टाइप के आधार पर, डेटा अलग-अलग तरीकों से दिखाया जाएगा. अपने चार्ट के दस्तावेज़ देखें.

कॉलम इंडेक्स के बारे में एक ज़रूरी जानकारी: सामान्य इमेज चार्ट विज़ुअलाइज़ेशन, चार्ट एपीआई सेवा को टेबल भेजने से पहले डेटा टेबल से स्ट्रिंग कॉलम हटा देता है. इसलिए, इस पेज पर दिए गए विकल्पों, तरीकों, और इवेंट के कॉलम इंडेक्स में, इंडेक्स की संख्या में स्ट्रिंग कॉलम शामिल होते हैं. हालांकि, Chart API सेवा से मैनेज किए जाने वाले किसी भी विकल्प (उदाहरण के लिए, chm विकल्प) में मौजूद कॉलम इंडेक्स, इंडेक्स की संख्या में स्ट्रिंग कॉलम को अनदेखा कर देते हैं.

कॉन्फ़िगरेशन के विकल्प

इस विज़ुअलाइज़ेशन के लिए ये विकल्प तय किए गए हैं. इन्हें विज़ुअलाइज़ेशन के draw() तरीके में पास किए गए विकल्प ऑब्जेक्ट में तय करें. नीचे दिए गए सभी विकल्प हर तरह के चार्ट के साथ काम नहीं करते. अपने स्टैटिक इमेज चार्ट के दस्तावेज़ देखें. विकल्प के तौर पर, किसी भी Chart API के यूआरएल पैरामीटर को पास किया जा सकता है. उदाहरण के लिए, चार्ट विज़ुअलाइज़ेशन के यूआरएल पैरामीटर chg=50,50 को ऐसे दिखाया जाएगा: options['chg'] = '50,50'.

रंगों के बारे में एक नोट: रंग के विकल्प जैसे कि colors, color, और backgroundColor की जानकारी चार्ट एपीआई कलर फ़ॉर्मैट में दी जाती है. यह फ़ॉर्मैट #RRGGBB फ़ॉर्मैट से मिलता-जुलता है. हालांकि, इसमें पारदर्शिता दिखाने के लिए, चौथा हेक्साडेसिमल नंबर होना ज़रूरी नहीं है. लोग इन्हें आसानी से पढ़ सकते हैं. जैसे, 'लाल', 'हरा', 'नीला' वगैरह. Chart API के कलर फ़ॉर्मैट में सबसे पहले # सिंबल शामिल नहीं होता. हालांकि, इमेज चार्ट के सामान्य विज़ुअलाइज़ेशन विकल्पों में # के साथ या उसके बिना, कलर कोड स्वीकार किए जाएंगे.

नाम टाइप डिफ़ॉल्ट ब्यौरा
annotationColumns Array<object> कुछ नहीं

अलग-अलग तरह के चार्ट के लिए, डेटा पॉइंट के लेबल. यह ऑब्जेक्ट का एक कलेक्शन है. हर कलेक्शन, चार्ट के एक डेटा पॉइंट को फ़ॉर्मैट किया गया लेबल असाइन करता है. यह विकल्प सिर्फ़ उन चार्ट के लिए उपलब्ध है जो डेटा पॉइंट के साथ काम करते हैं (जोड़े गए विषय देखें और जानें कि कौनसे कॉलम). डेटा टेबल में, कम से कम एक स्ट्रिंग लेबल कॉलम होना चाहिए.

अरे में मौजूद हर ऑब्जेक्ट में ये प्रॉपर्टी होती हैं:

  • column [number] - उस कॉलम का शून्य-आधारित इंडेक्स जिसमें एनोटेशन में इस्तेमाल किया गया टेक्स्ट होता है. इस कॉलम की हर लाइन में वैल्यू होना ज़रूरी नहीं है.
  • positionColumn [number] - उस कॉलम का शून्य-आधारित इंडेक्स जिसमें लेबल किए जा रहे डेटा पॉइंट होते हैं. पहला डेटा कॉलम डिफ़ॉल्ट होता है.
  • color [string] - चार्ट एपीआई कलर फ़ॉर्मैट में जानकारी वाले टेक्स्ट का रंग. डिफ़ॉल्ट रूप से यह वैल्यू '#000000' (काला) होती है.
  • size [number] - जानकारी के लिए दिए गए फ़ॉन्ट का साइज़, पिक्सल में.
  • priority [string] - 'low', 'medium' या 'high' से, वह लेयर जिसमें लेबल बनाया जाना चाहिए, उसके बारे में बताता है. डिफ़ॉल्ट तौर पर, 'मीडियम' होता है. इससे पता चलता है कि लेबल को बार और लाइनों के बाद, लेकिन अन्य लेबल से पहले बनाया गया है.
  • type [string] - 'टेक्स्ट' या 'flag'. 'टेक्स्ट' एक सामान्य टेक्स्ट वाला एनोटेशन बनाता है और 'फ़्लैग', स्पीच-बलून एनोटेशन बनाता है.

उदाहरण - यह स्निपेट एक काला, 12 पिक्सल वाला टेक्स्ट लेबल तय करता है, जिसमें कॉलम 0 से टेक्स्ट लेकर उसी पंक्ति के दूसरे कॉलम में डेटा पॉइंट को असाइन किया गया है: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
backgroundColor स्ट्रिंग '#FFFFFF' (सफ़ेद) चार्ट एपीआई कलर फ़ॉर्मैट में चार्ट के बैकग्राउंड का रंग.
रंग स्ट्रिंग ऑटो सभी सीरीज़ में इस्तेमाल करने के लिए, बेस रंग तय करता है. हर सीरीज़ में तय किए गए रंग का ग्रेड दिया जाएगा. कलर, Chart API के कलर फ़ॉर्मैट में बताए जाते हैं. अगर colors दिया गया है, तो इस पर ध्यान नहीं दिया जाता.
कलर कलेक्शन<string> ऑटो हर डेटा सीरीज़ को खास रंग असाइन करने के लिए इसका इस्तेमाल करें. कलर, चार्ट एपीआई कलर फ़ॉर्मैट में बताए जाते हैं. अगर कलर से ज़्यादा डेटा कॉलम हैं, तो कलर i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है. यह शुरुआत तक रैप करता है. अगर एक ही रंग के वैरिएशन सभी सीरीज़ के लिए सही हैं, तो color विकल्प का इस्तेमाल करें.
enableEvents boolean false इसकी वजह से, उपयोगकर्ता से ट्रिगर होने वाले इवेंट, जैसे कि क्लिक या माउस ओवर फेंकते हैं. इसका इस्तेमाल सिर्फ़ चुनिंदा चार्ट टाइप के लिए किया जा सकता है. नीचे इवेंट देखें.
भरें boolean false अगर सही है, तो हर लाइन के नीचे के हिस्से को भरता है. यह सुविधा सिर्फ़ लाइन चार्ट के लिए उपलब्ध है.
firstHiddenColumn नंबर कुछ नहीं

डेटा कॉलम का इंडेक्स. सूची में मौजूद कॉलम के साथ-साथ, आने वाले सभी कॉलम का इस्तेमाल, चार्ट की मुख्य सीरीज़ के एलिमेंट (जैसे कि लाइन चार्ट पर लाइनें या बार चार्ट पर बार) बनाने के लिए नहीं किया जाएगा. इसके बजाय, इनका इस्तेमाल मार्कर और अन्य एनोटेशन के लिए डेटा के तौर पर किया जाता है. ध्यान दें कि इस इंडेक्स संख्या में स्ट्रिंग कॉलम शामिल होते हैं.
ऊंचाई नंबर 200 चार्ट की ऊंचाई, पिक्सल में. अगर यह वैल्यू मौजूद नहीं है या स्वीकार की जाने वाली रेंज में नहीं है, तो उसमें शामिल एलिमेंट की ऊंचाई का इस्तेमाल किया जाता है. अगर यह भी तय की गई सीमा से बाहर है, तो डिफ़ॉल्ट ऊंचाई का इस्तेमाल किया जाएगा.
लेबल स्ट्रिंग 'कोई नहीं'

[सिर्फ़ पाई चार्ट] हर स्लाइस के लिए कौनसा लेबल दिखाना है. इन वैल्यू में से चुनें:

  • 'कोई भी नहीं' - कोई लेबल नहीं.
  • 'value' - स्लाइस की वैल्यू को लेबल के तौर पर दिखाएं.
  • 'नाम' - स्लाइस का नाम (कॉलम का नाम) लेबल के रूप में दिखाएं.
लेजेंड स्ट्रिंग 'राइट' चार्ट के मुकाबले चार्ट लेजेंड कहां दिखाना है. इनमें से किसी एक के बारे में बताएं: 'सबसे ऊपर', 'सबसे नीचे', 'बायां', 'दायां', 'कोई नहीं'. ऐसे चार्ट में अनदेखा किया जाता है जिनमें लेजेंड शामिल नहीं होते (जैसे कि मैप चार्ट).
ज़्यादा से ज़्यादा नंबर डेटा का ज़्यादा से ज़्यादा मान स्केल पर दिखाई गई ज़्यादा से ज़्यादा वैल्यू. इसे पाई चार्ट के लिए अनदेखा किया गया. डिफ़ॉल्ट वैल्यू, डेटा की सबसे बड़ी वैल्यू होती है. हालांकि, बार चार्ट में डेटा की सबसे बड़ी वैल्यू डिफ़ॉल्ट तौर पर सेट होती है. अगर टेबल में एक से ज़्यादा डेटा कॉलम होते हैं, तो बार चार्ट के लिए इसे अनदेखा किया जाता है.
कम से कम नंबर डेटा की कम से कम वैल्यू स्केल पर दिखाई गई कम से कम वैल्यू. इसे पाई चार्ट के लिए अनदेखा किया गया. डिफ़ॉल्ट वैल्यू, डेटा की सबसे कम वैल्यू होती है. हालांकि, बार चार्ट में डेटा की डिफ़ॉल्ट वैल्यू शून्य होती है. अगर टेबल में एक से ज़्यादा डेटा कॉलम होते हैं, तो बार चार्ट के लिए इसे अनदेखा किया जाता है.
showCategoryLabels boolean सही लेबल, कैटगरी (यानी लाइन) ऐक्सिस पर दिखने चाहिए या नहीं. सिर्फ़ लाइन और बार चार्ट के लिए उपलब्ध है.
showValueLabels boolean सही 'सही' चुनने पर, वैल्यू ऐक्सिस पर लेबल दिखता है. यह सुविधा सिर्फ़ लाइन और बार चार्ट के लिए उपलब्ध है.
singleColumnDisplay नंबर कुछ नहीं सिर्फ़ तय किए गए डेटा कॉलम को रेंडर करता है. यह संख्या, टेबल में शून्य-आधारित इंडेक्स है. यहां शून्य पहला डेटा कॉलम है. एक कॉलम के लिए असाइन किया गया रंग, सभी कॉलम को रेंडर करने पर एक जैसा होता है. इसे पाई या मैप चार्ट के साथ इस्तेमाल नहीं किया जा सकता.
title स्ट्रिंग स्ट्रिंग खाली है चार्ट का टाइटल. अगर इसके बारे में नहीं बताया गया है, तो कोई टाइटल नहीं दिखाया जाएगा. मिलता-जुलता चार्ट पैरामीटर chtt है.
valueLabelsInterval नंबर ऑटो वह इंटरवल जिस पर वैल्यू ऐक्सिस लेबल दिखाना है. उदाहरण के लिए, अगर min 0, max, 100, और valueLabelsInterval 20 है, तो चार्ट में ऐक्सिस लेबल (0, 20, 40, 60, 80 100) दिखेंगे.
चौड़ाई नंबर 400 चार्ट की चौड़ाई, पिक्सल में. अगर यह वैल्यू तय की गई रेंज में नहीं है या सही रेंज में नहीं है, तो शामिल एलिमेंट की चौड़ाई का इस्तेमाल किया जाता है. अगर वह तय सीमा से बाहर भी है, तो डिफ़ॉल्ट चौड़ाई का इस्तेमाल किया जाएगा.

तरीके

तरीका रिटर्न टाइप ब्यौरा
draw(data, options) कोई नहीं मैप बनाता है.
getImageUrl() String चार्ट का अनुरोध करने के लिए इस्तेमाल किए गए Google Chart API का यूआरएल दिखाता है. ध्यान दें कि इसमें 2,000 से ज़्यादा वर्ण हो सकते हैं. ज़्यादा जानकारी के लिए, Google Chart API देखें.

इवेंट

अगर enableEvents प्रॉपर्टी को 'सही है' पर सेट किया जाता है, तो इस्तेमाल करने वाले चार्ट, नीचे दी गई टेबल में लिस्ट किए गए, उपयोगकर्ता इवेंट के इवेंट दिखाएंगे. ये सभी इवेंट इन प्रॉपर्टी के साथ event ऑब्जेक्ट दिखाते हैं:

  • type - इवेंट का टाइप दिखाने वाली स्ट्रिंग.
  • region - उस क्षेत्र का आईडी जिस पर असर पड़ा है. उपलब्ध नामों की सूची देखने के लिए, रॉ चार्ट टाइप में chof=json पैरामीटर जोड़ें. ज़्यादा जानकारी के लिए, chof=json देखें.
नाम ब्यौरा टाइप वैल्यू
error यह तब ट्रिगर होता है, जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है. आईडी, मैसेज
onmouseover तब ट्रिगर होता है, जब उपयोगकर्ता किसी चार्ट एलिमेंट पर माउस रखता है. "माउसओवर"
onmouseout तब ट्रिगर होता है, जब उपयोगकर्ता किसी चार्ट एलिमेंट से दूर होता है. "माउसआउट"
onclick यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता किसी चार्ट के एलिमेंट पर क्लिक करता है.

"क्लिक करें"

किन चार्ट में इवेंट दिखाए जा सकते हैं?

chof=json पैरामीटर के साथ काम करने वाले किसी भी चार्ट में थ्रोइंग इवेंट की सुविधा काम करती है. इसका मतलब है कि खास चार्ट को छोड़कर सभी चार्ट, जैसे कि क्यूआर कोड.

इवेंट हैंडलिंग का उदाहरण

यहां एक बार का उदाहरण दिया गया है, जो माउस क्लिक को रिकॉर्ड करता है.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

डेटा नीति

डेटा को Google Chart API सेवा को भेजा जाता है.

स्थानीय भाषा में कॉन्टेंट उपलब्ध कराना

यह विज़ुअलाइज़ेशन, Google चार्ट सेवा के साथ काम करने वाले किसी भी स्थानीय भाषा के मुताबिक काम करने की सुविधा देता है.