Показать график с данными JSON

Question

Я пытаюсь показать диаграмму с информацией, которую я поместил в файл JSON

Это важная часть моего контроллера:

Map<String, Integer> map = new HashMap<String, Integer>();
for(int i = 0; i<l.size(); i++) {
            number.add(myService.numberItemsByType(l.get(i).getId()));
            map.put(l.get(i).getName(), number.get(i));
        }
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(new File("/home/Projects/MyApp/target/items.json"), map);

Я подтвердил, чтоФайл json правильный.

Проблема в том, что я не могу импортировать данные на странице из json.

Страница:

 <!--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', 'items');
        data.addColumn('number', 'numberItems');

        //data.addRows([
          //['Item 1', 3],
          //['Item 2', 1],
          //['Item 3', 1],
          //['Item 4', 1],
          //['Item 5', 2]
        //]);



        //I have to import the data from the json





        // Set chart options
        var options = {'title':'Chart's title',
                       'width':750,
                       'height':400};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);




      }
    </script>

При следующемкод:

data.addRows([
          //['Item 1', 3],
          //['Item 2', 1],
          //['Item 3', 1],
          //['Item 4', 1],
          //['Item 5', 2]
        //]);

приложение показывает диаграмму, но мне нужно импортировать данные из файла json (поскольку элементы могут измениться)

РЕДАКТИРОВАТЬ

    <!--Load the AJAX API-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script th:inline="javascript">
  //<![CDATA[
    google.charts.load('current', {
        packages:['corechart']
      }).then(function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'items');
        data.addColumn('number', 'numberItems');

        //I get the map with de values from the controller
        var mapa = [[${map}]];

        var options = {
          'title':'title',
          'width':750,
          'height':400
        };



     // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(mapa);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      });



    //]]> 
    </script>

Теперь у меня есть данные в Javascript, но я получаю «У таблицы нет столбцов».в представлении ...

РЕДАКТИРОВАТЬ 2

 <!--Load the AJAX API-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script th:inline="javascript">
  //<![CDATA[
    google.charts.load('current', {
        packages:['corechart']
      }).then(function () {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'items');
        data.addColumn('number', 'numberItems');

        //var x = [[${keylist}]];
        //var y = [[${valuelist}]];

        var mapa =[[${map}]]

        for (var key in mapa) {
          if (mapa.hasOwnProperty(key)) {
            data.addRow([
              key,
              mapa[key]
            ]);
          }
        }



        var options = {
          'title':'title',
          'width':750,
          'height':400
        };



     // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(mapa);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

        chart.draw(data, options);

      });



    //]]> 
    </script>