Estou utilizando o google charts para apresentar relatório de vendas das lojas.
É possível pegar qual índice (número) da lista foi clicado? Coloquei o listener no tag nav e quando clicar na li queria retorna o índice para atualizar a variável posicaoAtual e gerar um novo gráfico.
Segue página html
<!DOCTYPE>
<html>
<head>
<title>DashBoad</title>
<meta content="text/html; charset=utf-8">
<meta name="*viewport*" content="width=device-width">
<LINK href="estilos.css" rel="stylesheet" type="text/css">
<!-- Carrega a AJAX API -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body class="container">
<header style="width:100%">
<h1 class="textocenter">Acompanhamento de Consórcios</h1>
</header>
<main>
<div style="width:100%;margin: 0 auto;">
<div class="areaMenu">
<nav id="listas">
<ul>
<li>Todos</li>
<li>Ilheus</li>
<li>Ag2</li>
<li>Ag3</li>
<li>Ag4</li>
<li>Ag5</li>
<li>Ag6</li>
<li>Ag7</li>
<li>Ag8</li>
<li>Ag9</li>
<li>Ag10</li>
</ul>
</nav>
</div>
<div id="chart" class="graficoPrincipal bordas"></div>
</div>
</main>
<script type="text/javascript" src="charts.js"></script>
</body>
</html>
Segue javascript
google.charts.load('current', {'packages':['corechart', 'table'], 'language': 'pt-br'});
google.charts.setOnLoadCallback(criarGrafico);
var data = [];
data[0] = [['Mes', 'Vendas', 'Canc', 'Qtd Venda', 'Qtd Canc'],
['janeiro', 430000, 210752, 9, 5],
];
data[1] = [['Mes', 'Vendas', 'Canc', 'Qtd Venda', 'Qtd Canc'],
['janeiro', 95000, 0, 2, 0],
];
data[2] = [['Mes', 'Vendas', 'Canc', 'Qtd Venda', 'Qtd Canc'],
['janeiro', 0, 0, 0, 0],
];
var posicaoAtual = 0;
function criarGrafico(){
var dataTable = new google.visualization.arrayToDataTable(data[posicaoAtual]);
var options = {
legend: {
position:'bottom'
},
hAxis:{title:'meses'},
seriesType: 'bars',
series:[{type:'line', pointSize: 10, targetAxisIndex:2, color:'#2E2EFE'},
{type:'line', pointSize: 10, targetAxisIndex:2, color:'#DF0101'},
{type:'bars', targetAxisIndex:0, color:'#5882FA'},
{type:'bars', targetAxisIndex:0, color:'#FF4000'}],
vAxes:[{title:'Quant.'},
{title:'Valor', format:'#.###'}],
hAxes: [{title: 'Meses', textPosition:'out'}],
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(dataTable, options);
}
var lis = document.querySelector('#listas');
lis.addEventListener("click", function(event){
var origem = event.target;
if (origem.tagName == "LI")
console.log(origem.textContent);
});