खास जानकारी
ओवरले, 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>
<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>
<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>