Highcharts - त्वरित गाइड

Highchartsएक शुद्ध जावास्क्रिप्ट आधारित चार्टिंग लाइब्रेरी है जो इंटरेक्टिव चार्टिंग क्षमता को जोड़कर वेब अनुप्रयोगों को बढ़ाने के लिए है। यह चार्ट की एक विस्तृत श्रृंखला का समर्थन करता है। क्रोम, फ़ायरफ़ॉक्स, सफारी, इंटरनेट एक्सप्लोरर (आईई) जैसे मानक ब्राउज़रों में एसवीजी का उपयोग करके चार्ट तैयार किए जाते हैं। विरासत IE 6 में, ग्राफिक्स खींचने के लिए VML का उपयोग किया जाता है।

हाईचर्स लाइब्रेरी की विशेषताएं

आइए अब हम हाईचार्ट्स लाइब्रेरी की कुछ महत्वपूर्ण विशेषताओं पर चर्चा करें।

Compatability - एंड्रॉइड और आईओएस जैसे सभी प्रमुख ब्राउज़रों और मोबाइल प्लेटफ़ॉर्म पर काम करना असंभव लगता है।
Multitouch Support - एंड्रॉइड और iOS जैसे टच स्क्रीन आधारित प्लेटफॉर्मों पर मल्टीटच का समर्थन करता है। iPhone / iPad और एंड्रॉइड आधारित स्मार्ट फोन / टैबलेट के लिए उपयोग करें।
Free to Use - ओपन सोर्स और गैर-वाणिज्यिक उद्देश्य के लिए उपयोग करने के लिए स्वतंत्र है।
Lightweight - highcharts.js लगभग 35KB आकार के साथ मुख्य पुस्तकालय, एक अत्यंत हल्के पुस्तकालय है।
Simple Configurations - चार्ट के विभिन्न कॉन्फ़िगरेशन को परिभाषित करने के लिए जसन का उपयोग करता है और सीखने और उपयोग करने में बहुत आसान है।
Dynamic - चार्ट पीढ़ी के बाद भी चार्ट को संशोधित करने की अनुमति देता है।
Multiple axes- एक्स, वाई अक्ष तक सीमित नहीं है। चार्ट पर कई अक्ष का समर्थन करता है।
Configurable tooltips- टूलटिप तब आता है जब कोई उपयोगकर्ता किसी चार्ट पर किसी बिंदु पर घूमता है। Highcharts टूलटिप प्रोग्रामर या कॉलबैक फॉर्मैटर को टूलटिप को प्रोग्रामेटिक रूप से नियंत्रित करने के लिए प्रदान करता है।
DateTime support- विशेष रूप से तारीख का समय। तिथि वार श्रेणियों पर कई इनबिल्ट नियंत्रण प्रदान करता है।
Export निर्यात सुविधा को सक्षम करके पीडीएफ / पीएनजी / जेपीजी / एसवीजी प्रारूप में निर्यात चार्ट।
Print - वेब पेज का उपयोग करके चार्ट प्रिंट करें।
Zoomablity - डेटा को अधिक सटीक रूप से देखने के लिए जूमिंग चार्ट का समर्थन करता है।
External data- सर्वर से गतिशील रूप से डेटा लोड करने का समर्थन करता है। कॉलबैक फ़ंक्शन का उपयोग करके डेटा पर नियंत्रण प्रदान करता है।
Text Rotation - किसी भी दिशा में लेबल के रोटेशन का समर्थन करता है।

समर्थित चार्ट प्रकार

हाईचर्स पुस्तकालय निम्नलिखित प्रकार के चार्ट प्रदान करता है -

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	Line Charts लाइन / स्लाइन आधारित चार्ट बनाने के लिए उपयोग किया जाता है।
2	Area Charts क्षेत्रवार चार्ट तैयार करने के लिए उपयोग किया जाता है।
3	Pie Charts पाई चार्ट बनाने के लिए उपयोग किया जाता है।
4	Scatter Charts बिखरे चार्टों को आकर्षित करने के लिए उपयोग किया जाता है।
5	Bubble Charts बबल आधारित चार्ट बनाने के लिए उपयोग किया जाता है।
6	Dynamic Charts डायनामिक चार्ट बनाने के लिए उपयोग किया जाता है जहाँ उपयोगकर्ता चार्ट को संशोधित कर सकता है।
7	Combinations विभिन्न प्रकार के चार्ट के संयोजन तैयार करने के लिए उपयोग किया जाता है।
8	3D Charts 3D चार्ट बनाने के लिए उपयोग किया जाता है।
9	Angular Gauges स्पीडोमीटर प्रकार के चार्ट बनाने के लिए उपयोग किया जाता है।
10	Heat Maps गर्मी के नक्शे खींचते थे।
1 1	Tree Maps पेड़ के नक्शे बनाने के लिए उपयोग किया जाता है।

अपने बाद के अध्यायों में, हम उदाहरणों के साथ विवरणों में प्रत्येक प्रकार के उपरोक्त चार्टों पर चर्चा करेंगे।

लाइसेंस

हाईचर खुला स्रोत है और गैर-वाणिज्यिक उद्देश्य के लिए उपयोग करने के लिए स्वतंत्र है। व्यावसायिक परियोजनाओं में उच्चकों का उपयोग करने के लिए, लिंक का पालन करें - लाइसेंस और मूल्य निर्धारण

इस अध्याय में, हम चर्चा करेंगे कि वेब अनुप्रयोग विकास में उपयोग की जाने वाली हाईचर्स लाइब्रेरी कैसे स्थापित करें।

Highcharts को निर्भरता के रूप में jQuery की आवश्यकता होती है। सबसे पहले, हम jQuery लाइब्रेरी और फिर हाईचर्स लाइब्रेरी स्थापित करेंगे।

JQuery स्थापित करें

JQuery का उपयोग करने के दो तरीके हैं।

Download- इसे jQuery.com से स्थानीय रूप से डाउनलोड करें और इसका उपयोग करें।
CDN access- आपके पास सीडीएन तक भी पहुंच है। सीडीएन आपको दुनिया भर में क्षेत्रीय डेटा केंद्रों तक पहुंच प्रदान करेगा; इस मामले में, Google होस्ट। इसका मतलब है कि CDN का उपयोग करने से आपके अपने सर्वर से फ़ाइलों को होस्ट करने की जिम्मेदारी बाहरी लोगों की एक श्रृंखला पर आ जाती है। इससे एक फायदा यह भी होता है कि यदि आपके वेबपेज पर आने वाले विज़िटर ने पहले ही उसी सीडीएन से jQuery की कॉपी डाउनलोड कर ली है, तो उसे दोबारा डाउनलोड नहीं करना पड़ेगा।

डाउनलोड किए गए jQuery का उपयोग करना

निम्नलिखित स्क्रिप्ट का उपयोग करके HTML पेज में jQuery जावास्क्रिप्ट फ़ाइल शामिल करें -

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

CDN का उपयोग करना

हम इस ट्यूटोरियल में jQuery लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं।

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

हाईचार्ट स्थापित करें

Highcharts का उपयोग करने के दो तरीके निम्नलिखित हैं।

Download - इसे स्थानीय स्तर से डाउनलोड करें highcharts.com और इसका इस्तेमाल करते हैं।
CDN access- आपके पास सीडीएन तक भी पहुंच है। सीडीएन आपको दुनिया भर में क्षेत्रीय डेटा केंद्रों तक पहुंच प्रदान करेगा; इस मामले में, हाईचर्ट्स मेजबान - Code.Highcharts.Com।

डाउनलोड किए गए Highcharts का उपयोग करना

निम्न स्क्रिप्ट का उपयोग करके HTML पेज में हाईचर्स जावास्क्रिप्ट फ़ाइल शामिल करें -

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

CDN का उपयोग करना

हम इस पूरे ट्यूटोरियल में हाईचर्स लाइब्रेरी के CDN संस्करणों का उपयोग कर रहे हैं।

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

इस अध्याय में, हम Highcharts API का उपयोग करके एक चार्ट बनाने के लिए आवश्यक कॉन्फ़िगरेशन का प्रदर्शन करेंगे।

स्टेप 1: HTML पेज बनाएं

JQuery और Highcharts जावास्क्रिप्ट पुस्तकालय के साथ एक HTML पृष्ठ बनाएँ।

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

यहां ही container div का उपयोग Highcharts लाइब्रेरी का उपयोग करके तैयार किए गए चार्ट को करने के लिए किया जाता है।

चरण 2: विन्यास बनाएं

Highcharts पुस्तकालय json सिंटैक्स का उपयोग करके बहुत सरल कॉन्फ़िगरेशन का उपयोग करता है।

$('#container').highcharts(json);

यहाँ json json डेटा और कॉन्फ़िगरेशन का प्रतिनिधित्व करता है जो Highcharts लाइब्रेरी हाईचर्ट्स () विधि का उपयोग करके कंटेनर div के भीतर एक चार्ट बनाने के लिए उपयोग करता है। अब, हम आवश्यक जेट स्ट्रिंग बनाने के लिए विभिन्न मापदंडों को कॉन्फ़िगर करेंगे।

शीर्षक

चार्ट का शीर्षक कॉन्फ़िगर करें।

var title = {
   text: 'Monthly Average Temperature'   
};

उपशीर्षक

चार्ट के उपशीर्षक को कॉन्फ़िगर करें।

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

एक्स-एक्सिस पर प्रदर्शित होने के लिए टिकर को कॉन्फ़िगर करें।

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

वाई-एक्सिस पर प्रदर्शित होने के लिए शीर्षक, प्लॉट लाइनों को कॉन्फ़िगर करें।

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

टूलटिप

टूलटिप को कॉन्फ़िगर करें। मूल्य (y- अक्ष) के बाद जोड़ा जाने वाला प्रत्यय लगाएं।

var tooltip = {
   valueSuffix: '\xB0C'
}

किंवदंती

अन्य गुणों के साथ चार्ट के दाईं ओर प्रदर्शित होने वाली किंवदंती को कॉन्फ़िगर करें।

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

श्रृंखला

चार्ट पर प्रदर्शित होने वाले डेटा को कॉन्फ़िगर करें। श्रृंखला एक सरणी है जहां इस सरणी का प्रत्येक तत्व चार्ट पर एक पंक्ति का प्रतिनिधित्व करता है।

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

चरण 3: json डेटा बनाएँ

सभी कॉन्फ़िगरेशन को मिलाएं।

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

चरण 4: चार्ट को ड्रा करें

$('#container').highcharts(json);

उदाहरण

कॉन्फ़िगरेशन सिंटैक्स को और समझने के लिए निम्नलिखित उदाहरण पर विचार करें -

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

परिणाम

परिणाम सत्यापित करें।

लाइन चार्ट का उपयोग लाइन / स्पलाइन आधारित चार्ट बनाने के लिए किया जाता है। इस भाग में, हम विभिन्न प्रकार के लाइन और स्लाइन आधारित चार्टों पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	मूल रेखा बेसिक लाइन चार्ट।
2	डेटा लेबल के साथ डेटा लेबल के साथ चार्ट।
3	अजाक्स लोड किए गए डेटा, क्लिक करने योग्य बिंदु सर्वर से डेटा प्राप्त करने के बाद तैयार किया गया चार्ट।
4	समय श्रृंखला, ज़ूम करने योग्य समय श्रृंखला के साथ चार्ट।
5	उल्टे कुल्हाड़ियों के साथ घूमना इनवर्टेड कुल्हाड़ियों वाले स्पैन चार्ट।
6	प्रतीकों के साथ वर्तनी गर्मी / बारिश के लिए प्रतीकों का उपयोग करके चार्ट को चित्रित करें।
7	प्लॉट बैंड के साथ घूमना प्लॉट बैंड के साथ चार्ट को फैलाएं।
8	अनियमित अंतराल के साथ समय डेटा समय आधारित डेटा के एक बड़े सेट का चार्ट।
9	लॉगरिदमिक अक्ष लघुगणक अक्ष को दर्शाने वाला चार्ट।

क्षेत्र चार्ट का उपयोग क्षेत्र आधारित चार्ट बनाने के लिए किया जाता है। इस भाग में, हम विभिन्न प्रकार के क्षेत्र आधारित चार्टों पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	मूल क्षेत्र मूल क्षेत्र चार्ट।
2	नकारात्मक मूल्यों वाला क्षेत्र नकारात्मक मूल्यों वाले क्षेत्र चार्ट।
3	ढेर किया हुआ क्षेत्र चार्ट वाले क्षेत्र एक दूसरे पर ढेर हो गए।
4	प्रतिशत क्षेत्र प्रतिशत शब्दों में डेटा के साथ चार्ट।
5	लापता अंक के साथ क्षेत्र डेटा में लापता बिंदुओं के साथ चार्ट।
6	कुल्हाड़ी का उलटा उल्टे कुल्हाड़ियों का उपयोग करने वाला क्षेत्र।
7	क्षेत्र-पट्टी क्षेत्र चार्ट का उपयोग करते हुए।
8	क्षेत्र की सीमा रेंज का उपयोग कर क्षेत्र चार्ट।
9	क्षेत्र सीमा और रेखा रेंज और लाइन का उपयोग कर क्षेत्र चार्ट।

बार चार्ट का उपयोग क्षेत्र आधारित चार्ट बनाने के लिए किया जाता है। इस खंड में, हम विभिन्न प्रकार के बार आधारित चार्टों पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	बेसिक बार बेसिक बार चार्ट।
2	स्टैक्ड बार बार चार्ट एक दूसरे पर ढेर हो गया।
3	नकारात्मक स्टैक्ड क्षेत्र नकारात्मक स्टैक के साथ बार चार्ट।

कॉलम चार्ट का उपयोग कॉलम चार्ट बनाने के लिए किया जाता है। इस भाग में, हम विभिन्न प्रकार के कॉलम आधारित चार्टों पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	मूल स्तंभ मूल स्तंभ चार्ट।
2	नकारात्मक मूल्यों के साथ स्तंभ नकारात्मक मान वाले स्तंभ चार्ट।
3	स्टैक्ड स्तंभ स्तंभ एक दूसरे पर ढेर चार्ट।
4	स्टैक्ड और समूहीकृत स्तंभ स्टैक्ड और समूहीकृत रूप में कॉलम के साथ चार्ट।
5	स्टैक किए गए प्रतिशत के साथ कॉलम स्टैक्ड प्रतिशत के साथ चार्ट।
6	घुमाया हुआ लेबल के साथ कॉलम स्तंभों में घुमाए गए लेबल के साथ स्तंभ चार्ट।
7	स्तंभ के साथ कॉलम स्तंभ चार्ट क्षमता नीचे ड्रिल के साथ।
8	निश्चित प्लेसमेंट के साथ कॉलम निश्चित प्लेसमेंट के साथ कॉलम चार्ट।
9	HTML तालिका में परिभाषित डेटा HTML तालिका में परिभाषित डेटा का उपयोग करके कॉलम चार्ट।
10	कॉलम रेंज श्रेणी का उपयोग करके कॉलम चार्ट।

पाई चार्ट का उपयोग पाई आधारित चार्ट बनाने के लिए किया जाता है। इस खंड में, हम विभिन्न प्रकार के पाई आधारित चार्टों पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	बेसिक पाई बेसिक पाई चार्ट।
2	किंवदंतियों के साथ पाई किंवदंतियों के साथ चार्ट चार्ट।
3	डोनट चार्ट डोनट चार्ट।
4	अर्ध चक्र डोनट सेमी सर्कल डोनट चार्ट।
5	नीचे ड्रिल के साथ पाई ड्रिल डाउन क्षमता के साथ पाई चार्ट।
6	ग्रेडिएंट के साथ पाई चार्ट ग्रेडिएंट फिल के साथ पाई चार्ट।
7	मोनोक्रोम के साथ पाई चार्ट मोनोक्रोम फिल के साथ पाई चार्ट।

स्कैटर चार्ट का उपयोग तितर बितर आधारित चार्ट को आकर्षित करने के लिए किया जाता है। इस खंड में, हम विभिन्न प्रकार के तितर बितर आधारित चार्ट पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	स्कैटर चार्ट स्कैटर चार्ट।

बबल चार्ट का उपयोग बबल आधारित चार्ट बनाने के लिए किया जाता है। इस खंड में, हम विभिन्न प्रकार के बबल आधारित चार्ट पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	बुलबुले चार्ट बुलबुले चार्ट।
2	3 डी बुलबुले चार्ट 3 डी बुलबुले चार्ट।

डायनेमिक चार्ट का उपयोग डेटा आधारित चार्ट बनाने के लिए किया जाता है जहां चार्ट के प्रतिपादन के बाद डेटा बदल सकता है। इस खंड में, हम विभिन्न प्रकार के गतिशील चार्ट पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	प्रत्येक दूसरे को अपडेट करने वाली स्पलाइन प्रत्येक दूसरे को अपडेट करने वाले स्पैन चार्ट।
2	एक बिंदु जोड़ने के लिए क्लिक करें बिंदु जोड़ क्षमता के साथ चार्ट।

मिश्रित चार्ट का उपयोग मिश्रित चार्ट बनाने के लिए किया जाता है; उदाहरण के लिए, पाई चार्ट के साथ बार चार्ट। इस खंड में, हम विभिन्न प्रकार के संयोजन चार्टों पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	कॉलम, लाइन और पाई कॉलम, लाइन और पाई के साथ चार्ट।
2	दोहरी अक्ष, रेखा और स्तंभ दोहरी अक्ष, रेखा और स्तंभ के साथ चार्ट।
3	मल्टीपल एक्सिस एकाधिक अक्ष वाले चार्ट।
4	प्रतिगमन रेखा के साथ बिखराव प्रतिगमन रेखा के साथ स्कैटर चार्ट।

3 डी चार्ट का उपयोग 3-आयामी चार्ट बनाने के लिए किया जाता है। इस खंड में, हम विभिन्न प्रकार के 3 डी चार्ट पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	3 डी कॉलम 3 डी कॉलम चार्ट।
2	Null के साथ 3D Column 3 डी कॉलम चार्ट शून्य और 0 मानों के साथ।
3	स्टैकिंग के साथ 3 डी कॉलम स्टैकिंग और ग्रुपिंग के साथ 3 डी कॉलम चार्ट।
4	3 डी पाई 3 डी पाई चार्ट।
5	3 डी डोनट 3 डी डोनट चार्ट।

कोणीय गेज चार्ट का उपयोग मीटर / गेज प्रकार के चार्ट बनाने के लिए किया जाता है। इस खंड में, हम विभिन्न प्रकार के कोणीय गॉजेस चार्ट पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	कोणीय गेज कोणीय गेज चार्ट।
2	सॉलिड गेज सॉलिड गेज चार्ट।
3	घड़ी घड़ी।
4	दोहरी कुल्हाड़ियों के साथ गेज दोहरी कुल्हाड़ियों के साथ गेज चार्ट।
5	VU मीटर VU मीटर चार्ट।

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

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	गर्मी के नक्शे गर्मी के नक्शे।
2	बड़ा हीट मैप बड़ा हीट मैप।

ट्री मैप चार्ट का उपयोग ट्री मैप टाइप चार्ट बनाने के लिए किया जाता है। इस भाग में, हम विभिन्न प्रकार के ट्री मैप्स पर चर्चा करेंगे।

अनु क्रमांक।	चार्ट प्रकार और विवरण
1	ट्री मैप रंग अक्ष के साथ ट्री मैप।
2	स्तर के साथ ट्री मैप स्तर के साथ ट्री मैप।
3	बड़े पेड़ का नक्शा बड़े पेड़ का नक्शा।