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

  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 पॉइंट के गहरे लाल रंग के बोल्ड इटैलिक पर सेट करते हैं. साथ ही, आउटलाइन को उसी रंग पर सेट करते हैं और 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 की मदद से, अपनी पसंद के मुताबिक बनाया जा सकता है:

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

  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.
    }
  }
};
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: { 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
    }
  }
};
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

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

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

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

टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'SMTWTFS'
calendar.फ़ोकसCellकलर

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

टाइप: संख्याओं की श्रेणी
डिफ़ॉल्ट: शून्य
फ़ोर्सआईफ़्रेम

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

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

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

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

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

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

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

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

टाइप: बूलियन
डिफ़ॉल्ट: true
width

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

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

तरीके

तरीका
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() को कॉल करें.

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

डेटा नीति

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