I am using google visualization graph api on Web.
I am trying to show button on tooltip and Hide tooltip when tap/click on anywhre on chart area.
Tootlip action(button on tooltip) does not display When I write following line
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
I already written the following lines to show button on tooltip.
chart.setAction({id: 'sample', text: 'Ver detalles', action: function() { selection = chart.getSelection(); var selectedRow = selection[0].row; window.location.href = "yourapp://"+selectedRow;}});
tooltip:{trigger: 'selection'}
Also I am trying to dismiss the tooltip on tap anywhere on graph area. How to do that?
I am using following code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Dates');
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number','Glucose');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows(
[
['02:31 p.m.',100.00,createCustomHTMLTooltipContent('21 ene - 02:31 p.m. | 100.00', 'Tttt'),null,'',100.00,createCustomHTMLTooltipContent('21 ene - 02:31 p.m. | 100.00', 'Tttt'),null,'',100.00,createCustomHTMLTooltipContent('21 ene - 02:31 p.m. | 100.00', 'Tttt')],['02:32 p.m.',110.00,createCustomHTMLTooltipContent('21 ene - 02:32 p.m. | 110.00', 'Hshu'),null,'',110.00,createCustomHTMLTooltipContent('21 ene - 02:32 p.m. | 110.00', 'Hshu'),null,'',110.00,createCustomHTMLTooltipContent('21 ene - 02:32 p.m. | 110.00', 'Hshu')],
['02:35 p.m.',1000.00,createCustomHTMLTooltipContent('21 ene - 02:35 p.m. | 1000.00', 'Byzui'),null,'',1000.00,createCustomHTMLTooltipContent('21 ene - 02:35 p.m. | 1000.00', 'Byzui'),null,'',1000.00,createCustomHTMLTooltipContent('21 ene - 02:35 p.m. | 1000.00', 'Byzui')],['05:55 p.m.',null,'',555.00,createCustomHTMLTooltipContent('21 ene - 05:55 p.m. | 555.00', 'New'),null,'',555.00,createCustomHTMLTooltipContent('21 ene - 05:55 p.m. | 555.00', 'New'),555.00,createCustomHTMLTooltipContent('21 ene - 05:55 p.m. | 555.00', 'New')]
]
);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.setAction({id: 'sample', text: 'Ver detalles', action: function() { selection = chart.getSelection(); var selectedRow = selection[0].row; window.location.href = "yourapp://"+selectedRow;}});
chart.draw(data,
{
width: 319,
height: 140,
chartArea:{top:20,left:34,width: '85%',height: '70%'},
legend: { position: 'bottom', alignment:'start'},
interpolateNulls:true,
backgroundColor:'transparent',
legend: {position: 'none'},
hAxis: {textStyle: {color: '#343434',fontName: 'verdana',fontSize:6},showTextEvery:1, baselineColor:'transparent',gridlineColor: 'transparent',count:0,minTextSpacing:20},
vAxis: {title:'Glucosa', textStyle: {color: '#343434',fontName: 'verdana',fontSize:6},baselineColor:'transparent',gridlineColor: 'transparent',count:0},
fontSize: 6,
lineWidth:3.0,
tooltip:{textStyle:{color: '#343434', fontName:'verdana',fontSize: 10}, isHtml:'true', trigger: 'selection'},
series: {
0:{color: '#d57829', visibleInLegend: true, lineWidth: 0, pointSize: 4},
1:{color: '#047d94',lineWidth: 0,visibleInLegend: true,pointSize:4 },
2:{color: '#d57829', visibleInLegend: true, lineWidth: 0, pointSize:6},
3:{color: '#047d94',lineWidth: 0,visibleInLegend: true,pointSize:6},
4:{color: '#FFFFFF',visibleInLegend: true,pointSize:0}
}
}
);
}
function createCustomHTMLTooltipContent(readingInfo, commentText)
{
return '<div style="padding:5px 5px 25px 5px;">' + readingInfo + '<br>' + commentText + '</div>';
}
</script></head><body style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
<div id="chart_div"></div>
</head>
</html>
Current output of above code as displaying in the image.
Any help will be appreciated.
`.
– Anto Jurković Jan 23 '14 at 18:14