शाकाहारी चार्ट

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

खास जानकारी

VegaChart उन कई संभावित विज़ुअलाइज़ेशन में से एक है जिसे Vega विज़ुअलाइज़ेशन ग्रामर का इस्तेमाल करके बनाया जा सकता है. यह इंटरैक्टिव विज़ुअलाइज़ेशन डिज़ाइन बनाने, सेव करने, और शेयर करने के लिए जानकारी देने वाली भाषा है. Vega की मदद से आप JSON फ़ॉर्मैट में विज़ुअलाइज़ेशन के विज़ुअल और इंटरैक्टिव व्यवहार के बारे में बता सकते हैं. साथ ही, कैनवस या SVG का इस्तेमाल करके वेब पर आधारित व्यू जनरेट कर सकते हैं.

VegaChart बनाते समय, आपको विकल्पों में Vega विज़ुअलाइज़ेशन व्याकरण में चार्ट बनाने के तरीके के बारे में खास जानकारी शामिल करनी होगी. इस तरह के स्पेसिफ़िकेशन के कुछ उदाहरण नीचे दिए गए हैं. VegaChart के उदाहरण पेज पर ऐसे और भी उदाहरण देखे जा सकते हैं.

ध्यान दें: Google Charts VegaChart किसी भी Vega चार्ट को बना सकता है जिसे आप Vega JSON स्पेसिफ़िकेशन के साथ तय कर सकते हैं (जिसमें उदाहरण गैलरी की सभी चीज़ें शामिल हैं), लेकिन Vega API को कॉल करने की ज़रूरत वाली अतिरिक्त सुविधाएं अभी उपलब्ध नहीं हैं.

एक आसान उदाहरण, बार चार्ट

यहां VegaChart का एक उदाहरण दिया गया है, जो बार चार्ट बनाता है. (मूल उदाहरण, ज़्यादा जानकारी वाला ट्यूटोरियल, और Vega चार्ट एडिटर में बार चार्ट देखें.)

यह Google चार्ट में बार चार्ट बनाने का एक और तरीका है. हालांकि, हम दूसरे बार और कॉलम चार्ट की सभी सुविधाओं को इस Vegaचार्ट के आधार पर लागू करने की नई सुविधा में इंटिग्रेट करने की योजना बना रहे हैं.

इस उदाहरण में, ध्यान दें कि 'डेटा' विकल्प को दिए गए विकल्प से बदल दिया गया है. इसमें 'टेबल' नाम के एक अन्य डेटा ऑब्जेक्ट के लिए, ड्रॉ कॉल से मिले 'डेटाटेबल' का इस्तेमाल 'सोर्स' के तौर पर किया जाता है. साथ ही, Vega की बाकी स्पेसिफ़िकेशन में 'टेबल' का इस्तेमाल किया जाता है. 

  'data': [{'name': 'table', 'source': 'datatable'}],


<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

        const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

            'data': [{'name': 'table', 'source': 'datatable'}],

            "signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

            "scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

            "axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

            "marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 700px; height: 250px;"></div>
  </body>

</html>

लोड हो रहा है

google.charts.load पैकेज का नाम "vegachart" है.

google.charts.load("current", {packages: ["vegachart"]});

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

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

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

Dataटेबल (या DataView) का इस्तेमाल करके, डेटा को VegaChart में उसी तरह पास किया जा सकता है जिस तरह दूसरे Google चार्ट में किया जाता है. मुख्य अंतर यह है कि कॉलम के क्रम के आधार पर यह तय नहीं किया जाता कि उनका इस्तेमाल कैसे किया जाए. VegaChart, हर कॉलम के आईडी पर निर्भर करता है. वह आईडी, आपके चुने गए Vega विज़ुअलाइज़ेशन के लिए उम्मीद के मुताबिक होता है. उदाहरण के लिए, नीचे दिया गया DataTable, उन कॉलम के साथ बनाया गया है जिनमें 'category' और 'amount' के लिए आईडी हैं. साथ ही, इन कॉलम का रेफ़रंस देने के लिए, 'Vega' विकल्प में उसी आईडी का इस्तेमाल किया गया है.

DataTable के साथ
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
        ]);

        const options = {
          'vega': {
            ...
            // Here we create the Vega data object named 'datatable',
            // which will be passed in via the draw() call with a DataTable.
            'data': {'name': 'datatable'},

            'scales': [
              {
                'name': 'yscale',
                // Here is an example of how to use the 'amount' field from 'datatable'.
                'domain': {'data': 'datatable', 'field': 'amount'},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);
Vega के इनलाइन डेटा के साथ
        // A DataTable is required, but it may be empty.
        const dataTable = new google.visualization.DataTable();
        const options = {
          'vega': {
            // Here the data is specified inline in the Vega specification.
            "data": [
              {
               "name": "table",
                "values": [
                  {"category": "A", "amount": 28},
                  {"category": "B", "amount": 55},
                  {"category": "C", "amount": 43},
                ]
              }
            ],

            'scales': [
              {
                'name': 'yscale',
                // Here is how Vega normally uses the 'amount' field from 'table'.
                "domain": {"data": "table", "field": "category"},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

हालांकि, इस तरह से VegaChart में इस तरह का सिर्फ़ एक DataTable पास किया जा सकता है, जबकि कुछ Vega चार्ट में एक से ज़्यादा डेटा टेबल की ज़रूरत होती है. हम इस समस्या को आने वाले समय में Google Charts में होने वाली रिलीज़ में ठीक करेंगे.

इस दौरान, अगर आपको कोई अतिरिक्त डेटा इस्तेमाल करना है, तो उसे 'vega' 'data' विकल्प में इनलाइन करें या यूआरएल से लोड करके तय करें. दोनों के उदाहरण नीचे दिए गए हैं.

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

नाम
chartArea

चार्ट एरिया के प्लेसमेंट और साइज़ को कॉन्फ़िगर करने के लिए, सदस्यों वाला एक ऑब्जेक्ट (जहां चार्ट खुद ड्रॉ किया जाता है). इसमें ऐक्सिस और लेजेंड शामिल नहीं हैं. दो फ़ॉर्मैट इस्तेमाल किए जा सकते हैं: कोई संख्या या संख्या के बाद %. सामान्य संख्या पिक्सल में वैल्यू होती है. पहले संख्या के बाद % का मतलब प्रतिशत होता है. उदाहरण: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
chartArea.bottom

निचले बॉर्डर से चार्ट को कितनी दूर तक खींचना है.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.left

बाएं बॉर्डर से चार्ट को कितनी दूर तक खींचना है.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.right

दाएं बॉर्डर से चार्ट को कितनी दूर तक खींचना है.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.top

ऊपरी बॉर्डर से चार्ट को कितनी दूर तक खींचना है.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.width

चार्ट एरिया की चौड़ाई.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
chartArea.height

चार्ट क्षेत्र की ऊंचाई.

टाइप: संख्या या स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
ऊंचाई

चार्ट की ऊंचाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
चौड़ाई

चार्ट की चौड़ाई, पिक्सल में.

टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई

तरीके

तरीका
draw(data, options)

चार्ट बनाता है. ready इवेंट चालू होने के बाद ही, चार्ट में दूसरे तरीकों के कॉल स्वीकार किए जाते हैं. Extended description.

सामान लौटाने का तरीका: कोई नहीं
getAction(actionID)

अनुरोध किए गए actionID के साथ टूलटिप ऐक्शन ऑब्जेक्ट दिखाता है.

रिटर्न टाइप: ऑब्जेक्ट
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

चार्ट एरिया की ऊंचाई
cli.getBoundingBox('chartarea').height
बार या कॉलम चार्ट की पहली सीरीज़ में तीसरे बार की चौड़ाई
cli.getBoundingBox('bar#0#2').width
पाई चार्ट के पांचवें खूंटी (वेज) का बाउंड्री बॉक्स
cli.getBoundingBox('slice#4')
किसी वर्टिकल (जैसे, कॉलम) चार्ट के चार्ट डेटा का बाउंडिंग बॉक्स:
cli.getBoundingBox('vAxis#0#gridline')
किसी हॉरिज़ॉन्टल (जैसे, बार) चार्ट के चार्ट डेटा का बाउंडिंग बॉक्स:
cli.getBoundingBox('hAxis#0#gridline')

वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: ऑब्जेक्ट
getChartAreaBoundingBox()

चार्ट के कॉन्टेंट की बाईं, ऊपर, चौड़ाई, और ऊंचाई वाला ऑब्जेक्ट दिखाता है (जैसे, लेबल और लेजेंड को छोड़कर):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: ऑब्जेक्ट
getChartLayoutInterface()

वह ऑब्जेक्ट दिखाता है जिसमें चार्ट की ऑनस्क्रीन प्लेसमेंट और उसके एलिमेंट के बारे में जानकारी होती है.

लौटाए गए ऑब्जेक्ट पर इन तरीकों को कॉल किया जा सकता है:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: ऑब्जेक्ट
getHAxisValue(xPosition, optional_axis_index)

xPosition पर हॉरिज़ॉन्टल डेटा वैल्यू दिखाता है, जो चार्ट कंटेनर के बाएं किनारे से पिक्सल ऑफ़सेट होता है. नकारात्मक हो सकता है.

उदाहरण: chart.getChartLayoutInterface().getHAxisValue(400).

चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: नंबर
getImageURI()

चार्ट को इमेज यूआरआई के तौर पर क्रम से दिखाता है.

चार्ट बनाने के बाद इसे कॉल करें.

PNG चार्ट प्रिंट करना देखें.

रिटर्न टाइप: स्ट्रिंग
getSelection()

चुनी गई चार्ट इकाइयों का कलेक्शन दिखाता है. इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई चुनी जा सकती है. Extended description .

रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
getVAxisValue(yPosition, optional_axis_index)

yPosition पर वर्टिकल डेटा वैल्यू दिखाता है, जो चार्ट कंटेनर के ऊपरी किनारे से नीचे की ओर एक पिक्सल ऑफ़सेट होता है. नकारात्मक हो सकता है.

उदाहरण: chart.getChartLayoutInterface().getVAxisValue(300).

चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: नंबर
getXLocation(dataValue, optional_axis_index)

चार्ट के कंटेनर के बाएं किनारे के संबंध में dataValue का पिक्सल x-कोऑर्डिनेट दिखाता है.

उदाहरण: chart.getChartLayoutInterface().getXLocation(400).

चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: नंबर
getYLocation(dataValue, optional_axis_index)

चार्ट के कंटेनर के ऊपरी किनारे के हिसाब से dataValue का पिक्सल y-कोऑर्डिनेट दिखाता है.

उदाहरण: chart.getChartLayoutInterface().getYLocation(300).

चार्ट बनाने के बाद इसे कॉल करें.

रिटर्न टाइप: नंबर
removeAction(actionID)

चार्ट से, अनुरोध की गई actionID वाली टूलटिप ऐक्शन को हटा देता है.

सामान लौटाने का तरीका: none
setAction(action)

उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर, होने वाली टूलटिप कार्रवाई सेट करता है.

setAction वाला तरीका, किसी ऑब्जेक्ट को अपने कार्रवाई पैरामीटर के तौर पर लेता है. इस ऑब्जेक्ट को तीन प्रॉपर्टी बतानी चाहिए: id— सेट की जा रही कार्रवाई का आईडी, text —वह टेक्स्ट जो कार्रवाई के लिए टूलटिप में दिखना चाहिए और action — फ़ंक्शन जो उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर चलना चाहिए.

चार्ट के draw() तरीके का इस्तेमाल करने से पहले, टूलटिप के लिए किसी भी या सभी कार्रवाइयों को सेट करना ज़रूरी है. ज़्यादा जानकारी.

सामान लौटाने का तरीका: none
setSelection()

चार्ट में मौजूद, दी गई इकाइयों को चुनता है. चुने गए पिछले किसी भी आइटम को रद्द कर देगा. इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई चुनी जा सकती है. Extended description .

सामान लौटाने का तरीका: कोई नहीं
clearChart()

चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है.

सामान लौटाने का तरीका: कोई नहीं

इवेंट

इन इवेंट को इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, बेसिक इंटरैक्टिविटी, इवेंट मैनेज करना, और इवेंट ट्रिगर करना देखें.

नाम
animationfinish

ट्रांज़िशन ऐनिमेशन पूरा होने पर ट्रिगर होता है.

प्रॉपर्टी: कोई प्रॉपर्टी नहीं
click

जब कोई उपयोगकर्ता, चार्ट में क्लिक करता है, तब ट्रिगर होता है. इनका इस्तेमाल यह पहचानने के लिए किया जा सकता है कि टाइटल, डेटा एलिमेंट, लेजेंड एंट्री, ऐक्सिस, ग्रिडलाइन या लेबल को कब क्लिक किया जाता है.

प्रॉपर्टी: targetID
error

यह तब ट्रिगर होता है, जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है.

प्रॉपर्टी: आईडी, मैसेज
legendpagination

जब उपयोगकर्ता लेजेंड पेज पर नंबर डालने वाले तीर के निशान पर क्लिक करता है, तब ट्रिगर होता है. यह मौजूदा लेजेंड की शून्य-आधारित पेज इंडेक्स और पेजों की कुल संख्या को वापस पास करता है.

प्रॉपर्टी:currentPageIndex, totalPages
onmouseover

यह तब ट्रिगर होता है, जब कोई उपयोगकर्ता किसी विज़ुअल इकाई पर माउस रखता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है.

प्रॉपर्टी: पंक्ति, कॉलम
onmouseout

यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई से दूर होता है. इससे जुड़े डेटा टेबल एलिमेंट की पंक्ति और कॉलम के इंडेक्स को पास करता है.

प्रॉपर्टी: पंक्ति, कॉलम
ready

यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने और कॉल के तरीकों को ड्रॉ करने के बाद, उन्हें ड्रॉ करना है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट ट्रिगर होने के बाद ही उन्हें कॉल करना चाहिए.

प्रॉपर्टी: कोई प्रॉपर्टी नहीं
select

तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. चुनी गई जानकारी के बारे में जानने के लिए, getSelection() पर कॉल करें.

प्रॉपर्टी: कोई प्रॉपर्टी नहीं

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.