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.
