calin.bule calin.bule - 2 months ago 23
HTML Question

Google Chart error - won't display second graph

I am trying to integrate more than one chart in my page but only the first works.

The JS code is the following:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart_total);
google.charts.setOnLoadCallback(drawChart_fixed);

function drawChart_total() {
var fixed_costs = document.getElementById('total_fixed_costs').value;
var variable_costs = document.getElementById('total_variable_costs').value;
var salary = document.getElementById('total_salary').value;

var data = new google.visualization.DataTable();
data.addColumn('string','Cost Type');
data.addColumn('number','Spendings');
data.addRows
([
['Fixed Costs', parseFloat(fixed_costs)],
['Variable Costs', parseFloat(variable_costs)],
['Salary', parseFloat(salary)]
]);
var options = {title: 'Total costs distribution chart', width: 600, height: 333};
var chart = new google.visualization.PieChart(document.getElementById('piechart_total'));
chart.draw(data, options);
}

function drawChart_fixed() {
var truck_payment = document.getElementById('truck_payment').value;
var collision_comp_insurance = document.getElementById('collision_comp_insurance').value;
var office_lease = document.getElementById('office_lease').value;
var health_insurance = document.getElementById('health_insurance').value;
var permits = document.getElementById('permits').value;

var data = new google.visualization.DataTable();
data.addColumn('string', 'Cost Type');
data.addColumn('number', 'Spendings');
data.addRows
([
['Truck Payment', parseFloat(truck_payment)],
['Collision / Comp Insurance', parseFloat(collision_comp_insurance)],
['Office Lease', parseFloat(office_lease)]
['Health Insurance', parseFloat(health_insurance)],
['Permits', parseFloat(permits)]
]);
var options = {title: 'Fixed costs distribution chart', width: 600, height: 333};
var chart = new google.visualization.PieChart(document.getElementById('piechart_fixed'));
chart.draw(data, options);
}


The data is taken from a form.
The HTML tags for the form fields for the first graph are like this:

<input name="total_fixed_costs" id="total_fixed_costs" placeholder="Total" value=0 readonly>


and the ones for the second graph are like this:

<input type="number" min=0 id="permits" name="permits" placeholder="Write Here">


As far as the second graph goes, if I leave it as is, i ghet the following error:

jsapi_compiled_default_module.js:36 Uncaught Error: Every row given must be either null or an array.

On the other hand, if I do not use the parseFloat on the variables that populate the second column of the data table, i get the following error:

jsapi_compiled_default_module.js:14 Uncaught Error: Type mismatch. Value does not match type number in column index 1

I've been searching for a solution to this for the last two days but without success. I want to mention that I am a newbie in the world of programming, currently learning JS. I did not yet have contact with JQuery.

Thank you.

Answer

first, there is a typo...

leave it as is, meaning use parseFloat

AND

add a comma (,) at the end of this row...

['Office Lease', parseFloat(office_lease)], // <-- add comma

also, it is not recommended to use setOnLoadCallback more than once

you can include the callback in the load statement,
then call the "draw" functions from there

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart_total();
    drawChart_fixed();
  },
  packages:['corechart']
});

function drawChart_total() {
  var fixed_costs = document.getElementById('total_fixed_costs').value;
  var variable_costs = document.getElementById('total_variable_costs').value;
  var salary = document.getElementById('total_salary').value;

  var data = new google.visualization.DataTable();
  data.addColumn('string','Cost Type');
  data.addColumn('number','Spendings');
  data.addRows
  ([
     ['Fixed Costs', parseFloat(fixed_costs)],
     ['Variable Costs', parseFloat(variable_costs)],
     ['Salary', parseFloat(salary)]
  ]);
  var options = {title: 'Total costs distribution chart', width: 600, height: 333};
  var chart = new google.visualization.PieChart(document.getElementById('piechart_total'));
  chart.draw(data, options);
}

function drawChart_fixed() {
  var truck_payment = document.getElementById('truck_payment').value;
  var collision_comp_insurance =  document.getElementById('collision_comp_insurance').value;
  var office_lease = document.getElementById('office_lease').value;
  var health_insurance = document.getElementById('health_insurance').value;
  var permits = document.getElementById('permits').value;

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Cost Type');
  data.addColumn('number', 'Spendings');
  data.addRows
  ([
     ['Truck Payment', parseFloat(truck_payment)],
     ['Collision / Comp Insurance', parseFloat(collision_comp_insurance)],
     ['Office Lease', parseFloat(office_lease)],
     ['Health Insurance', parseFloat(health_insurance)],
     ['Permits', parseFloat(permits)]
  ]);
  var options = {title: 'Fixed costs distribution chart', width: 600, height: 333};
  var chart = new google.visualization.PieChart(document.getElementById('piechart_fixed'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <input type="number" id="total_fixed_costs" value="500" readonly />
  <input type="number" id="total_variable_costs" value="1500" readonly />
  <input type="number" id="total_salary" value="50000" readonly />
</div>
<div id="piechart_total"></div>

<div>
  <input type="number" id="truck_payment" value="400" />
  <input type="number" id="collision_comp_insurance" value="30" />
  <input type="number" id="office_lease" value="800" />
  <input type="number" id="health_insurance" value="100" />
  <input type="number" id="permits" value="20" />
</div>
<div id="piechart_fixed"></div>