Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

238
Views
Why would I have to do chart.draw twice to get a Google pie chart to display?

I have a page in an app that displays all sorts of ticket metrics from several different ticketing systems we use. I use the same function to build each of the charts and display them:

function drawChart(chartData, chartStyle, chartTitle, chartSpanID) {
  var data = new google.visualization.DataTable();
  
  data.addColumn('string', 'Hour');
  data.addColumn('number', 'Tickets');
  data.addRows(chartData);
  
  if(chartStyle == "column"){
    var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID));
    var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}}
    };
  
  if(chartStyle == "pie"){
    var chart = new google.visualization.PieChart(document.getElementById(chartSpanID));
    var options = {title:chartTitle, 
                   chartArea:{left: 0, top:20, bottom:10, right: 0},
                   is3D: true,
                   sliceVisibilityThreshold: .01,
                   animation:{startup: true,easing: 'in', duration:1000},
                   pieResidueSliceLabel: "Other( < 1%)"};
};
chart.draw(data, options);

}

This works for 13 of the 14 charts displayed on the page. 8 Columns and 5 out of 6 pie charts all display perfectly. One of the pie charts will ONLY display if I draw the chart a second time.

function drawChart(chartData, chartStyle, chartTitle, chartSpanID) {
  var data = new google.visualization.DataTable();
  
  data.addColumn('string', 'Hour');
  data.addColumn('number', 'Tickets');
  data.addRows(chartData);
  
  if(chartStyle == "column"){
    var chart = new google.visualization.ColumnChart(document.getElementById(chartSpanID));
    var options = {title:chartTitle,chartArea: {left: 30, top:20, bottom:30, right:10},animation:{startup: true, duration:2000}}
    };
  
  if(chartStyle == "pie"){
    var chart = new google.visualization.PieChart(document.getElementById(chartSpanID));
    var options = {title:chartTitle, 
                   chartArea:{left: 0, top:20, bottom:10, right: 0},
                   is3D: true,
                   sliceVisibilityThreshold: .01,
                   animation:{startup: true,easing: 'in', duration:1000},
                   pieResidueSliceLabel: "Other( < 1%)"};
};
chart.draw(data, options);
chart.draw(data, options);
}

The data is delivered correctly, all calls are made through google.charts.setOnLoadCallback, it all works just fine once called again... so why is it only working on the second call? Why just the one chart that doesn't display as expected? What have I missed?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!