अहम जानकारी: Google के चार्ट टूल के इमेज चार्ट वाले हिस्से को 20 अप्रैल, 2012 से आधिकारिक तौर पर हटा दिया गया था. यह हमारी समर्थन रोकने की नीति के मुताबिक काम करता रहेगा.
खास जानकारी
जेनरिक इमेज चार्ट एक ऐसा रैपर होता है जो Google चार्ट एपीआई के बनाए गए सभी चार्ट के लिए जेनरिक रैपर होता है. इस विज़ुअलाइज़ेशन का इस्तेमाल करने से पहले, कृपया चार्ट एपीआई दस्तावेज़ पढ़ें. ध्यान दें कि इस विज़ुअलाइज़ेशन का इस्तेमाल करके 16 हज़ार तक डेटा भेजा जा सकता है, जबकि 'चार्ट एपीआई' को किए जाने वाले डायरेक्ट कॉल में यह सीमा 2 हज़ार नहीं होती.
सभी डेटा को DataTable या DataView का इस्तेमाल करके चार्ट में पास किया जाता है. साथ ही, कुछ लेबल, डेटा टेबल में कॉलम के तौर पर पास किए जाते हैं.
चार्ट चार्ट के दूसरे सभी यूआरएल पैरामीटर (chd को छोड़कर) विकल्प के तौर पर पास किए जाते हैं.
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 नंबर का इस्तेमाल किया जा सकता है. यह न्यूमेरिक फ़ॉर्मैट ही काम करता है.
ध्यान दें: आपको डेटा या विकल्पों के तौर पर पास की गई किसी भी स्ट्रिंग वैल्यू को यूआरएल-कोड नहीं करना चाहिए.
मैप चार्ट
मैप चार्ट दो ज़रूरी कॉलम वाली डेटा टेबल लेता है:
- पहला कॉलम - [string] देश या राज्य/प्रांत कोड.
- दूसरा कॉलम - [number] उस देश या राज्य का मान.
ज़्यादा जानकारी के लिए मैप चार्ट दस्तावेज़ देखें.
नॉन-मैप चार्ट
नॉन-मैप चार्ट, दो वैकल्पिक कॉलम (एक शुरुआत में, एक आखिर में), और इनके बीच एक या ज़्यादा डेटा कॉलम वाली डेटा टेबल लेते हैं:
- पहला कॉलम - [ज़रूरी नहीं, स्ट्रिंग] हर एंट्री, X ऐक्सिस पर इस्तेमाल किए गए लेबल के बारे में बताती है. यह उन चार्ट के लिए होती है जो
chlयाchxlपैरामीटर के साथ काम करते हैं. - अगले कॉलम - न्यूमेरिक कॉलम की संख्या, हर एक डेटा सीरीज़ को दिखाता है.
- आखिरी कॉलम - [ज़रूरी नहीं, स्ट्रिंग] डेटा कॉलम के बाद कितने भी स्ट्रिंग कॉलम हों, जहां हर एंट्री उन चार्ट के लिए डेटा पॉइंट लेबल दिखाती है जो इसके साथ काम करते हैं. इस कॉलम का इस्तेमाल करने के लिए, आपको
annotationColumnsविकल्प चुनना होगा.
चार्ट के टाइप के हिसाब से, डेटा अलग-अलग तरीके से दिखाया जाएगा. अपने चार्ट के लिए दस्तावेज़ देखें.
कॉलम इंडेक्स के बारे में जानकारी: जेनरिक इमेज चार्ट विज़ुअलाइज़ेशन में, टेबल को चार्ट एपीआई सेवा को भेजने से पहले, डेटा टेबल से स्ट्रिंग कॉलम हटा दिए जाते हैं. इसलिए, इस पेज पर दिए गए विकल्पों, तरीकों, और
इवेंट के कॉलम इंडेक्स में, इंडेक्स की संख्या में मौजूद स्ट्रिंग कॉलम शामिल होते हैं.
हालांकि, चार्ट एपीआई सेवा (उदाहरण के लिए, chm विकल्प) से मैनेज किए जाने वाले किसी भी विकल्प के कॉलम इंडेक्स, इंडेक्स की संख्या में मौजूद स्ट्रिंग कॉलम को अनदेखा करते हैं.
कॉन्फ़िगरेशन विकल्प
इस विज़ुअलाइज़ेशन के लिए नीचे दिए गए विकल्प तय किए गए हैं. उन्हें विज़ुअलाइज़ेशन के draw() तरीके में पास किए गए विकल्प ऑब्जेक्ट में तय करें.
सभी तरह के चार्ट के लिए, नीचे दिए गए सभी विकल्प काम नहीं करते. अपने स्टैटिक इमेज चार्ट के लिए दस्तावेज़ देखें. किसी भी चार्ट एपीआई यूआरएल पैरामीटर को विकल्प के तौर पर पास किया जा सकता है. उदाहरण के लिए, चार्ट विज़ुअलाइज़ेशन से यूआरएल पैरामीटर chg=50,50, इस तरह तय किया जाएगा: options['chg'] = '50,50'.
रंगों के बारे में जानकारी: रंग के विकल्प, जैसे कि colors, color, और backgroundColor को चार्ट एपीआई के कलर फ़ॉर्मैट में बताया गया है.
यह फ़ॉर्मैट #RRGGBB फ़ॉर्मैट जैसा ही होता है. हालांकि, इसमें पारदर्शिता के लिए वैकल्पिक चौथा हेक्साडेसिमल नंबर शामिल होता है. लोगों के लिए उपलब्ध रंग, जैसे कि 'लाल', 'हरा', 'नीला' वगैरह इस्तेमाल नहीं किए जा सकते. चार्ट एपीआई कलर
फ़ॉर्मैट में शुरू का # सिंबल शामिल नहीं है. हालांकि, जेनरिक इमेज चार्ट विज़ुअलाइज़ेशन के विकल्प, # या उसके बिना कलर कोड स्वीकार करेंगे.
| नाम | टाइप | डिफ़ॉल्ट | जानकारी |
|---|---|---|---|
| एनोटेशन कॉलम | श्रेणी{0}<object> | कोई नहीं | अलग-अलग तरह के चार्ट के लिए, डेटा पॉइंट लेबल. यह ऑब्जेक्ट के कलेक्शन का एक हिस्सा है. हर चार्ट में, चार्ट के लिए एक डेटा पॉइंट को फ़ॉर्मैट किया गया लेबल असाइन किया जाता है. यह विकल्प सिर्फ़ उन चार्ट के लिए उपलब्ध है जो डेटा पॉइंट के साथ काम करते हैं (लिंक टॉपिक देखें, ताकि यह जानकारी मिल सके कि डेटा इकट्ठा करने के तरीके का इस्तेमाल कैसे किया जाता है). डेटा टेबल में कम से कम एक स्ट्रिंग लेबल कॉलम होना चाहिए. श्रेणी के हर ऑब्जेक्ट में ये प्रॉपर्टी होती हैं:
उदाहरण - इस स्निपेट में एक काले रंग का, 12 पिक्सल का टेक्स्ट
लेबल बताता है, जिसमें टेक्स्ट 0 कॉलम से लिया गया है.
साथ ही, इसे उसी पंक्ति के कॉलम 2
के डेटा पॉइंट को असाइन किया गया है: |
| बैकग्राउंड का रंग | स्ट्रिंग | '#FFFFFF' (सफ़ेद) | चार्ट एपीआई कलर फ़ॉर्मैट में चार्ट के लिए बैकग्राउंड का रंग. |
| रंग | स्ट्रिंग | ऑटो | सभी सीरीज़ में इस्तेमाल करने के लिए एक बेस कलर बताता है; हर सीरीज़, बताए गए रंग
का ग्रेड होगा. कलर को चार्ट एपीआई कलर फ़ॉर्मैट में बताया जाता है.
अगर colors बताया गया है, तो अनदेखा किया जाता है. |
| कलर | श्रेणी<string> | ऑटो | इसका इस्तेमाल करके, हर डेटा सीरीज़ के लिए खास रंग तय किए जा सकते हैं. कलर को चार्ट एपीआई कलर फ़ॉर्मैट में दिखाया जाता है.
रंग i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है,
अगर रंगों से ज़्यादा डेटा कॉलम हैं, तो
उसे शुरुआती हिस्से में रैप किया जाता है. अगर सभी सीरीज़ के लिए
एक ही रंग के वैरिएशन स्वीकार किए जाते हैं, तो
color विकल्प का इस्तेमाल करें. |
| इवेंट चालू करें | बूलियन | false | इससे चार्ट उपयोगकर्ता के ट्रिगर किए गए इवेंट, जैसे कि क्लिक या माउस को फेंकता है. सिर्फ़ कुछ खास तरह के चार्ट के लिए काम करता है. नीचे इवेंट देखें. |
| भरें | बूलियन | false | सही होने पर, हर पंक्ति के नीचे की जगह को भरें. सिर्फ़ लाइन चार्ट के लिए उपलब्ध. |
| firstHiddenColumn | संख्या | कोई नहीं | डेटा कॉलम इंडेक्स. नीचे दिए गए कॉलम के साथ-साथ नीचे दिए गए सभी कॉलम का इस्तेमाल, चार्ट की मुख्य सीरीज़ के एलिमेंट (जैसे कि लाइन चार्ट पर लाइनें या बार चार्ट पर बार) को ड्रॉ करने के लिए किया जाएगा. इसके बजाय, इन्हें मार्कर और अन्य एनोटेशन के डेटा के तौर पर इस्तेमाल किया जाएगा. ध्यान दें कि इंडेक्स की संख्या में स्ट्रिंग कॉलम शामिल होते हैं. |
| ऊंचाई | संख्या | 200 | चार्ट की ऊंचाई, पिक्सल में. अगर कोई स्वीकार्य सीमा में नहीं है या मान्य नहीं है, तो शामिल तत्व की ऊंचाई का इस्तेमाल किया जाता है. अगर यह तय सीमा से बाहर भी है, तो डिफ़ॉल्ट ऊंचाई का इस्तेमाल किया जाएगा. |
| लेबल | स्ट्रिंग | 'कोई नहीं' | [पाई चार्ट सिर्फ़] हर स्लाइस के लिए दिखाया जाने वाला लेबल (अगर कोई है तो). इन वैल्यू में से चुनें:
|
| लेजेंड | स्ट्रिंग | 'दाएं' | चार्ट में कहां दिखाया गया है. इनमें से एक के बारे में बताएं: 'सबसे ऊपर', 'सबसे नीचे', 'बायां', 'दायां', 'कोई नहीं'. इसमें ऐसे चार्ट शामिल नहीं किए जाते हैं जिनमें लेजेंड शामिल नहीं होते हैं, जैसे कि मैप चार्ट. |
| ज़्यादा से ज़्यादा | संख्या | ज़्यादा से ज़्यादा डेटा वैल्यू | स्केल पर दिखाई गई ज़्यादा से ज़्यादा वैल्यू. पाई चार्ट के लिए अनदेखा किया गया. डिफ़ॉल्ट रूप से, ज़्यादा से ज़्यादा डेटा वैल्यू होती है. हालांकि, बार चार्ट में डिफ़ॉल्ट रूप से, ज़्यादा से ज़्यादा डेटा वैल्यू होती है. टेबल में एक से ज़्यादा डेटा कॉलम होने पर, इसे बार चार्ट के लिए अनदेखा कर दिया जाता है. |
| मि | संख्या | मिमिम डेटा वैल्यू | स्केल पर दिखाया गया कम से कम मान. पाई चार्ट के लिए अनदेखा किया गया. बार चार्ट को छोड़कर, डिफ़ॉल्ट तौर पर, डेटा की कम से कम वैल्यू डिफ़ॉल्ट होती है. यहां डिफ़ॉल्ट रूप से, शून्य डेटा मौजूद होता है. टेबल में एक से ज़्यादा डेटा कॉलम होने पर, इसे बार चार्ट के लिए अनदेखा कर दिया जाता है. |
| कैटगरी के लेबल दिखाएं | बूलियन | true | लेबल, कैटगरी (यानी लाइन) ऐक्सिस पर दिखने चाहिए या नहीं. सिर्फ़ लाइन और बार चार्ट के लिए उपलब्ध है. |
| ShowValueLabel | बूलियन | true | सही, वैल्यू ऐक्सिस पर लेबल दिखाता है. सिर्फ़ लाइन और बार चार्ट के लिए उपलब्ध है. |
| सिंगल कॉलम वाला डिसप्ले | संख्या | कोई नहीं | सिर्फ़ तय किए गए डेटा कॉलम को रेंडर करता है. यह टेबल, टेबल में शून्य पर आधारित इंडेक्स है. यहां, पहला डेटा कॉलम शून्य होता है. एक कॉलम को असाइन किया गया रंग वही है जो सभी कॉलम को रेंडर करने के लिए सेट किया गया था. पाई या मैप चार्ट के साथ इस्तेमाल नहीं किया जा सकता. |
| शीर्षक | स्ट्रिंग | खाली स्ट्रिंग | चार्ट का शीर्षक. अगर कोई भी वैल्यू मौजूद नहीं है, तो कोई शीर्षक नहीं दिखाया जाएगा. मिलते-जुलते चार्ट का पैरामीटर chtt है. |
| valueLabelInterval | संख्या | ऑटो | वह अंतराल जहां वैल्यू ऐक्सिस के लेबल दिखाने हैं. उदाहरण के लिए, अगर min, 0, max 100, और valueLabelsInterval 20 है, तो चार्ट में ऐक्सिस लेबल 0, 20, 40, 60, 80 100 दिखेंगे. |
| width | संख्या | 400 | चार्ट की चौड़ाई, पिक्सल में. अगर अनुपलब्ध सीमा या स्वीकार्य सीमा में नहीं है, तो शामिल तत्व की चौड़ाई का उपयोग किया जाता है. अगर वह तय सीमा से बाहर भी है, तो डिफ़ॉल्ट चौड़ाई का इस्तेमाल किया जाएगा. |
तरीके
| तरीका | रिटर्न टाइप | जानकारी |
|---|---|---|
draw(data, options) |
कभी नहीं | मैप बनाता है. |
getImageUrl() |
स्ट्रिंग | चार्ट का अनुरोध करने के लिए इस्तेमाल किए जाने वाले Google चार्ट एपीआई यूआरएल को दिखाता है. ध्यान रखें कि यह 2,000 वर्णों से ज़्यादा का हो सकता है. ज़्यादा जानकारी के लिए, Google चार्ट एपीआई देखें. |
इवेंट
अगर 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 चार्ट एपीआई सेवा पर भेजा जाता है.
स्थानीय भाषा के अनुसार
इस विज़ुअलाइज़ेशन में, स्थानीय भाषा में अनुवाद करने वाली Google चार्ट सेवा के साथ काम किया जाता है.