Icon
Maintenance Notice: answers.atlassian.com will undergo maintenance from 13:00 - 17:00 UTC on 4 September 2015. During this maintenance window, the service will be offline.
 
1
0
-1

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>
    CommentAdd your comment...

    3 answers

    1.  
      2
      1
      0

      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.

      1. Akeles
        Hi David, Thanks for the cool tip :)
      CommentAdd your comment...
    2.  
      2
      1
      0

      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..

        CommentAdd your comment...
      1.  
        1
        0
        -1

        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.

          CommentAdd your comment...