Integrate Google Visualization Charts Into A Confluence Macro

[Alok Nath Saha]

Hi,

I'd like to know if there's a way to integrate Google Visualization Charts into a confluence macro. For I'm getting data in JSON format and would like to display it in the form of charts. If there's any other way to do it, it'd be nice to know that.

Regards,

Alok Nath Saha

[Davin Studer · Accepted solution]

You could do it fairly easily with a user macro. Here is a rough start ...

## Developed by: Davin Studer
## Date created: 12/16/2015
## @noparams
 
## This is so we can create a unique id ... in case the macro is put on the page more than once.
#set($id = $action.dateFormatter.calendar.timeInMillis)
 
<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.0', {'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() {
    
        // Create the 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]
        ]);
        
        // Set chart options
        var options = {
            'title':'How Much Pizza I Ate Last Night',
            'width':400,
            'height':300
        };
        
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart${id}'));
        chart.draw(data, options);
    }
</script>
 
<div id="chart${id}"></div>

[Pranjal Shukla]

Davin,

The above code works like a charm. However, when i replace that with the new API it does not work. Below is what i am using.

## @noparams
#set($id = $action.dateFormatter.calendar.timeInMillis)
    
	<!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});
      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);
      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        // Create the 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]
        ]);
        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart${id}'));
        chart.draw(data, options);
      }
    </script>
<div id="chart${id}"></div>