Thanks Its worked for me showing button on tooltip.
Now I am trying to increase the height of button named 'Ver Detalles'.
How to increase tooltip action button named 'Ver Detalles'
and
Is there any tap event for tapped on tooltip.
On Thursday, 23 January 2014 13:23:30 UTC+5:30, Ashwinkumar Damji wrote:
>
> I am using google visualization graph api in iOS for iPhone/ iPod.
>
> 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
>
>
> * 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>
>
>
>
>
>
> Thanks.
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
