Passing JSON String to Google Charts in Play Framework controller to Scala view is not recognized nor do the charts display

[Dan Zeller]

I hope this is the correct forum for my issue.

I have posted this issue over in StackOverflow, but have not received any response:

http://stackoverflow.com/questions/41062894/passing-json-string-to-google-charts-in-play-framework-controller-to-scala-view

I have a controller in Play that passes a string in JSON format to a Scala view:

    public Result reportsPieChart() {
    String jsonString = "{cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}],rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]}";
    return ok(piechart.render(jsonString));
    }

In the view, I am using this variable in the Javascript to display the Google Chart:

    @(jsonString: String)
   
    @main(null) {
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript">
    google.charts.load('current', {
    packages : [ 'corechart' ]
    });
    google.charts.setOnLoadCallback(drawChart);
   
    function drawChart() {
    var jsonString = "@jsonString";
    var newJSON = jsonString.replace(/&#x27;/g, "'");
    console.log("newJSON: " + newJSON);
   
    // Define the chart to be drawn.
    var data = new google.visualization.DataTable(newJSON);
   
    // Instantiate and draw the chart.
    var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
    chart.draw(data, null);
    }
    </script>
    <section id="displayResults" style="padding: 30px;">
    <!-- Identify where the chart should be drawn. -->
      <div id="myPieChart"/>  
    </section>
    }

When passing the newJSON variable to the DataTable, it seems not to recognize it -- no errors, nothing to the console -- and does not display any charts.

The newJSON variable prints out to console in the correct format:

    newJSON: {cols: [{id: 'task', label: 'Task', type: 'string'}, {id: 'hours', label: 'Hours per Day', type: 'number'}],rows: [{c:[{v: 'Work'}, {v: 11}]}, {c:[{v: 'Eat'}, {v: 2}]}, {c:[{v: 'Commute'}, {v: 2}]}, {c:[{v: 'Watch TV'}, {v:2}]}, {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]}

I am following the instructions from Google:

https://developers.google.com/chart/interactive/docs/reference#datatable-class

In the example, I copied that JSON into my string.

Is there something I missing within Scala in a view to get this variable to work?  According to Google, you can pass a literal string to the DataTable.

I appreciate the help!

[Dan Zeller]

I found a solution to this...

Need to have double quotes around both name and value, not just the value...

So, my Javascript changed to:

var newJSON = jsonString.replace(/&#x27;/g, '"');

And the JSON String is set to:

{"cols": [{"id": "task", "label": "Task", "type": "string"}, {"id": "hours", "label": "Hours per Day", "type": "number"}],"rows": [{"c":[{"v": "Work"}, {"v": 11}]}, {"c":[{"v": "Eat"}, {"v": 2}]}, {"c":[{"v": "Commute"}, {"v": 2}]}, {"c":[{"v": "Watch TV"}, {"v":2}]}, {"c":[{"v": "Sleep"}, {"v":7, "f":"7.000"}]}]}