अहम जानकारी: 20 अप्रैल, 2012 से Google चार्ट टूल के 'इमेज चार्ट' वाले हिस्से को आधिकारिक तौर पर बंद कर दिया गया है. यह खाता, सुविधा बंद करने की हमारी नीति के हिसाब से काम करता रहेगा.
खास जानकारी
एक या एक से ज़्यादा स्पार्कलाइन, जिन्हें Google Charts API का इस्तेमाल करके इमेज के साथ रेंडर किया जाता है. इमेज, एचटीएमएल टेबल में शामिल होती हैं.
उदाहरण
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["imagesparkline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Revenue', 'Licenses'],
[435, 132],
[438, 131],
[512, 137],
[460, 142],
[491, 140],
[487, 139],
[552, 147],
[511, 146],
[505, 151],
[509, 149]
]);
var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));
chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 120px; height: 40px;"></div>
</body>
</html>
लोड हो रहा है
google.charts.load पैकेज का नाम "imagesparkline" है.
google.charts.load("current", {packages: ["imagesparkline"]});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.ImageSparkLine है.
var visualization = new google.visualization.ImageSparkLine(container);
डेटा फ़ॉर्मैट
कॉलम की संख्या. सभी कॉलम में नंबर होने चाहिए. हर कॉलम को एक स्पार्कलाइन के तौर पर दिखाया जाता है.
कॉन्फ़िगरेशन के विकल्प
| नाम | टाइप | डिफ़ॉल्ट | ब्यौरा |
|---|---|---|---|
| रंग | स्ट्रिंग | सभी चार्ट में इस्तेमाल करने के लिए रंग तय करता है.
#rrggbb फ़ॉर्मैट में स्ट्रिंग. उदाहरण के लिए: '#00cc00'.
इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब colors विकल्प तय नहीं किया गया हो. |
|
| कलर | स्ट्रिंग का कलेक्शन | डिफ़ॉल्ट रंग | डेटा कॉलम में इस्तेमाल करने के लिए रंग. स्ट्रिंग का कलेक्शन, जहां हर एलिमेंट #rrggbb फ़ॉर्मैट में स्ट्रिंग होती है. उदाहरण के लिए: '#00cc00'. कलर i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है. अगर कलर की संख्या, कॉलम की संख्या से कम है, तो रंग चुनने की प्रोसेस पूरी हो जाएगी. |
| भरें | boolean | false | अगर सही है, तो लाइन के नीचे के इलाके को रंग से भर देगा. |
| ऊंचाई | नंबर | कंटेनर की ऊंचाई | पिक्सल में इमेज की ऊंचाई. |
| labelPosition | स्ट्रिंग | कुछ नहीं | लेबल की पोज़िशन. 'none', 'left', 'right' वैल्यू ही डाली जा सकती हैं. |
| ज़्यादा से ज़्यादा | नंबर का कलेक्शन | हर स्पार्कलाइन की ज़्यादा से ज़्यादा डेटा वैल्यू | हर स्पार्कलाइन की डेटा वैल्यू रेंज के लिए, सबसे ज़्यादा वैल्यू. कलेक्शन का इंडेक्स, DataTable के कॉलम इंडेक्स से मेल खाना चाहिए. अगर सभी वैल्यू शून्य हैं, तो यह सीरीज़ में सबसे ज़्यादा वैल्यू होगी. |
| कम से कम | नंबर का कलेक्शन | हर स्पार्कलाइन की कम से कम डेटा वैल्यू | हर स्पार्कलाइन की डेटा वैल्यू रेंज के लिए, सबसे कम वैल्यू. कलेक्शन का इंडेक्स, DataTable के कॉलम इंडेक्स से मेल खाना चाहिए. अगर सभी वैल्यू शून्य हैं, तो यह सीरीज़ में सबसे कम वैल्यू होगी. |
| showAxisLines | boolean | सही | अगर सही है, तो ऐक्सिस लाइनें दिखाई जाती हैं. अगर गलत है, तो ऐसा नहीं होता है और showValueLabels के लिए डिफ़ॉल्ट तौर पर 'गलत' है. |
| showValueLabels | boolean | सही है, सिर्फ़ तब जब showAxisLines गलत हो. | अगर सही है, तो वैल्यू ऐक्सिस लेबल दिखाए जाते हैं. |
| title | स्ट्रिंग का कलेक्शन | कोई टाइटल नहीं दिखाया गया है | हर स्पार्कलाइन के लिए इस्तेमाल होने वाला टाइटल. |
| चौड़ाई | नंबर | कंटेनर की चौड़ाई | चार्ट की चौड़ाई, पिक्सल में. |
| लेआउट | स्ट्रिंग | 'व' | वर्टिकल या हॉरिज़ॉन्टल लेआउट: वर्टिकल के लिए 'v', हॉरिज़ॉन्टल के लिए 'h'. |
तरीके
| तरीका | रिटर्न टाइप | ब्यौरा |
|---|---|---|
draw(data, options) |
कुछ नहीं | चार्ट बनाता है. |
getSelection() |
चुने गए एलिमेंट की कलेक्शन | यह फ़ंक्शन चुने गए चार्ट के इंडेक्स, ऑब्जेक्ट के कलेक्शन के तौर पर दिखाता है. हर ऑब्जेक्ट में एक कॉलम प्रॉपर्टी होती है, जिसमें चुनी गई स्पार्कलाइन का कॉलम नंबर होता है. चुने गए एक से ज़्यादा कॉलम दिखाए जा सकते हैं. |
setSelection(selection) |
कुछ नहीं | बताई गई स्पार्कलाइन को चुनता है और ऐसी किसी भी स्पार्कलाइन से चुने हुए का निशान हटा देता है जिसकी जानकारी नहीं दी गई है. चुना गया डेटा, ऑब्जेक्ट का कलेक्शन है. हर प्रॉपर्टी में संख्या वाली column प्रॉपर्टी है,
जो कि चुनी गई स्पार्कलाइन का इंडेक्स है. ज़्यादा जानकारी के लिए, setSelection() देखें. |
इवेंट
| नाम | ब्यौरा | प्रॉपर्टी |
|---|---|---|
| चुनें | स्टैंडर्ड इवेंट चुनें. | कोई नहीं |
डेटा नीति
कृपया Chart API को लॉग करने की नीति देखें.