कैलेंडर चार्ट

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

खास जानकारी

ध्यान दें: JavaScript में महीनों की गिनती शून्य से शुरू होती है: जनवरी 0 है, फ़रवरी 1 है, और दिसंबर 11 दिसंबर है. अगर आपको लगता है कि एक महीने में आपका कैलेंडर चार्ट बंद दिख रहा है, तो ऐसा इसलिए है.

कैलेंडर चार्ट एक ऐसा विज़ुअलाइज़ेशन है जिसका इस्तेमाल लंबे समय में हुई गतिविधि को दिखाने के लिए किया जाता है, जैसे कि महीने या साल. इनका सबसे सही इस्तेमाल तब किया जाता है, जब यह दिखाना हो कि हफ़्ते के अलग-अलग दिन या समय के साथ प्रॉडक्ट की संख्या में क्या बदलाव हो रहा है.

ऐसा हो सकता है कि आने वाले समय में Google चार्ट की रिलीज़ में, कैलेंडर चार्ट में बड़े बदलाव किए जा रहे हों.

कैलेंडर चार्ट, ब्राउज़र में SVG या VML का इस्तेमाल करके रेंडर किए जाते हैं. जो भी उपयोगकर्ता के ब्राउज़र के लिए सही हो. जब भी उपयोगकर्ता डेटा पर कर्सर घुमाता है, तब Google के सभी चार्ट की तरह ही कैलेंडर चार्ट में टूलटिप दिखती हैं. और क्रेडिट जहां क्रेडिट बकाया है: हमारा कैलेंडर चार्ट D3 कैलेंडर विज़ुअलाइज़ेशन से प्रेरित था.

एक आसान उदाहरण

मान लें कि हम यह दिखाना चाहते थे कि पूरे सीज़न में स्पोर्ट्स टीम की अटेंडेंस में क्या उतार-चढ़ाव हुआ. कैलेंडर चार्ट की मदद से, हम चमक का इस्तेमाल करके वैल्यू दिखा सकते हैं और लोगों को एक नज़र में रुझान देखने की सुविधा दे सकते हैं:

डेटा की वैल्यू देखने के लिए, अलग-अलग दिनों पर कर्सर घुमाएं.

कैलेंडर चार्ट बनाने के लिए, calendar पैकेज लोड करें. इसके बाद, दो कॉलम बनाएं. एक कॉलम, तारीखों के लिए और दूसरा कॉलम की वैल्यू के लिए बनाएं. (पसंद के मुताबिक बनाए गए स्टाइल के लिए एक वैकल्पिक कॉलम, आने वाले समय में 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:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

दिन

कैलेंडर चार्ट का हर वर्ग एक दिन को दिखाता है. फ़िलहाल, डेटा सेल के रंग को पसंद के मुताबिक नहीं बनाया जा सकता. हालांकि, Google चार्ट की अगली रिलीज़ में यह रंग बदल जाएगा.

अगर डेटा की सभी वैल्यू पॉज़िटिव हैं, तो रंग सफ़ेद से नीले रंग के होंगे. इनमें सबसे गहरे नीले रंग का मतलब है कि वैल्यू ज़्यादा से ज़्यादा है. अगर डेटा की वैल्यू नेगेटिव हैं, तो वे नारंगी रंग की दिखेंगी, जैसा कि नीचे दिखाया गया है.

इस कैलेंडर का कोड पहले के कोड जैसा ही है, अंतर सिर्फ़ इतना है कि पंक्तियां इस तरह दिखती हैं:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

calendar.cellSize विकल्प की मदद से, दिनों का साइज़ ("सेल") बदला जा सकता है:

यहां, हमने calendar.cellSize को बदलकर 10 कर दिया है. हमने दिनों को कम करके, साथ ही, पूरे चार्ट को भी कम कर दिया है. 

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

noDataPattern विकल्प की मदद से, बिना डेटा वैल्यू वाले दिनों को पसंद के मुताबिक बनाया जा सकता है:

यहां, हम color को हल्के नीले रंग और backgroundColor को थोड़े गहरे रंग पर सेट करते हैं: 

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

calendar.cellColor की मदद से, सेल के बॉर्डर का रंग, बॉर्डर की चौड़ाई, और अपारदर्शिता को कंट्रोल किया जा सकता है:

आपको स्ट्रोक का ऐसा रंग चुनने में सावधानी बरतनी होगी जिसे monthOutlineColor से अलग दिखाया जाएगा या फिर कम ओपैसिटी को चुनना होगा. यहां ऊपर दिए गए चार्ट के लिए विकल्प दिए गए हैं: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

अगर ऊपर दिए गए चार्ट में किसी दिन पर फ़ोकस किया जाता है, तो बॉर्डर लाल रंग से हाइलाइट होगा. calendar.focusedCellColor विकल्पों की मदद से, उस व्यवहार को कंट्रोल किया जा सकता है: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

हफ़्ते

डिफ़ॉल्ट रूप से, हफ़्ते के दिनों को रविवार से लेकर शनिवार तक के पहले अक्षरों से लेबल किया जाता है. दिनों का क्रम नहीं बदला जा सकता. हालांकि, calendar.daysOfWeek विकल्प की मदद से यह तय किया जा सकता है कि कौनसे अक्षर इस्तेमाल किए जाएं. साथ ही, calendar.dayOfWeekRightSpace की मदद से, हफ़्ते के दिनों और चार्ट के बीच की पैडिंग (जगह) को कंट्रोल किया जा सकता है. साथ ही, calendar.dayOfWeekLabel की मदद से टेक्स्ट की स्टाइल को पसंद के मुताबिक बनाया जा सकता है:

यहां, हम हफ़्ते के लेबल का फ़ॉन्ट बदलते हैं. साथ ही, लेबल और चार्ट के डेटा के बीच 10 पिक्सल की पैडिंग (जगह) रखते हैं, और सोमवार से हफ़्तों की शुरुआत करते हैं. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

महीने

डिफ़ॉल्ट रूप से, महीनों की पहचान गहरे स्लेटी रंग की लाइनों से की जाती है. बॉर्डर को कंट्रोल करने के लिए calendar.monthOutlineColor, लेबल के फ़ॉन्ट को अपनी पसंद के मुताबिक बनाने के लिए calendar.monthLabel, और लेबल पैडिंग में बदलाव करने के लिए calendar.underMonthSpace का इस्तेमाल किया जा सकता है:

हमने लेबल के फ़ॉन्ट को गहरे लाल रंग के 12 पॉइंट वाले Times-Roman के बोल्ड इटैलिक में सेट किया है. इसके अलावा, आउटलाइन को पहले जैसे ही रंग में रखा है और 16 पिक्सल की पैडिंग (जगह) कर दिया है. महीने की इस्तेमाल नहीं की गई आउटलाइन को पहले जैसा ही हल्के रंग में सेट किया गया है. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

साल

कैलेंडर चार्ट में साल हमेशा चार्ट के बाएं किनारे पर दिखाए जाते हैं. calendar.yearLabel और calendar.underYearSpace की मदद से इन्हें अपनी पसंद के मुताबिक बनाया जा सकता है:

हम साल के फ़ॉन्ट को, गहरे हरे रंग के 32pt टाइम्स-रोमन बोल्ड इटैलिक में सेट करते हैं. साथ ही, साल के लेबल और चार्ट के सबसे नीचे के बीच में दस पिक्सल जोड़ते हैं: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

लोड हो रहा है

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

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

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

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

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

पंक्तियां: टेबल की हर पंक्ति एक तारीख को दिखाती है.

कॉलम:

  कॉलम 0 कॉलम 1 ... कॉलम N (ज़रूरी नहीं)
मकसद: तारीख वैल्यू ... वैकल्पिक भूमिकाएं
डेटा टाइप: तारीख, तारीख और समय या दिन का समय नंबर ...
भूमिका: डोमेन डेटा ...
कॉलम की भूमिकाएं (ज़रूरी नहीं) के हिसाब से:

बिलकुल नहीं

बिलकुल नहीं

 ...

 

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

नाम
calendar.cellColor

calendar.cellColor विकल्प की मदद से, कैलेंडर दिन के स्क्वेयर के बॉर्डर को अपनी पसंद के मुताबिक बनाया जा सकता है: 

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
Type: ऑब्जेक्ट
डिफ़ॉल्ट: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

कैलेंडर दिन के वर्गों का आकार:

var options = { calendar: { cellSize: 10 } };
टाइप: पूर्णांक
डिफ़ॉल्ट साइज़: 16
calendar.dayOfWeekLabel

चार्ट में सबसे ऊपर, हफ़्ते के लेबल की फ़ॉन्ट स्टाइल को कंट्रोल करता है:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Type: ऑब्जेक्ट
डिफ़ॉल्ट: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

हफ़्ते के लेबल के दाएं किनारे और चार्ट के दिन के स्क्वेयर के बाएं किनारे के बीच की दूरी.

टाइप: पूर्णांक
डिफ़ॉल्ट: 4
calendar.daysOfWeek

रविवार से शनिवार तक इस्तेमाल करने के लिए, एक अक्षर वाले लेबल.

Type: स्ट्रिंग
डिफ़ॉल्ट: 'SMTWTFS'
calendar.focusedCellColor

जब उपयोगकर्ता दिन भर के स्क्वेयर पर फ़ोकस करके (जैसे, कर्सर घुमाना) करेगा, तो कैलेंडर चार्ट, स्क्वेयर को हाइलाइट करेंगे. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Type: ऑब्जेक्ट
डिफ़ॉल्ट: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

महीने के लेबल के लिए स्टाइल, जैसे:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Type: ऑब्जेक्ट
डिफ़ॉल्ट: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

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

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(calendar.unusedMonthOutlineColor भी देखें.)
Type: ऑब्जेक्ट
डिफ़ॉल्ट: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

महीने के लेबल के नीचे और दिन के सबसे ऊपर वाले स्क्वेयर के बीच, पिक्सल की संख्या: 

var options = { calendar: { underMonthSpace: 12 } };
टाइप: पूर्णांक
डिफ़ॉल्ट: 6
calendar.underYearSpace

सबसे नीचे वाले साल के लेबल और चार्ट के सबसे नीचे के बीच पिक्सल की संख्या:

var options = { calendar: { underYearSpace: 2 } };
टाइप: पूर्णांक
डिफ़ॉल्ट: 0
calendar.unusedMonthOutlineColor

जिन महीनों के लिए डेटा की वैल्यू बिना तय की गई है उन्हें इस स्टाइल में बॉर्डर का इस्तेमाल करके दिखाया जाता है. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(calendar.monthOutlineColor भी देखें.)
Type: ऑब्जेक्ट
डिफ़ॉल्ट: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

एक ऐसा ऑब्जेक्ट जो कलर कॉलम की वैल्यू और कलर या ग्रेडिएंट स्केल के बीच मैपिंग तय करता है. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है, जैसा कि यहां दिखाया गया है: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
colorAxis.colors

विज़ुअलाइज़ेशन में वैल्यू को असाइन करने के लिए रंग. स्ट्रिंग का कलेक्शन, जिसमें हर एलिमेंट एक एचटीएमएल कलर स्ट्रिंग होता है, जैसे: colorAxis: {colors:['red','#004411']}. आपके पास कम से कम दो वैल्यू होनी चाहिए. ग्रेडिएंट में आपकी सभी वैल्यू शामिल होंगी. साथ ही, इसमें तय की गई इंटरमीडियरी वैल्यू भी शामिल होंगी. इनमें पहला रंग सबसे कम वैल्यू और आखिरी रंग की वैल्यू सबसे कम होगी.

टाइप: कलर स्ट्रिंग का कलेक्शन
डिफ़ॉल्ट: शून्य
colorAxis.maxValue

अगर यह मौजूद है, तो चार्ट के रंग वाले डेटा के लिए ज़्यादा से ज़्यादा वैल्यू तय करता है. इस वैल्यू और उससे ऊपर के कलर डेटा की वैल्यू को colorAxis.colors रेंज में, आखिरी कलर के तौर पर रेंडर किया जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में, कलर कॉलम की ज़्यादा से ज़्यादा वैल्यू
colorAxis.minValue

अगर यह मौजूद है, तो चार्ट के रंग वाले डेटा के लिए कम से कम वैल्यू तय करता है. इस वैल्यू और इससे कम वैल्यू वाले कलर डेटा की वैल्यू को colorAxis.colors रेंज में पहले रंग के तौर पर रेंडर किया जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: चार्ट डेटा में कलर कॉलम की कम से कम वैल्यू
colorAxis.values

अगर मौजूद है, तो यह कंट्रोल करता है कि वैल्यू को रंगों से कैसे जोड़ा जाए. हर वैल्यू, colorAxis.colors कलेक्शन में उससे जुड़े रंग से जुड़ी होती है. ये वैल्यू, चार्ट के कलर डेटा पर लागू होती हैं. रंग, यहां बताई गई वैल्यू के ग्रेडिएंट के मुताबिक किए जाते हैं. इस विकल्प के लिए कोई वैल्यू न बताना, [minValue, maxValue] बनाने के बराबर है.

टाइप: संख्याओं का कलेक्शन
डिफ़ॉल्ट: शून्य
forceIFrame

चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
ऊंचाई

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

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

कैलेंडर चार्ट में, डायगनल धारीदार पैटर्न का इस्तेमाल किया जाता है. इससे पता चलता है कि किसी खास दिन के लिए कोई डेटा मौजूद नहीं है. ग्रेस्केल की डिफ़ॉल्ट सेटिंग बदलने के लिए, noDataPattern.backgroundColor और noDataPattern.color विकल्पों का इस्तेमाल करें, उदाहरण के लिए: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
tooltip.isHtml

एचटीएमएल से रेंडर किए गए टूलटिप के बजाय, SVG के ज़रिए रेंडर किए गए टूल का इस्तेमाल करने के लिए, false पर सेट करें. ज़्यादा जानकारी के लिए, टूलटिप के कॉन्टेंट को पसंद के मुताबिक बनाना देखें.

ध्यान दें: टूलटिप कॉलम में डेटा की भूमिका के ज़रिए एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाने की सुविधा, पाई चार्ट और बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करती.

टाइप: बूलियन
डिफ़ॉल्ट: सही
चौड़ाई

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

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

तरीके

तरीका
draw(data, options)

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

सामान लौटाने का तरीका: कोई नहीं
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')

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

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

चुनी गई चार्ट इकाइयों का कलेक्शन दिखाता है. बार, लेजेंड एंट्री, और कैटगरी चुनी जा सकने वाली इकाइयां हैं. बार, डेटा टेबल में किसी सेल, कॉलम में लेजेंड एंट्री (पंक्ति का इंडेक्स खाली है) और पंक्ति की कैटगरी (कॉलम इंडेक्स शून्य है) से जुड़ा होता है. इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई चुनी जा सकती है. Extended description .

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

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

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

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

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

इवेंट

नाम
error

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

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

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

प्रॉपर्टी: पंक्ति, तारीख
onmouseout

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

प्रॉपर्टी पंक्ति, तारीख
ready

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

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

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

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

डेटा नीति

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