इस पेज पर, चार्ट में किए गए बदलावों को तुरंत लागू करने के बजाय, उन्हें ऐनिमेट करने का तरीका बताया गया है.
विषय सूची
खास जानकारी
Google चार्ट दो में से किसी एक तरीके से आसानी से ऐनिमेट कर सकता है, पहली बार चार्ट बनाते समय या स्टार्टअप पर फिर से बदलाव करते समय, डेटा या विकल्पों में बदलाव करने के बाद.
स्टार्टअप पर ऐनिमेट करने के लिए:
- अपना चार्ट डेटा और विकल्प सेट करें. ऐनिमेशन की अवधि और ईज़िंग के टाइप को ज़रूर सेट करें.
-
animation: {"startup": true}सेट करें — अपने विकल्पों में इसे सेट करने से, आपके चार्ट में बेसलाइन पर ड्रॉ की गई सीरीज़ वैल्यू शुरू हो जाएंगी. साथ ही, उससे प्रॉडक्ट फ़ाइनल स्थिति में उपलब्ध हो जाएगा. - अपना डेटा और विकल्पों को पास करते हुए,
chart.draw()को कॉल करें.
ट्रांज़िशन को ऐनिमेट करने के लिए:
- पहले से रेंडर किए गए चार्ट से शुरू करें.
- डेटा टेबल या विकल्पों में बदलाव करें. अलग-अलग तरह के चार्ट में अलग-अलग बदलाव किए जा सकते हैं; किस तरह के चार्ट में कौनसे बदलाव किए जा सकते हैं, यह जानने के लिए काम करने वाले बदलाव देखें.
- ऐनिमेशन विकल्प का इस्तेमाल करके ट्रांज़िशन के बारे में बताएं.
- नई वैल्यू पर जाने के लिए, अपने चार्ट में
chart.draw()नंबर पर कॉल करें.
यहां एक उदाहरण दिया गया है, जिससे किसी बटन पर हुए हर क्लिक के बाद, बार चार्ट में दिखने वाली सिंगल वैल्यू बदल जाती है:
function init() {
var options = {
width: 400,
height: 240,
animation:{
duration: 1000,
easing: 'out',
},
vAxis: {minValue:0, maxValue:1000}
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['V', 200]);
var chart = new google.visualization.ColumnChart(
document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
});
chart.draw(data, options);
}
button.onclick = function() {
var newValue = 1000 - data.getValue(0, 1);
data.setValue(0, 1, newValue);
drawChart();
}
drawChart();
}
बदलाव करने की सुविधा
अलग-अलग तरह के ट्रांज़िशन के लिए, एक चार्ट से दूसरे ट्रांज़िशन के लिए सहायता उपलब्ध है. ट्रांज़िशन के अलग-अलग टाइप इस तरह होते हैं:
- सिर्फ़ डेटा टेबल की वैल्यू में बदलाव. पंक्तियों और कॉलम की संख्या एक जैसी है. साथ ही, कॉलम अपने मूल टाइप और भूमिकाओं को बनाए रखते हैं.
- कॉलम (सीरीज़) को जोड़ना या हटाना.
- पंक्तियों (कैटगरी) को जोड़ना या हटाना.
-
चार्ट विकल्पों में बदलाव. फ़िलहाल, ये बदलाव लागू होंगे:
-
व्यू विंडो (
vAxis.viewWindow.min,vAxis.viewWindow.max,hAxis.viewWindow.min,hAxis.viewWindow.max) — "ज़ूम" और लगातार "ड्रिफ़्ट" इफ़ेक्ट डालने के लिए, व्यू विंडो को बदलना कारगर होता है (नीचे दिए गए उदाहरण देखें) -
vAxis.ticksऔरhAxis.ticksवैल्यू vAxis.gridlines.countऔरhAxis.gridlines.countvAxis.directionऔरhAxis.directionvAxis.baselineऔरhAxis.baselinevAxis.logScaleऔरhAxis.logScale- चार्ट का साइज़ (
heightऔरwidth) -
चार्ट एरिया (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
-
व्यू विंडो (
| बदलाव का टाइप | मान्य चार्ट प्रकार |
|---|---|
| वैल्यू में बदलाव | स्कैटरचार्ट, लाइन चार्ट, एरिया चार्ट, बार चार्ट, बबल चार्ट, कॉलम चार्ट, कैंडलस्टिक चार्ट, स्टेप्ड अरीना चार्ट, कॉम्बो चार्ट, गॉज |
| पंक्तियां जोड़ना/हटाना | स्कैटरचार्ट, लाइन चार्ट, एरिया चार्ट, बबल चार्ट, कॉम्बो चार्ट (सिर्फ़ लाइन/क्षेत्र की सीरीज़ के साथ) |
| कॉलम जोड़ना/हटाना | स्कैटरचार्ट, लाइन चार्ट, एरिया चार्ट, बार चार्ट, बबल चार्ट, कॉलम चार्ट, कैंडलस्टिक चार्ट, स्टेप्ड एरिया चार्ट, कॉम्बो चार्ट |
| चार्ट के विकल्पों में बदलाव करना | स्कैटरचार्ट, लाइन चार्ट, एरिया चार्ट, बार चार्ट, बबल चार्ट, कॉलम चार्ट, कैंडलस्टिक चार्ट, स्टेप्ड एरिया चार्ट, कॉम्बो चार्ट |
ट्रांज़िशन व्यवहार
| नाम | |
|---|---|
| एनिमेशन.अवधि |
ऐनिमेशन का कुल समय (मिलीसेकंड में). ज़्यादा जानकारी के लिए, ऐनिमेशन का दस्तावेज़ देखें. टाइप: नंबर
डिफ़ॉल्ट: 0
|
| एनिमेशन |
ईज़िंग फ़ंक्शन ऐनिमेशन पर लागू किया गया. फ़िल्टर के लिए, यहां दिए गए विकल्प उपलब्ध होते हैं:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'लीनियर'
|
| एनिमेशन |
इससे तय होता है कि चार्ट शुरुआती ड्रॉ के दौरान ऐनिमेट होगा या नहीं. अगर टाइप: बूलियन
डिफ़ॉल्ट गलत
|
इवेंट
चार्ट ड्रॉ करते समय, बाहरी तरीके से किए जाने वाले कॉल के लिए चार्ट तैयार हो जाने पर 'तैयार है' इवेंट सक्रिय हो जाता है.
ट्रांज़िशन पूरा होने पर, चार्ट animationfinish इवेंट को सक्रिय करेगा.
| नाम | |
|---|---|
animationfinish |
ट्रांज़िशन ऐनिमेशन पूरा होने पर सक्रिय होता है. प्रॉपर्टी: कोई नहीं
|
उदाहरण
वैल्यू में बदलाव
// Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 114.6],
['2005/06', 135, 1120, 599, 1268, 288, 382],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 409.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 122, 638, 722, 998, 450, 614.6],
['2005/06', 100, 1120, 899, 1268, 288, 682],
['2006/07', 183, 167, 487, 207, 397, 623],
['2007/08', 200, 510, 315, 1068, 215, 609.4],
['2008/09', 123, 491, 829, 826, 366, 569.6]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var options = {
width: 400,
height: 240,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}},
animation:{
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
पंक्तियां जोड़ना और हटाना
var options = {
width: 400,
height: 240,
vAxis: {minValue:0, maxValue:100},
animation: {
duration: 1000,
easing: 'in'
}
};
var chart = new google.visualization.LineChart(
document.getElementById('visualization'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addRow(['100', 123]);
data.addRow(['700', 17]);
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
});
chart.draw(data, options);
}
button.onclick = function() {
if (data.getNumberOfRows() > 5) {
data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
}
// Generating a random x, y pair and inserting it so rows are sorted.
var x = Math.floor(Math.random() * 1000);
var y = Math.floor(Math.random() * 100);
var where = 0;
while (where < data.getNumberOfRows() && parseInt(data.getValue(where, 0)) < x) {
where++;
}
data.insertRows(where, [[x.toString(), y]]);
drawChart();
}
drawChart();
कॉलम जोड़ना और हटाना
var options = {
width: 400,
height: 240,
vAxis: {minValue:0, maxValue:1000},
animation: {
duration: 1000,
easing: 'out'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('visualization'));
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'A');
data.addColumn('number', 'B');
data.addRow(['A', 123, 40]);
data.addRow(['B', 17, 20]);
var addButton = document.getElementById('b1');
var removeButton = document.getElementById('b2');
function drawChart() {
// Disabling the buttons while the chart is drawing.
addButton.disabled = true;
removeButton.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
// Enabling only relevant buttons.
addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length;
removeButton.disabled = (data.getNumberOfColumns() - 1) < 2;
});
chart.draw(data, options);
}
function shuffleAndDrawChart() {
for (var i = 0; i < data.getNumberOfRows(); ++i) {
for (var j = 1; j < data.getNumberOfColumns(); ++j) {
var num = Math.floor(Math.random() * 1000);
data.setValue(i, j, num);
}
}
drawChart();
}
addButton.onclick = function() {
data.addColumn('number', chars[data.getNumberOfColumns() - 1]);
shuffleAndDrawChart();
}
removeButton.onclick = function() {
data.removeColumn(data.getNumberOfColumns() - 1);
shuffleAndDrawChart();
}
drawChart();
व्यू विंडो बदलना
var options = {
width: 400,
height: 240,
animation: {
duration: 1000,
easing: 'in'
},
hAxis: {viewWindow: {min:0, max:5}}
};
var chart = new google.visualization.SteppedAreaChart(
document.getElementById('visualization'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
var MAX = 10;
for (var i = 0; i < MAX; ++i) {
data.addRow([i.toString(), Math.floor(Math.random() * 100)]);
}
var prevButton = document.getElementById('b1');
var nextButton = document.getElementById('b2');
var changeZoomButton = document.getElementById('b3');
function drawChart() {
// Disabling the button while the chart is drawing.
prevButton.disabled = true;
nextButton.disabled = true;
changeZoomButton.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
prevButton.disabled = options.hAxis.viewWindow.min <= 0;
nextButton.disabled = options.hAxis.viewWindow.max >= MAX;
changeZoomButton.disabled = false;
});
chart.draw(data, options);
}
prevButton.onclick = function() {
options.hAxis.viewWindow.min -= 1;
options.hAxis.viewWindow.max -= 1;
drawChart();
}
nextButton.onclick = function() {
options.hAxis.viewWindow.min += 1;
options.hAxis.viewWindow.max += 1;
drawChart();
}
var zoomed = false;
changeZoomButton.onclick = function() {
if (zoomed) {
options.hAxis.viewWindow.min = 0;
options.hAxis.viewWindow.max = 5;
} else {
options.hAxis.viewWindow.min = 0;
options.hAxis.viewWindow.max = MAX;
}
zoomed = !zoomed;
drawChart();
}
drawChart();
चार्ट का साइज़ बदलना
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
function genData () {
var array = [];
for (var i = 0; i < 10; i++) {
var x = i,
y = Math.floor(Math.random() * 50),
z = Math.floor(Math.random() * 25);
array.push([x, y, z]);
}
return array;
}
function doubleIt() {
options.chartArea.height = '100%';
options.chartArea.width = '100%';
}
function halveIt() {
options.chartArea.height = '50%';
options.chartArea.width = '50%';
}
function goTo50() {
options.chartArea.left = '50%';
options.chartArea.top = '50%';
}
function goTo10() {
options.chartArea.left = '10%';
options.chartArea.top = '10%';
}
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Z');
data.addRows(genData());
var options = {
height: 500,
chartArea: {
height: '50%',
width: '50%',
top: '10%',
left: '10%'
},
colors: ['#ee8100', '#9575cd'],
animation: {
duration: 1500,
easing: 'linear',
startup: true
},
vAxis: {
ticks: [10, 20, 30, 40, 50, 60],
gridlines: {color: '#ccc'}
},
hAxis: {
ticks: [0, 4, 8, 12],
gridlines: {color: '#ccc'}
},
legend: {position: 'none'},
enableInteractivity: false
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var btns = document.querySelector('#btns');
btns.onclick = function (e) {
switch(e.target.id) {
case "size":
options.chartArea.height === '50%' ? doubleIt() : halveIt();
break;
case "slide":
options.chartArea.left === '10%' ? goTo50() : goTo10();
}
chart.draw(data, options);
}
}