JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//www.gstatic.com/charts/loader.js"></script>
<div id="chart" style="height: 300px;"></div>
JavaScript
// Usually coming from ajax
var response = [
{
"detail": ">= rated CCA",
"total_tests": "265",
"in_vehicle": "236",
"result_good": "237",
"result_good_recharge": "28",
"result_charge_retest": "0",
"result_replace": "0",
"result_badcell": "0",
"in_balance": "140"
},
{
"detail": "CCA within tolerance",
"total_tests": "677",
"in_vehicle": "561",
"result_good": "543",
"result_good_recharge": "133",
"result_charge_retest": "0",
"result_replace": "0",
"result_badcell": "1",
"in_balance": "292"
},
{
"detail": "< rated CCA",
"total_tests": "1419",
"in_vehicle": "1133",
"result_good": "141",
"result_good_recharge": "780",
"result_charge_retest": "114",
"result_replace": "264",
"result_badcell": "120",
"in_balance": "52"
}
];
google.charts.load('current', {'packages': ['corechart', 'bar']});
google.charts.setOnLoadCallback(function() {
var chart = new google.charts.Bar(window.document.getElementById('chart')),
data = new google.visualization.DataTable();
data.addColumn('string', 'Rated CCA');
data.addColumn('number', 'Total Tests');
data.addColumn('number', 'In vehicle');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Good');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Good, recharge');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Charge and retest');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Replace');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'Bad cell');
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addColumn('number', 'In balance');
data.addColumn({'type': 'string', 'role': 'tooltip'});
for(var i = 0; i < response.length; i++) {
var row = [
response[i].detail,
parseFloat(response[i].total_tests),
parseFloat(response[i].in_vehicle),
response[i].in_vehicle + ' (' +...