google charts as a javascript function

Question

forgive my javascript.. I want to take the google charts code and use it once as a function then call it in the page loop with a single line as follows:

javascript function (in header)

  var taxes, purchase_costs, closing_costs, holding_costs, cost_money, commissions, theid;

 function costPieChart(taxes,purchase_costs,closing_costs,holding_costs,cost_money,commissions,theid)
 {

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


  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Item');
    data.addColumn('number', 'Cost');
    data.addRows([   
      ['Taxes', taxes],
      ['Purchase Costs', purchase_costs],
      ['Closing Costs', closing_costs],
      ['Holding Costs', holding_costs],
      ['Cost of Money', cost_money],
      ['Commissions', commissions]  
    ]);

    var options = {
    width: 190, legend: 'none',
      colors:['red','blue', '993399', 'grey', 'ff6600', 'green']
    };

    var chart = new google.visualization.PieChart(document.getElementById(theid));
    chart.draw(data, options);
  }
  }

then in the html by php loop

    <script type="text/javascript">
        costPieChart(<?php echo round($method['tax_amount_for_days']).', '.round($method['closing_costs_purchase']).', '.
              round($method['holding_costs']).', '.round($method['cost_of_money']).', '.round($method['commissions_amount']).", 'chart_div".$i."'" ; ?>); 

    </script>
      <div class="chart_wrap"> <div id="chart_div<? echo $i ?>"></div> </div>

The loop works renders the javascript and html but alas, the cute lil pie chart is absent. Help?

Adam Rackis · Accepted Answer · 2011-12-27 15:48:59Z

2

You never call your drawChart function. You need to call that at some point to draw your pie chart.

var options = {
width: 190, legend: 'none',
  colors:['red','blue', '993399', 'grey', 'ff6600', 'green']
};

var chart = new google.visualization.PieChart(document.getElementById(theid));
chart.draw(data, options);

drawChart();  // <---  like this

}

answered Dec 27, 2011 at 15:48

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

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

5 Comments

Robert Over a year ago

doesn't work. And it wasn't ever visibly called in googles chart script. Maybe google calls it on their end.

Adam Rackis Over a year ago

@Robert - I'm really not sure. But to get that pie chart to draw, you'll definitely need to call that function. As to why it happens to be broken, I'm not sure. Are you getting an error?

Robert Over a year ago

Here we go, Uncaught Error: Type mismatch. Value chart_div1 does not match type number in column index 1 and it repeats for each instance.

Adam Rackis Over a year ago

@Robert - I'm not really an expert on google charts. I would ask a new question detailing the error with your new code. Also, make sure you tag it with google charts.

Robert Over a year ago

it works. I feel a bit silly. I missed one variable in the call costPieChart line. so it gave the mismatch. Otherwise the code I posted above works fine. Thanks @Adam.

Collectives™ on Stack Overflow

google charts as a javascript function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related