Google Charts

PHPMaker General Discussion (PHPMaker)
1

is Google Charts already built into V2026?

any instruction on how to use it?

thanks

2

In 2026 what is the best way to use google charts in a custom file.
trying there eample. i can see loader.js is loaded
but also seeing

JQMIGRATE: jQuery.fn.resize() event shorthand is deprecated [jquery-migrate-4.0.2.js:136:28](https://apollo.redcentric.net/2026/jquery/jquery-migrate-4.0.2.js?v=26.8.2 "View source in Debugger → https://apollo.redcentric.net/2026/jquery/jquery-migrate-4.0.2.js:136:28")

console.trace() JQMIGRATE: jQuery.fn.resize() event shorthand is deprecated

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" <?= Nonce() ?>></script>

<script type="text/javascript" <?= Nonce() ?>>
  // 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);

  function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {
      'title': 'How Much Pizza I Ate Last Night',
      'width': 400,
      'height': 300
    };

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

<body>
  <div id="chart_div"></div>
</body>
3 
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"  <?= Nonce() ?> ></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', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

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


  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
4

There is no built-in support for Google Charts, you need to add it yourself, see the example.

Adding your code directly in the Content of the Custom File is fine.

(The JQMIGRATE deprecation notes are irrelevant, it just tells you what are deprecated in jQuery 4. You are not using jQuery here.)