Problem with text written inside slices of pie chart

[ni...@proprofs.com]

Hello there,

I am facing a very strange problem that the text inside slice is going half outside the slice.

Please help me in adjusting the text.

Screenshot attached.

[asgallant]

You can't adjust the placement of the text.  If you post code that replicates the problem, I'll take a look and see if there are any tricks I can come up with to end-route the problem.

[ni...@proprofs.com]

Hi asgallant,

Here is my code...

<?php

$survey_question = "SELECT id,answer,total_attempt,questionid from survey_answer where `questionid` = $ques_id AND `answer`!='' AND status='1' ORDER BY id ASC";

$answers_result = @mysql_query($survey_question);

$table = array();

$table['cols'] = array(

array('label' => 'Question', 'type' => 'string'),

array('label' => 'Total Attempt', 'type' => 'number')

);

$rows = array();

while($r = mysql_fetch_assoc($answers_result)) {

//print_r($r);

$temp = array();

$temp[] = array('v' => (string) $r['answer']);  // you will probably need to transform this into the Date object format

$temp[] = array('v' => (int) $r['total_attempt']);  // typecast to int, float, whatever - if you don't, it will be interpreted as a string

$rows[] = array('c' => $temp);

}

$table['rows'] = $rows;

$jsonData = json_encode($table);

//echo $jsonData;

?>

<div id="draw_chart<?php echo $questio_print ?>"></div>

<script type="text/javascript">

// Load the Visualization API and the piechart package.

google.load("visualization", "1", {packages:["corechart"]});

// Set a callback to run when the Google Visualization API is loaded.

google.setOnLoadCallback(drawChart);

function drawChart() {

 // Create our data table out of JSON data loaded from server.

 var data = new google.visualization.DataTable(<?php echo $jsonData ?>);

 var options = {

  is3D: true,

  width: 900,

  height: 300

};

 // Instantiate and draw our chart, passing in some options.

 // Do not forget to check your div ID

 var chart = new google.visualization.PieChart(document.getElementById('draw_chart<?php echo $questio_print ?>'));

 chart.draw(data, options);

}

</script>

[asgallant]

The PHP code doesn't help me here, can you open the page in a browser, view the source, and paste the javascript here?

[Nitin Jaiswal]

Asgallant, here is the javascript: <div style="float:none" id="draw_chart1"></div>

	<script type="text/javascript">
	// Load the Visualization API and the piechart package.
	google.load("visualization", "1", {packages:["corechart"]});
	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawChart);
	function drawChart() {
	// Create our data table out of JSON data loaded from server.

var data = new google.visualization.DataTable({"cols":[{"label":"Question","type":"string"},{"label":"Total Attempt","type":"number"}],"rows":[{"c":[{"v":"asd"},{"v":5}]},{"c":[{"v":"asd"},{"v":7}]},{"c":[{"v":"sdfas"},{"v":2}]}]});

	var options = {
	is3D: true,

	width: 700,
	height: 300,
	chartArea: {width:400, height:400, left:9,top:9,bottom:0,right:0}

	};
	// Instantiate and draw our chart, passing in some options.
	// Do not forget to check your div ID

	var chart = new google.visualization.PieChart(document.getElementById('draw_chart1'));
	chart.draw(data, options);
	}
	</script>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/buKfiCbALRU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[asgallant]

I tried it out and can't duplicate the issue in any browser: http://jsfiddle.net/asgallant/6kLQj/.  If the fiddle displays properly for you, check your site's CSS to make sure there isn't anything interfering with the chart.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Nitin Jaiswal]

Hi asgallant,

I have debugged my code rigorously and finally find out the actual problem.

Actually what I wanted was that a single div containing pie charts that are being created dynamically and by default the are hide.

After loading of page user can show or slide the div by clicking a div.

When I tried to display the content using slideToggle() or show() the digits were going outside but when I remove display:none attribute from style, it starts working fine.

I think it is a new bug.

I don't find any other way to serve the purpose. Please help me out.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Nitin Jaiswal]

Hey asgallant,

Thanks for your support.

Although I have solved my problem :)

[asgallant]

That would indeed cause problems like this.  The solution most often used (and you may have stumbled upon this given the your post below) is to unhide the div prior to drawing and use a 'ready' event handler for the chart to hide the div immediately upon finishing drawing.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Nitin Jaiswal]

absolutely! I did the same thing after finding out the real problem. Well thanks asgallant once again.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Edward Fung]

Sorry to revive this post. 

But I have problem displaying your piechart in the given jsfiddle.

[Nitin Jaiswal]

Dear Asgallant,

I had solved this issue by hiding the div after complete creation of pie chart.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

Could you post code that reproduces the problem?

[Edward Fung]

My pie charts also have this problem. I will post my code later

But if I go to your fiddle (http://jsfiddle.net/asgallant/6kLQj/) with google chrome, the display problem happens. 

if I switch to firefox, there is NO display problem.

I guess it is an issue with cross-browser support.

My google chrome and firefox version are "Version 31.0.1650.48 m" and "25.0" respectively.

[asgallant]

I looked at that fiddle in Chrome and I don't see any issues with the pie slice text.

[Edward Fung]

I am using a windows machine right now. Not sure it is the cause (o:

I also tried in incognito mode with all extension disabled. But the text on blue slice is not properly displayed. Actually, only the blue slice has problem.

I have Linux and Mac machine at home. Maybe I try it tonight and tell you the result.

[asgallant]

I just heard from another user that is experiencing the same problem, so there might be a bug that appears under specific circumstances.  I suggest filing a bug report here: http://code.google.com/p/google-visualization-api-issues/issues/list.  Include code that reproduces the problem for you (a link to my jsfiddle is fine if that code exhibits the problem) and as much detail about your local environment as you can provide (operating system, browsers used [with version numbers], etc).

[asgallant]

There's a bug report on this issue: https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1364.  You can "star" the issue to get updates on it.  It might help the developers if you can provide additional details in comments.

[Edward Fung]

Thanks. Google Chrome under ubuntu 13.04 has the same problem.

[Thomas Rybka]

Hey guys, just FYI, this is a chrome bug:

https://code.google.com/p/chromium/issues/detail?id=322705

It should be fixed in an upcoming release of v32 of Chrome.

Thomas Rybka | Software Engineer | try...@google.com | Google

--
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 google-visualizati...@googlegroups.com.