Google pie chart displaying vertically not horizontally when loaded by ajax

Question

simple pie chart example from google chart displaying pie chart vertically when onclick loaded by ajax , when same code loaded in simple web page displaying horizontally.

 <script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
      legend: {'position':'none'},
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>
<div id="donutchart" style="width: 300px; height: 300px; border: 1px solid red;"></div>

Darshan theerth · Accepted Answer · 2025-05-16 09:05:04Z

1

The issue you're experiencing - the Google Pie Chart displaying vertically when loaded via AJAX, but horizontally when loaded directly in a simple HTML page — is typically caused by CSS transformations or container rendering issues triggered during asynchronous DOM updates.

You can use google.visualization.events.addListener() and redraw on resize.

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
    legend: {'position':'none'},
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

  google.visualization.events.addListener(chart, 'ready', function () {
    window.dispatchEvent(new Event('resize'));
  });

  chart.draw(data, options);
}

answered May 16 at 9:05

Darshan theerth

5611 gold badge13 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2069448 May 16 at 17:48

thanks , changed my code with google.visualization.events.addListener but it didnt work, but your suggestion about my web page's CSS is main cause of this , after loading chart i don't know why svg { transform: rotate(-90deg);} line appear . my whole css didnt have this style for svg .

user2069448 May 17 at 8:47

found out one of script rule was rotating svg - 90deg, also effecting chart svg .

icare · Accepted Answer · 2025-05-16 06:28:45Z

0

Can't debug without seeing the code.

answered May 16 at 6:28

icare

1

2 Comments

Darshan theerth May 16 at 9:07

You can rather comment on the question, than commenting inside answer section.

Community May 16 at 9:14

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Google pie chart displaying vertically not horizontally when loaded by ajax

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related