javascript - Not able to click on label in google chart api -
i new javascript , using google chart api creating charts. wanted click on left side label shows in below image. so, question can click on left side label? give me idea this. if possible me.
function drawstackedchart(reqcategoryid,fcategoryname) { $.ajax({ url: "http://localhost:8080/thesanshaworld/sfcms/fetch-complaint-result-for-other-category?categoryid="+reqcategoryid, datatype: "json", success : function(jsondata) { var data = new google.visualization.datatable(); // add columns data.addcolumn('string','categoryname'); data.addcolumn({type: 'number',role: 'interval'}); var complaintstatus = jsondata[0].complaintstatus; for(var i=0;i<complaintstatus.length;i++) { data.addcolumn('number',complaintstatus[i].statusname); data.addcolumn({type: 'number',role: 'scope'}); } data.addrows(jsondata.length); var maxval=jsondata[0].totalcountcomplaint; for(i=0;i<jsondata.length;i++) { // trying create hyperlink data.setcell(i,0,'<a href="next.html">+jsondata[i].categoryname+</a>'); data.setcell(i,1,jsondata[i].categoryid); for(j=0; j< jsondata[i].complaintstatus.length; j++) { data.setcell(i,parseint(jsondata[i].complaintstatus[j].statusid)*2, jsondata[i].complaintstatus[j].countcomplaint); data.setcell(i,parseint(jsondata[i].complaintstatus[j].statusid)*2+1, jsondata[i].complaintstatus[j].statusid); } if(jsondata[i].totalcountcomplaint>maxval) maxval=jsondata[i].totalcountcomplaint; } var options = { title : fcategoryname+' complaints dashboard', titletextstyle : { fontname : 'arial', fontsize : 18, bold : true, }, isstacked:true, chartarea: {width:'50%',height:'75%'}, bar: {groupwidth: '50%'}, tooltip : { ishtml : true, textstyle : { fontname : 'sans-serif', fontsize : 14, bold : false } }, haxis:{ title:'status values', gridlines : { count : maxval+1 }, baseline:maxval,//static }, vaxis:{ title:'complaint\'s categories', textstyle : { fontname : 'sans-serif', fontsize : 18, bold : false, }, }, }; var chart = new google.visualization.barchart(document.getelementbyid('donutchart')); chart.draw(data, options); new google.visualization.events.addlistener(chart, 'select', selectionhandler); function selectionhandler() { // code selection handler } 
you can use targetid of 'click' event find label clicked
when y-axis label clicked, targetid hold value similar following...
vaxis#0#label#0 you can use string method split, find label value in data
selection = e.targetid.split('#'); when first value = vaxis, means y-axis label clicked
if (selection[0].indexof('vaxis') > -1) { the first integer refers y-axis, in example, there 1
the second integer refers row in data
to value clicked...
data.getvalue(rowindex, colindex); e.g.
data.getvalue(parseint(selection[selection.length - 1]), parseint(selection[1]))); see following working snippet...
google.charts.load('current', { callback: drawchart, packages:['corechart'] }); function drawchart() { var data = google.visualization.arraytodatatable([ ['element', 'density', { role: 'style' } ], ['copper', 8.94, '#b87333'], ['silver', 10.49, 'silver'], ['gold', 19.30, 'gold'], ['platinum', 21.45, 'color: #e5e4e2'] ]); var options = { title: 'density of precious metals, in g/cm^3', width: 600, height: 400, bar: {groupwidth: '95%'}, legend: { position: 'none' }, }; var chart = new google.visualization.barchart(document.getelementbyid('chart_div')); google.visualization.events.addlistener(chart, 'click', function(e) { var selection; if (e.targetid) { selection = e.targetid.split('#'); if (selection[0].indexof('vaxis') > -1) { console.log('label clicked = ' + data.getvalue(parseint(selection[selection.length - 1]), parseint(selection[1]))); } } }); chart.draw(data, options); }<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
Comments
Post a Comment