How can I create a column chart with dynamic data

Question

I am using google charts, and I would like to get a column chart with a fixed period, but dynamic values. This is an example of a column chart, with fixed values, I would like to use the variables that are in the code after the comment (variables i would like to use) taking into account that columns and values are not always the same size.

      function drawChart() {
      // Simple example
       var data = google.visualization.arrayToDataTable(
            [ ['Year', 'Example 1', 'Example 2', 'Example 3'],
          ['2004',  1000,      400, 100],
          ['2005',  1170,      460, 500],
        ]); 
        
       // variables i would like to use
       // These variables are fixed
       var periodOne = '2004';
       var periodTwo = '2005';
       
       // non-fixed variables, variables that I will receive and that will not always be the same size.
       var columns = ['Example 1', 'Example 2', 'Example 3'];
       var valuesP1 = [1000, 400, 100];
       var valuesP2 = [1170, 460, 500];
       
  
        
        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 1

to build dynamically, start with a blank data table...

// create blank data table
var data = new google.visualization.DataTable();

add a column for the period / year...

// add period column
data.addColumn('string', 'Year');

add the dynamic columns...

// add columns
columns.forEach(function (label) {
  data.addColumn('number', label);
});

add the period / year to the row values...

// add period to data
valuesP1.splice(0, 0, periodOne);
valuesP2.splice(0, 0, periodTwo);

add the row values to the data table...

// add data
data.addRow(valuesP1);
data.addRow(valuesP2);

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // These variables are fixed
  var periodOne = '2004';
  var periodTwo = '2005';

  // non-fixed variables, variables that I will receive and that will not always be the same size.
  var columns = ['Example 1', 'Example 2', 'Example 3'];
  var valuesP1 = [1000, 400, 100];
  var valuesP2 = [1170, 460, 500];

  // create blank data table
  var data = new google.visualization.DataTable();

  // add period column
  data.addColumn('string', 'Year');

  // add columns
  columns.forEach(function (label) {
    data.addColumn('number', label);
  });

  // add period to data
  valuesP1.splice(0, 0, periodOne);
  valuesP2.splice(0, 0, periodTwo);

  // add data
  data.addRow(valuesP1);
  data.addRow(valuesP2);

  // draw chart
  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
    tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart_div {
  height: 100%;
  min-height: 400px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>