GoogleChartで開発しているのですが、JSONのデータを元にグラフを表示する方法がわかる方いらっしゃいますでしょうか？

前提・実現したいこと

GoogleChartを利用して開発をしているのですが、今まではデータをソースコードに直がきしていたのですが今後のことを考えてjsonのデータを元にグラフを表示するようにしたいです。
例えば、下記のjsonデータだとどのようにソースを変更すればよろしいでしょうか？

表示するグラフはヒストグラムを想定しています。

かなりわかりにくい文章で申し訳ありませんが、わかる方いらっしゃいましたらお力の方をお貸し頂きたいです。
よろしくお願いいたします。

JSONデータ

{
  "result": [
    {
      "id": 001,
      "name": "ダミーデータ",
      "label": [
        2200,
        2400,
        2600
      ],
      "break": [
        2,
        0,
        2
      ],
      "label": "2000,4000,6000,8000,10000,12000"
    }
  ]
}

現状のソースコード

<html>

<head>
  <!--Load the AJAX API-->
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <script src="jRange/jquery.range.js"></script>
  <link rel="stylesheet" href="jRange/jquery.range.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
  
  <script type="text/javascript">

    // Load the Visualization API and the controls package.
    google.charts.load('current', { 'packages': ['corechart', 'controls'] });

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawDashboard);

    // Callback that creates and populates a data table,
    // instantiates a dashboard, a range slider and a pie chart,
    // passes in the data and draws it.
    function drawDashboard() {

      // ここでデータを入れております。
      var data = google.visualization.arrayToDataTable([
        ['Labels', 'データ'],
        ['2200,', 2],
        ['2400,', 0],
        ['2600', 2]
      ]);

      // Create a dashboard.
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));

      const selectElm = document.getElementById('example');

      // Create a range slider, passing some options
      var donutRangeSlider2 = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filter_div2',
        'options': {
          'filterColumnLabel': '幅'
        }
      });


      // Create a range slider, passing some options
      var donutRangeSlider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'filter_div',
        'options': {
          'filterColumnLabel': 'データ'
        }
      });

      // Create a pie chart, passing some options
      var pieChart = new google.visualization.ChartWrapper({
        'chartType': 'Histogram',
        'containerId': 'chart_div',
        'options': {
          'width': 900,
          'height': 600,
          'pieSliceText': 'value',
          'legend': 'right',
          'histogram': {
            hideBucketItems: true,
            bucketSize: 10
          },
          'bar': { groupWidth: "100%" },
          'colors': ['gray']
        },

      });
      dashboard.bind(donutRangeSlider, pieChart);

      dashboard.draw(data);
      console.log(filter_div.value);
      changeOptions = function () {
        pieChart.setOption('histogram.bucketSize', document.getElementById('example').value);
        dashboard.draw(data);
      };
    }
  </script>
</head>

<body>
  <!--Div that will hold the dashboard-->
  <div id="dashboard_div" style="text-align: center;">
    <!--Divs that will hold each control and chart-->
    <div id="chart_div"></div>
    <table width=800px>
      <tr>
        <td width="50%" align="center">範囲
          <div style="margin-top: 10px;" id="filter_div"></div>

        </td>
       

      </tr>
    </table>

  </div>



</body>

</html>