Jay S. February 2016

Creating a responsive Chart with the Grails Google Visualization API Plugin?

I am using the Grails google visualization api plugin with a bootstrap theme and it is working great but I would like to make it responsive somehow. Is there a simple way to do this through the plugin or some other method? I pasted a sample chart(complete content of the .gsp) I was working on that displays fine but when I resize the screen it does not work. Grails 2.5.2 Thanks!!

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>



</head>
<body>


<gvisualization:columnCoreChart elementId="barchart"
                                hAxis="${[slantedTextAngle: '180', textStyle: [color: 'black', fontName: 'Arial', fontSize: 10]]}"
                                bar="${[groupWidth: '50%']}"
                                title="Sales per Month"
                                titleTextStyle="${[color: 'black', fontName: 'Arial', fontSize: 14]}"
                                legend="${[position: 'bottom']}"
                                isStacked="${false}"
                                height="${400}"
                                columns="${colData}" data="${chartData}"/>

<div id="barchart"></div>

</body>
</html>

Answers


WhiteHat February 2016

I'm not familiar with grails, this might help.

First, give the chart a name, you can use this to access the chart variable in JavaScript.
I think the default is visualization.

Add a handler for the ready event, and when fired, activate the resize listener.

Then you can determine the size the chart should be, and redraw the chart.

But this is where I get lost.
In order to redraw the chart, you need the chart data and options.

<!DOCTYPE html>
<html>
<head>
  <script src="https://www.google.com/jsapi"></script>
  <script>

    function readyHandler() {
      window.addEventListener('resize', redrawChart, false);
    }

    function redrawChart() {
      var chartHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) + 'px'
      var chartWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';

      // rebuild options or access hAxis and others from tag
      var options = {
        height: chartHeight,
        width: chartWidth,
        hAxis: {
          slantedTextAngle: '180',
          // rest of options
        }
      };

      // build data
      var arrData = [];
      arrData.push(${colData});    // ??
      arrData.push(${chartData});  // ??

      var data = new google.visualization.DataTable(arrData);

      // redraw named chart
      gvisBarChart.draw(data, options);
    }

  </script>
</head>
<body>
  <gvisualization:columnCoreChart name="gvisBarChart"
                                  elementId="barchart"
                                  hAxis="${[slantedTextAngle: '180', textStyle: [color: 'black', fontName: 'Arial', fontSize: 10]]}"
                                  bar="${[groupWidth: '50%']}"
                                  title="Sales per Month"
                                 

Post Status

Asked in February 2016
Viewed 2,069 times
Voted 10
Answered 1 times

Search




Leave an answer