getSelection() to get data from row in Google Chart API_问答_开发者

getSelection() to get data from row in Google Chart API

开发者 https://www.devze.com 2023-04-03 02:04 出处：网络

I\'m trying to trigger the creation of a new BarChart with Google\'s Chart API when a user clicks on a particular bar.I think I understand the concepts, and wanted to at least get the getSelection() f

I'm trying to trigger the creation of a new BarChart with Google's Chart API when a user clicks on a particular bar. I think I understand the concepts, and wanted to at least get the getSelection() function to work and display what bar the user clicked on. But everytime, when you click on the bar, it just freezes with the display and no java alert. Any thoughts?

Here's the code:

<script type="text/javascript">
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var visualization = new google.visualization.BarChart(document.getElementById('acctmeta'));
                var json_data = new google.visualization.DataTable({{acctmeta_json}});          

                visualization.draw(json_data, {width: 850, height:开发者_JS百科 600, title: 'Collection Level Populated Metadata Fields',
                                  chartArea: {width:"50%"},
                                  vAxis: {title: 'Collection Title/ID', titleTextStyle: {color: 'green'}},
                                  hAxis: {logScale:false, title:'Fields Populated', titleTextStyle: {color: 'green'}}
                                 });

                // Add our selection handler.
                google.visualization.events.addListener(visualization, 'select', selectHandler);


                // The selection handler.
                // Loop through all items in the selection and concatenate
                // a single message from all of them.
                function selectHandler() {        
                  alert(data.getValue(chart.getSelection()[0].row, 0));
                }

            } //end of draw chart function          
            </script>

Just wondering, should the line

alert(data.getValue(chart.getSelection()[0].row, 0));

alert(data.getValue(visualization.getSelection()[0].row, 0));

Here is a working example of mine. I had to set data and chart as global variables:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);    
  var data; 
  var chart;
  function drawChart() {
   data = new google.visualization.DataTable();  
   data.addColumn('string', 'Where');
   data.addColumn('number', 'What');
   data.addRows([['ABC',87],['ERT',70],['KLJ',38],['UPP',-67],['SSD',27],['UKG',42],['NUS',60],['WEB',96]]);
   var options = {'title':'my chart','width':'600','height':'400','is3D':'true'};
   chart = new google.visualization.ColumnChart(document.getElementById('test3_chart'));
   chart.draw(data, options);
   google.visualization.events.addListener(chart, 'select', selectHandler2);
  }

  function selectHandler2() {
      var selection = chart.getSelection();
      alert('That\'s column no. '+selection[0].row);
  }
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
  <div id=test3_chart>Please wait...</div>
</body>
</html>