Hello,

I need some help to create a stacked column-chart on Forms, which Laserfiche Forms receives data into a table from a database.  The number of rows may vary based on received data.  Unfortunately, my chart is populating only the 1st row of data.

My  javascript skills are still novice and I would appreciate some help on the subject.

Below is the JS code I'm using.

  //Chart for Table 1
$(document).ready(function() {
  
  //load the Google Charts Visualization 
  $.getScript('http://localhost/forms/js/loader.js', function () { 
  });
  
  //when anything in the Table changes, update the bar chart
  $('.Proj').on('change', function() { 
  
    //Chart update code
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      
      //get the table values from the hidden totals fields
      	var contract = String($('.Contract input').val());
    	var periodrevenue = parseInt($('.PeriodRevenue input').val());
      	var periodcost = parseInt($('.PeriodCost input').val());
		var periodmovement = parseInt($('.PeriodMovement input').val());
      
      
      //store the fields into the array
      var data = google.visualization.arrayToDataTable([
        ['Contract','Period Revenue','Period Cost','Period Movement'],
        [contract, periodrevenue, periodcost, periodmovement],
      ]);
     

      
      //set the chart title
      var options = {
        title: 'Contracts Review',
        isStacked: true

      };
      
      //update the bar chart
       var chart = new google.visualization.ColumnChart(document.getElementById('chart1_values'));
      chart.draw(data, options);
    }
  });
});