title: Using Thymeleaf with Google charts and Java Map
body: <p>The Thymeleaf block I have made in JavaScript cuts off the ending ; of the variable, and throws an <code>Uncaught (in promise) SyntaxError: Unexpected token ' in JSON at position 2</code>. </p>
  
  <p>The code does parse like it should, except for the data variable. Parsed code:</p>
  
  <pre><code>function drawChart() {
  
      var jsonData = "{ 'cols': [" +
          "{'id':'','label':'Expense','pattern':'','type':'string'}" +
          "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
          "'rows': [";
  
      var data = {'Expense1': 25.0, 'Expense2': 20.0, 'Expense3': 40.0};
      var end = "]}";
      var res = jsonData.concat(data);
      var res = res.concat(end);
  
      var json = JSON.parse(res);
  
      var data = new google.visualization.DataTable(json);
  
      var options = {
          title: 'Data test',
          pieHole: 0.4
      };
  
      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);
  }
  </code></pre>
  
  <p>Pre Thymeleaf code:</p>
  
  <pre><code>&lt;script type="text/javascript" th:inline="javascript"&gt;
      google.charts.load('current', {'packages': ['corechart']});
      google.charts.setOnLoadCallback(drawChart);
  
      function drawChart() {
  
          var jsonData = "{ 'cols': [" +
              "{'id':'','label':'Expense','pattern':'','type':'string'}" +
              "{'id':'','label':'Amount','pattern':'','type':'number'}]," +
              "'rows': [";
  
          var data = /*[[${chart.DataPoints}]]*/;
          var end = "]}";
          var res = jsonData.concat(data);
          var res = res.concat(end);
  
          var json = JSON.parse(res);
  
          var data = new google.visualization.DataTable(json);
  
          var options = {
              title: /*[[${chart.title}]]*/'',
              pieHole: 0.4
          };
  
          var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
          chart.draw(data, options);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The data var is either like it is right now, or when enclosed in "", it cuts off the closing semi-colon. How do I get Thymeleaf of JavaScript to cast the data var to a string (while maintaining the '' it contains)?</p>