Avatar billede steen-h Mester
30. november 2012 - 19:27 Der er 2 kommentarer og
1 løsning

Google Bar Chart med click event

Jeg har lavet et søjlediagram med Google Bar Chart

<!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Load the Visualization API and the ColumnChart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);

      var options = {
          title: 'Mit diagram',
          hAxis: {title: '<?echo $title?>'},
          is3D: 'true',
          width: 1200,
          height: 600
        };

      // Instantiate and draw our chart, passing in some options.
      //do not forget to check ur div ID
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }  </script>

Det vil jeg gerne have tilføjet en event når jeg trykker på en søjle.
Har fundet dette på googles side


function myClickHandler(){
  var selection = myVis.getSelection();


  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

Men hvordan hægter jeg det sammen med mit ?
Avatar billede jakobdo Ekspert
30. november 2012 - 19:39 #1
Avatar billede steen-h Mester
30. november 2012 - 20:36 #2
Tak for hjælpen, nu har jeg fået det til at virke.
Læg et svar.

function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);

      var options = {
          title: 'Mit diagram',
          hAxis: {title: '<?echo $title?>'},
          is3D: 'true',
          width: 1200,
          height: 600
        };

      // Instantiate and draw our chart, passing in some options.
      //do not forget to check ur div ID
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);

// Add our selection handler.
  google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);


});
    }
Avatar billede jakobdo Ekspert
30. november 2012 - 20:54 #3
Svar!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester