I want to read the label of the bar selected at the level two of the select
event of the chart2
graph is plotted the nicely without any error
i want to go to the one more level deeper but i am unable to do this please
suggest the solution
this is my code
function drawChart() {
//object for the state level chart
var data = google.visualization.arrayToDataTable([
['state' , 'count'],
<?php
$getStates = Array();
while( $row = mysql_fetch_assoc($getStateInfo)){
$state = $row['state'];
$getStates[] = $state;
$salesCovered = $row['salesCovered'];
echo "['{$state}', {$salesCovered}],";
}
?>
]);
var pausecontent = new Array();
<?php foreach($getStates as $key => $val){ ?>
pausecontent.push('<?php echo $val; ?>');
<?php } ?>
//object for the town level chart
var data2 = google.visualization.arrayToDataTable([
['state' , 'town','count'],
<?php
$getStateTownInfo = mysql_query("SELECT
`state`,`town`,SUM(`outlet_status`) as salesCovered FROM `poientry` group
by town");
$getTowns = Array();
$getStatesTowns = Array();
while( $row = mysql_fetch_assoc($getStateTownInfo)){
$state = $row['state'];
$town = $row['town'];
$getTowns[] = $town;
$getStatesTowns[] = $state;
$salesCovered = $row['salesCovered'];
echo "['{$state}', '{$town}', {$salesCovered}],";
}
?>
]);
var townArray = new Array();
<?php foreach($getTowns as $key => $val){ ?>
townArray.push('<?php echo $val; ?>');
<?php } ?>
//object for the area level chart
var data3 = google.visualization.arrayToDataTable([
['town','area','count'],
<?php
$getTownAreaInfo = mysql_query("SELECT `town`,`area`,
SUM(`outlet_status`) as salesCovered FROM `poientry` group by area");
$getArea = Array();
while( $row = mysql_fetch_assoc($getTownAreaInfo)){
$town = $row['town'];
$area = $row['area'];
$getArea[] = $area;
//$getStatesTowns[] = $state;
$salesCovered = $row['salesCovered'];
echo "['{$town}', '{$area}', {$salesCovered}],";
}
?>
]);
var areaArray = new Array();
<?php foreach($getArea as $key => $val){ ?>
areaArray.push('<?php echo $val; ?>');
<?php } ?>
var data4 = google.visualization.arrayToDataTable([
['area', 'pin', 'count'],
<?php
$getAreaPinInfo = mysql_query("SELECT `area`, `pin`,
SUM(`outlet_status`) as salesCovered FROM `poientry` group by pin");
$getPin = Array();
while( $row = mysql_fetch_assoc($getAreaPinInfo)){
$area = $row['area'];
$pin = $row['pin'];
$getPin[] = $pin;
//$getStatesTowns[] = $state;
$salesCovered = $row['salesCovered'];
echo "['{$area}', '{$pin}', {$salesCovered}],";
}
?>
]);
var pinArray = new Array();
<?php foreach($getPin as $key => $val){ ?>
pinArray.push('<?php echo $val; ?>');
<?php } ?>
alert(pinArray);
var dataArray = [];
dataArray[0] = data;
dataArray[1] = data2;
dataArray[2] = data3;
dataArray[3] = data4;
/******************************************/
// set the columns to use in the chart's view (columns object is used
in the view)
// calculated columns put data belonging to each country in the proper
column
var columns = [0];
for (var i = 0; i < pausecontent.length; i++) {
columns.push({
type: 'number',
label: pausecontent[i],
calc: (function (x) {
return function (dt, row) {
//return (row == pausecontent[x]) ? dt.getValue(row, 1)
: null;
return (dt.getValue(row, 0) == pausecontent[x]) ?
dt.getValue(row, 1) : null;
}
})(i)
});
}
//chart wrapper for data
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {
// setting the "isStacked" option to true fixes the spacing problem
'title': 'countries',
'isStacked': true,
'height': 300,
'width': 1000
},
view: {
columns: columns
}
});
/******************************************/
var townsColumns = [1];
for (var i = 0; i < townArray.length; i++) {
townsColumns.push({
type: 'number',
label: townArray[i],
calc: (function (x) {
return function (dt, row) {
return (dt.getValue(row, 1) == townArray[x]) ?
dt.getValue(row, 2) : null;
}
})(i)
});
}
//alert(townsColumns.toSource());
//chart wrapper for data2
var chart2 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div2',
dataTable: data2,
options: {
height: 300,
width: 1000
},
/***view****/
view: {
columns: townsColumns
}
});
/******************************************/
var areaColumns = [1];
for (var i = 0; i < areaArray.length; i++) {
areaColumns.push({
type: 'number',
label: areaArray[i],
calc: (function (x) {
return function (dt, row) {
return (dt.getValue(row, 1) == areaArray[x]) ?
dt.getValue(row, 2) : null;
}
})(i)
});
}
//chart wrapper for data2
var chart3 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div3',
dataTable: data3,
options: {
height: 300,
width: 1000
},
/***view****/
view: {
columns: areaColumns
}
});
/******************************************/
var pinColumns = [1];
for (var i = 0; i < pinArray.length; i++) {
pinColumns.push({
type: 'number',
label: pinArray[i],
calc: (function (x) {
return function (dt, row) {
return (dt.getValue(row, 1) == pinArray[x]) ?
dt.getValue(row, 2) : null;
}
})(i)
});
}
//chart wrapper for data2
var chart4 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div4',
dataTable: data4,
options: {
height: 300,
width: 1000
},
/***view****/
view: {
columns: pinColumns
}
});
chart.draw();
// chart2.draw();
// chart3.draw();
// chart4.draw();
google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getChart().getSelection(); alert("state sel :
"+sel.toSource())
var country = data.getValue(sel[0].row, 0); alert("state : "+country);
var rows = data2.getFilteredRows([{column: 0, value: country}]);
//alert("row data : "+ rows.length);
var view = chart2.getView();
view.rows = rows;
chart2.setView(view);
alert("chart2 obj : "+chart2.toSource());
chart2.draw();
});
//chart2.draw();
google.visualization.events.addListener(chart2, 'select', function () {
var sel = chart2.getChart().getSelection(); alert("town sel :
"+sel.toSource())
var town = data2.getValue(sel[0].row, 1); alert("town : "+town);
//var rows = data2.getFilteredRows([{column: 0, value: country1}]);
//var view = chart2.getView();
//view.rows = rows;
//chart2.setView(view);
//chart2.draw();
});
//chart.draw();
var stateButton = document.getElementById('state');
var townButton = document.getElementById('town');
var areaButton = document.getElementById('area');
var pinButton = document.getElementById('pin');
stateButton.onclick = function() {
alert("button clicked "+stateButton.value);
chart.draw(dataArray[0]);
//alert("button clicked "+button2.value);
//current = 1 - current;
//drawChart();
}
townButton.onclick = function() {
alert("button clicked "+townButton.value);
chart2.draw(dataArray[1]);
}
areaButton.onclick = function() {
alert("button clicked "+areaButton.value);
chart3.draw(dataArray[2]);
}
pinButton.onclick = function() {
alert("button clicked "+pinButton.value);
chart4.draw(dataArray[3]);
}
}
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
