Embedding Google Charts within Confluence

Akeles
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 11, 2011

Anyone tried embedding Google Charts within Confluence?

I encountered a strange scenario where I embed a working code below within the html macro. It works in preview mode and the saved page, but will always throw error "undefined is not a function" during normal page view.

Thanks in advance.

<script type="text/javascript" src="https://www.google.com/jsapi"></script> <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); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { alert(google.visualization); // Create our data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); } </script>

3 answers

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

1 vote
Ellen Feaheny [AppFusions]
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 5, 2012

Yeh - this in on our roadmap for the AppFusions' Google Docs to Confluence (and JIRA) connector.

If anyone else wants this, do let us know at info@appfusions.com

It hasn't raised in priority that much - but we'll get to it..

1 vote
David at David Simpson Apps
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
June 13, 2011

You might want to consider the gvCharts jQuery plugin if you want to reuse your code.

It'll take an HTML table and convert it into a Google Chart. It would be a bit more flexible if you want to roll this into a plugin at some stage. Here's a demo.

Akeles
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 19, 2011
Hi David, Thanks for the cool tip :)
0 votes
Soubhik Dawn September 26, 2014

I used the Google Charts API and embedded it into the HTML macro as follows:

<img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=p&chs=380x200&chd=t:41,55,4&chl=41%|55%|4%&chdl=Cash|Credit_Card|Check&chco=26AD21|1D82C4|F0A016">

And it works perfectly fine.

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events