Tool tip on Pie chart is not shown

[anurag]

Hi,

I am working on the Pie charts use HTML5/SVG technology .I dnt know
why tool tip are not showing on chart. Please help me out.

I try to implement one of HTML5/SVG example with some change by PHP
script to put dynamic data on chart and every thing working fine
except tool-tip.

Code is below mention here :-


<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Sports');
data.addRows(<?php echo count($pieChartData);?>);
<?php for($i=0;$i<count($pieChartData);$i++) {?>
data.setValue(<?php echo $i;?>, 0, '<?php echo $pieChartData[$i]
['name'];?>');
data.setValue(<?php echo $i;?>, 1, <?php echo (float)
$pieChartData[$i]['value'];?>);
<?php }?>
var chart = new
google.visualization.PieChart(document.getElementById('chart_div2'));
chart.draw(data, {
width: 400,
height: 240,
is3D: true,
pieSliceText : 'percentage',
tooltipTextStyle : {color: 'black'} ,
colors: ['#84AACB', '#AED494', '#FFAC8C',
'#84AACB','#885654']
});
}
</script>

[MC Get Vizzy]

Can you send an example without the PHP?

thanks,

MC Get Vizzy

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[anurag trivedi]

Please check out and provide me solution of this .

Following is code :-

<script type="text/javascript">		
			  google.setOnLoadCallback(drawChart);
			  function drawChart() {
				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Task');
				data.addColumn('number', 'Hours per Sports');
				data.addRows(2);
								data.setValue(0, 0, 'Cykling');
				data.setValue(0, 1, 0.3);
								data.setValue(1, 0, 'Running');
				data.setValue(1, 1, 1.49);
									
				var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
				chart.draw(data, {
				  width: 400,
				  height: 240,
				  is3D: true,
				  pieSliceText : 'percentage',
				  tooltipTextStyle : {color: 'black'} ,
				  fontName:'Helvetica',
				  fontSize:11,
				  colors: ['#84AACB', '#AED494', '#FFAC8C', '#84AACB','#885654']			 			  				  
				});
      		}
    	   </script>

--
Thanks and Regards,
Anurag Trivedi
Software Engineer
09953799743
skype id-anurag.trivedphp

[Roni Biran]

I ran your script without any glitches (I checked it on IE,FF,CH and Safari). maybe you have cache problems?

On what browser (version) are you running that?

[anurag trivedi]

Ya your right cache problem is there ,thanks to take pain to resolved my problem.

Thanks again !

[Roni Biran]

you're more than welcome

[anurag trivedi]

Can we set the chart width in percentage.If yes then how.

[asgallant]

I don't think the configuration options accept percentages for width (although they do for chartArea.width, so maybe they will).  You can calculate them yourself, though:

// set width to 65% of the div's width

var pieDiv = document.getElementById('chart_div2');

options = {width: pieDiv.style.width * 0.65};

var chart = new google.visualization.PieChart(pieDiv);

chart.draw(data, options);

[anurag trivedi]

Sorry tool-tip problem is still there .I think i am plotting three chart in a single page that why Pie chart some feature like tool-tips is not working.
See below code

<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', 'Year');
				data.addColumn('number', 'Indiviual');
				data.addColumn('number', 'Team');
				data.addRows([
                ['26 Week',0,0],['27 Week',2.19,7.3]							
			    ]);
				var chart = new google.visualization.AreaChart(document.getElementById('chart_div1'));
				chart.draw(data, {width: 800, height: 440, 
								  colors: ['#84AACB', '#885654'],
								  chartArea: {top:20},
								  fontName:'Helvetica',
								  fontSize:11,
								  is3D: true
								 });
			  }
			</script>	
            <!--Pie chart poltting coding  -->  		         
            <script type="text/javascript">	
			  google.load("visualization", "1", {packages:["corechart"]});	
			  google.setOnLoadCallback(drawChart);
			  function drawChart() {
				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Task');
				data.addColumn('number', 'Hours per Sports');
				data.addRows(2);
								data.setValue(0, 0, 'Cykling');
				data.setValue(0, 1, 0.3);
								data.setValue(1, 0, 'Running');
				data.setValue(1, 1, 1.49);
									
				var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
				chart.draw(data, {
				  width: 350,
				  height: 240,
				  is3D: true,
				  pieSliceText : 'percentage',
				  tooltipTextStyle : {color: 'black'} ,
				  fontName:'Helvetica',
				  fontSize:11,
				  colors: ['#84AACB', '#AED494', '#FFAC8C', '#84AACB','#885654']			 			  				  
				});
      		}
    	   </script>

           <!--Column chart poltting coding  --> 
           <script type="text/javascript">	
		      google.load("visualization", "1", {packages:["corechart"]});		   	  	  
			  google.setOnLoadCallback(drawChart);
			  function drawChart() {
				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Year');
				data.addColumn('number', 'Individual_Activities');
									data.addColumn('number','Englers & Co.');
									data.addColumn('number','My first team');
								data.addRows(3);				
				data.setValue(0, 0, 'Individual_Activities');
				data.setValue(0, 1, 2);	
								data.setValue(1, 0, 'Englers & Co.');				
				data.setValue(1, 1, 6);					
								data.setValue(2, 0, 'My first team');				
				data.setValue(2, 1, 1);					
								var chart = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
				chart.draw(data, {width: 400, height: 240,
								  colors: ['#84AACB', '#84AACB', '#84AACB', '#84AACB', '#84AACB'],
								  legend: 'none',
								  fontName:'Helvetica',
				  				  fontSize:11,
								  is3D: 1
								 });
			  }
			</script>
<div id="chart_div1" algin="center" style="margin-bottom:-100px;border: 1px solid rgb(204, 204, 204); position: relative;"></div>  
<div id="chart_div2" style="float:left; margin-bottom:-10px;border: 1px solid rgb(204, 204, 204); position: relative;"></div>
<div id="chart_div3" style="margin-bottom:-10px;border: 1px solid rgb(204, 204, 204); position: relative;"></div>




Please help me out.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/pijnb9n9u1IJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Jinji]

Could be due to the "float:left" style of the div. Using Firebug/ChromeDevTools, look if there's a div the completely covers another div. If this is the case, only the covering div will get mouse events, and not the covered div.