The problem is in translating the rows to the correct index. The simplest approach to solving the problem is to create a DataView in the first event handler and set is as the chart2 s DataTable - that way, when you get the rows from the chart2's selection event, it is easy to compare them to the rows in chart2's DataTable. See example here: http://jsfiddle.net/asgallant/ER6KJ/2/
On Friday, September 20, 2013 3:47:41 PM UTC-4, Ravindra Gharge wrote: > > I am working with the drill down charts > > level 1 - states > level 2 - towns/district(in given link bellow some no.) > level 3 - area > level 4 - pin > > on selecting the one of the state from the column chart > the corresponding towns must be displayed i.e level 2 > > but the problem is after clicking on the district i unable to read the > label of the selected district > > you can check the code at http://jsfiddle.net/ravindra_50/ER6KJ/ > > in above example if i click on second chart i must be able to read the > label > > click on USA ===> next chart is plotted ( alert the label ) > click on 12008 ====> unable to alert the label 12008 ?????? > please help > > > On Friday, September 20, 2013 8:07:36 PM UTC+5:30, asgallant wrote: >> >> What do you mean by "the level two of the select event"? >> >> On Friday, September 20, 2013 8:57:23 AM UTC-4, Ravindra Gharge wrote: >>> >>> 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.
