Recently I was creating a Grails 3 app that was designed to parse errors in an external application (logged to a database.)

My app would query the errors that were saved to the database – these are errors that have occurred in a time range – I’d pull the results and loop through them to get a count of each error that threw an error and get a count of errors per day.

The whole thing came together quickly until I decided to add a graph.  I choose the google visualization JS library to plot the data into a line graph.  But the data was not being read by Google’s Visualization package.

The Problem with Quotes to the GSP

When you pass data to the Google Visualization API, you need to pass data in specific formats.  For time series axis data (dates, or times) or for any strings, you’ll be sending the data to the GSP view with quotes around the data.

I did this… and the chart would never load. I would INSPECT (via browser inspect) and I noticed the data didn’t have any quotes.

The GSP view would have a GString like so:

${myData}

Inspecting the result in the browser I’d see a proper formatted result like:

[[June 1, 2018 18:23:00 PST, 250]]

But the quotes were missing.

I went through a series of variations of the controller passing quotes to the view.  I tried escaping quotes, constructing quotes, etc.  When I did that, the inspector showed the data right, but the chart still wasn’t rendering:

[[‘June 1, 2018 18:23:00 PST’, 250]]

URL Encoding

A co-worker friend of mine told me to view the raw source of the page, rather than using inspector.  Sure enough, a problem.  In the raw page source the quotes were appearing as URL / HTML encoded:

[['05/18', 8]]

That’s frustrating.

This is why the Google Visualization was failing though.

Solution: Turning Off Encoding

Turns out the solution is to add this tag around the GString that is having the encoding issue (I found the solution from http://aruizca.com/how-to-render-json-properly-without-escaping-quotes-inside-a-gsp-script-tag/):

<g:applyCodec encodeAs=”none”> </g:applyCodec>

Doing that will completely resolve this issue… it took a lot of digging to find the solution though.  This tag removes the encoding that is passed from the controller to the GSP.

Now with the proper quotes, the Google Visualizations loaded correctly.