ओवरले

  1. खास जानकारी
  2. एक आसान उदाहरण
  3. डेटा के मुकाबले पोज़िशनिंग ओवरले

खास जानकारी

ओवरले, Google चार्ट के सबसे ऊपर रखा गया हिस्सा होता है. आम तौर पर, इसका इस्तेमाल किसी खास आंकड़े के बारे में बताने के लिए किया जाता है. हालांकि, यह सिर्फ़ एचटीएमएल और सीएसएस का इस्तेमाल करने वाली वजह हो सकती है.

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

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

अपने पहले उदाहरण के लिए, हम JavaScript से पूरी तरह बचेंगे और लाइन चार्ट पर कुछ टेक्स्ट ओवरले करेंगे:

यहां एक इंटरनल स्टाइलशीट में दो क्लास के बारे में बताया गया है. इन्हें हम chartWithOverlay और overlay कहते हैं. ध्यान दें कि हम chartWithOverlay में रिलेटिव पोज़िशनिंग और overlay में कुल पोज़िशनिंग का इस्तेमाल करते हैं.

इसके बाद, हम अपने वेब पेज के मुख्य हिस्से में chartWithOverlay का इस्तेमाल एक कंटेनर के तौर पर करते हैं, जिसमें हम अपना चार्ट (line-chart) और फिर overlay को रखते हैं.

सीएसएस
.chartWithOverlay {
    position: relative;
    width: 700px;
}
.overlay {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 60px;  /* chartArea top  */
    left: 180px; /* chartArea left */
}
डाइव
<div class="chartWithOverlay">

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

 <div class="overlay">
   <div style="font-family:'Arial Black'; font-size: 128px;">88</div>
   <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div>
   <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div>
 </div>

</div>
JavaScript
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.arrayToDataTable([
        ['Threat', 'Attacks'],
        ['Chandrian', 38],
        ['Ghosts', 12],
        ['Ghouls', 6],
        ['UFOs', 44],
        ['Vampires', 28],
        ['Zombies', 88]
      ]);

      var options = {
        legend: 'none',
        colors: ['#760946'],
        vAxis: { gridlines: { count: 4 } }
      };

      var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
      chart.draw(data, options);
    }
    </script>
पूरा पेज
<html>
 <head>
   <style>
    .chartWithOverlay {
           position: relative;
           width: 700px;
    }
    .overlay {
           width: 200px;
           height: 200px;
           position: absolute;
           top: 60px;   /* chartArea top  */
           left: 180px; /* chartArea left */
    }
   </style>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

   <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.arrayToDataTable([
        ['Threat', 'Attacks'],
        ['Chandrian', 38],
        ['Ghosts', 12],
        ['Ghouls', 6],
        ['UFOs', 44],
        ['Vampires', 28],
        ['Zombies', 88]
      ]);

      var options = {
        legend: 'none',
        colors: ['#760946'],
        vAxis: { gridlines: { count: 4 } }
      };

      var chart = new google.visualization.LineChart(document.getElementById('line-chart'));
      chart.draw(data, options);
    }
    </script>
 </head>

 <body>
  <div class="chartWithOverlay">

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

   <div class="overlay">
    <div style="font-family:'Arial Black'; font-size: 128px;">88</div>
    <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div>
    <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div>
  </div>

 </div>

</body>

</html>

डेटा के मुकाबले पोज़िशनिंग ओवरले

कभी-कभी ओवरले की सबसे अच्छी स्थिति इस बात पर निर्भर करती है कि चार्ट में डेटा कहां पर है. उदाहरण के लिए, हो सकता है कि हम किसी इमेज को डेटा एलिमेंट के पास रखना चाहें.

मान लीजिए, हम ऊपर दिए गए चार्ट में ज़ॉम्बी के हमलों की संख्या पर ध्यान देना चाहते हैं. ऐसा करने के लिए, लाइन के आखिर में एक डरावने ज़ॉम्बी का सिर रखें.

ऐसा करने का एक तरीका यह है कि चार्ट को रेंडर किया जाए और अपने निर्देशांकों को हार्डकोड किया जाए. यह काम करेगा, लेकिन चार्ट डेटा बदलने पर अपडेट करना होगा. एक ज़्यादा मज़बूत समाधान के लिए हम ओवरले को उस जगह के ऊपर दिखाएंगे, जहां डेटा एलीमेंट खत्म होता है. हम नहीं समझ पा रहे हैं कि जब तक चार्ट रेंडर नहीं हो जाता, तब तक वह कहां होगा. इसलिए, हम ready इवेंट देखेंगे (जिसे चार्ट रेंडरिंग के दौरान कहा जाता है) और getXLocation और getYLocation की मदद से निर्देशांक ऐक्सेस करेंगे:

सीएसएस
.chartWithMarkerOverlay {
    position: relative;
    width: 700px;
}
.overlay-text {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50px;   /* chartArea top  */
    left: 200px; /* chartArea left */
}
.overlay-marker {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 53px;   /* chartArea top */
    left: 528px; /* chartArea left */
}
डाइव
<div class="chartWithMarkerOverlay">

 <div id="line-chart-marker" style="width: 700px; height: 500px;"></div>

 <div class="overlay-text">
   <div style="font-family:'Arial Black'; font-size: 128px;">88</div>
   <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div>
   <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div>
 </div>

 <div class="overlay-marker">
    <img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50">
 </div>


</div>
JavaScript
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.arrayToDataTable([
        ['Threat', 'Attacks'],
        ['Chandrian', 38],
        ['Ghosts', 12],
        ['Ghouls', 6],
        ['UFOs', 44],
        ['Vampires', 28],
        ['Zombies', 88]
      ]);

      var options = {
        legend: 'none',
        colors: ['#760946'],
        lineWidth: 4,
        vAxis: { gridlines: { count: 4 } }
      };

      function placeMarker(dataTable) {
        var cli = this.getChartLayoutInterface();
        var chartArea = cli.getChartAreaBoundingBox();
        // "Zombies" is element #5.
        document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(dataTable.getValue(5, 1))) - 50 + "px";
        document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(5)) - 10 + "px";
      };

      var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker'));
      google.visualization.events.addListener(chart, 'ready',
        placeMarker.bind(chart, data));
      chart.draw(data, options);
    }
  </script>
पूरा पेज
<html>
 <head>
  <style>
   .chartWithMarkerOverlay {
       position: relative;
       width: 700px;
   }
   .overlay-text {
       width: 200px;
       height: 200px;
       position: absolute;
       top: 50px;   /* chartArea top */
       left: 200px; /* chartArea left */
   }
   .overlay-marker {
       width: 50px;
       height: 50px;
       position: absolute;
       top: 53px;   /* chartArea top */
       left: 528px; /* chartArea left */
   }
  </style>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.arrayToDataTable([
        ['Threat', 'Attacks'],
        ['Chandrian', 38],
        ['Ghosts', 12],
        ['Ghouls', 6],
        ['UFOs', 44],
        ['Vampires', 28],
        ['Zombies', 88]
      ]);

      var options = {
        legend: 'none',
        colors: ['#760946'],
        lineWidth: 4,
        vAxis: { gridlines: { count: 4 } }
      };

      function placeMarker(dataTable) {
        var cli = this.getChartLayoutInterface();
        var chartArea = cli.getChartAreaBoundingBox();
        // "Zombies" is element #5.
        document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(dataTable.getValue(5, 1))) - 50 + "px";
        document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(5)) - 10 + "px";
      };

      var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker'));
      google.visualization.events.addListener(chart, 'ready',
        placeMarker.bind(chart, data));
      chart.draw(data, options);
    }
  </script>
 </head>
 <body>
  <div class="chartWithMarkerOverlay">

   <div id="line-chart-marker" style="width: 700px; height: 500px;"></div>

   <div class="overlay-text">
    <div style="font-family:'Arial Black'; font-size: 128px;">88</div>
    <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div>
    <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div>
  </div>

  <div class="overlay-marker">
    <img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50">
  </div>

  </div>
 </body>
</html>