How to Show Chart Statistics of Monthly Number of Posts in WordPress?

  echo '<script language="Javascript" src="https://helloacm.com/js/chart.js"></script>'."\n";
  global $wpdb; // helloacm.com
  
  // count the posts number group by each month
  $query = "
      select 
        concat(year(`post_date`), '-', month(`post_date`)) as `month`, 
        count(1) as `cnt` 
      from 
        `wp_posts` 
      where 
        (post_type='page' or post_type='post') and 
        `post_status` = 'publish' 
      group by 
        `month` 
      order by 
        `post_date` desc
      limit
         12
";  // change this to include more months. the default is 12 months in the past.
      
  $result = array_reverse($wpdb->get_results($query));// reverse the data to get a normal logic flow
  if ($result) {
?>
 
<div id='ReportBarChartContainerMonthly'>
    <div id='ReportBarChartComponentMonthly' style='margin: 15px;'>
        <canvas id="myChartMonthly" style='max-width:100%;height:auto'></canvas>
    </div>
</div>
    
<script language="Javascript">
    var data = {
        labels: [
        
            <?php
    foreach ($result as $month) {
      echo '"'.$month->month.'", ';  
    }        
            ?>
        ],
        datasets: [
            {
                label: "Number of Posts",
                fillColor: "rgba(200,200,250,0.7)",
                strokeColor: "rgba(150,150,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [
            <?php
    foreach ($result as $month) {
      echo '"'.$month->cnt.'", ';  
    }        
            ?>
                ]
            }
        ]
    };
 
    var ctx = document.getElementById("myChartMonthly").getContext("2d");
    var myNewChart = new Chart(ctx).Line(data, {
        bezierCurve: true
    });
</script>
<?php
  }