How to get the bar names from Google Chart api

问题

I am stuck for a couple of days!
I making an app that show cat breeds and when they are discovered in europe.

This is my code:

Since I can't post my code here because the forum want to reformat it.
Check my Google drive:
My code
https://docs.google.com/document/d/1wiwgFI3tGimvXKzOinLUZMYXAaMVscECeQopiyEHB98/edit?usp=sharing

And It returns a good looking chart that looks like this:

What I trying to do is getting the name that's inside a bar of the timeline. As an example, if I click on "pers(ion)" , I want to make dynamicaly a div with more information about the pers(ion). But because it doesn't get a class or id I can't get it.

Does anybody now an easy way do do this?

回答1:

This will help you get the name of the BAR. If you data is

var data = new google.visualization.arrayToDataTable([
    ['Object', 'Count'],
    ["ApexClass", apexCount],
    ["Sobjects", objectCount],
    ["ApexPage", vfPageCount],
    ["Role", rolesCount],
    ["Dashboard", dashboardCount],
    ["Profile", profileCount]

    ]);

Then in select Handler write this

google.visualization.events.addListener(barchart, 'select', countsChartSelectListener);
    function countsChartSelectListener(){
        var selectedItem = barchart.getSelection()[0];
        if (selectedItem) {
            var barName = data.getValue(selectedItem.row, 0);

回答2:

I'm not sure I understand your problem. It looks like you have the select handler setup properly.
In this example, I update the div, userSelect, when the chart is selected.

google.load("visualization", "1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart);

var container;
var chart;
var dataTable;

function drawChart() {
  container = document.getElementById('timeline');
  chart = new google.visualization.Timeline(container);
  dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'President' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
    [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

  chart.draw(dataTable);
  google.visualization.events.addListener(chart, 'select', selectHandler);
}

function selectHandler() {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var topping = dataTable.getValue(selectedItem.row, 0);
    document.getElementById('userSelect').innerHTML = 'The user selected ' + topping;
  }
}

<script src="https://www.google.com/jsapi"></script>

<div id="timeline" style="height: 180px;"></div>

<div id="userSelect"></div>

来源：https://stackoverflow.com/questions/34474529/how-to-get-the-bar-names-from-google-chart-api

标签

javascript

web

google-visualization