I'm working on a pretty basic table/chart generator to display an e sports team's season record. The table and the chart are both generating with data, however the chart that is being drawn doesn't seem to have the bars drawn proportionally.
IE a bar with a value of 3 is smaller than a bar with the value of 7, but larger than one with a value of 14, as shown in the linked image (not cool enough to post one yet)
https://media.discordapp.net/attachments/172054778652786690/745815655764459570/unknown.png
I've set min value, max value, and draw direction for the hAxis, and have also attempted to set the gridline baseline and count, but all to no avail.
here is the standalone Function:
function drawChart(){
jQuery.getJSON("https://spreadsheets.google.com/feeds/list/17PBCZMmVsSBiXV1-9f3KAfrpa_znstFRYM7GGvR_ps0/2/public/full?alt=json", function (data) {
const chartData = data.feed.entry;
const selectedSeason = document.getElementById('selectSeason').value;
let array = [];
let i;
for (i = 0; i < chartData.length; i++) {
let season = data.feed.entry[i]['gsx$season']['$t'];
let type = data.feed.entry[i]['gsx$type']['$t'];
let count = data.feed.entry[i]['gsx$count']['$t'];
if(selectedSeason === season){
array.push({type: type, count: count})
}
}
console.log(array);
let calArray = function(){
let rArray = [['Statistic', 'Count']];
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,array[h].count]);
}
return rArray
}
let chartArray = new google.visualization.arrayToDataTable(
calArray()
);
let chartOptions = {
animation: {
duration: 2.5,
startup: true,
},
bars: 'horizontal',
colors: ['#8040bf', '#8040bf', '#8040bf'],
chart: {
title: 'Phoenix Rising Amethyst',
subtitle: 'Season '+selectedSeason+' Record'
},
hAxis: {
direction: 1,
maxValue: 30,
minValue: 0,
},
};
let barChart = new google.charts.Bar(document.getElementById('chart_div'));
barChart.draw(chartArray, chartOptions);
});
};
Here is the whole HTML doc for reference.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="RosterTable.css">
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart', 'bar']});
</script>
</head>
<body onload="generateTable(); drawChart()">
<H2 align="center">Season Records</H2>
<hr align="center">
<br>
<div>
<p align="center">Select Season</p>
<select id="selectSeason" align="center" onchange="clearTable(); generateTable(); drawChart()">
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</div>
<br>
<script type="text/javascript">
function generateTable() {
jQuery.getJSON("https://spreadsheets.google.com/feeds/list/17PBCZMmVsSBiXV1-9f3KAfrpa_znstFRYM7GGvR_ps0/2/public/full?alt=json", function (data) {
const sheetData = data.feed.entry;
const selectedSeason = document.getElementById('selectSeason').value;
let i;
for (i = 0; i < sheetData.length; i++) {
let season = data.feed.entry[i]['gsx$season']['$t'];
let type = data.feed.entry[i]['gsx$type']['$t'];
let count = data.feed.entry[i]['gsx$count']['$t'];
if(selectedSeason === season){
document.getElementById("autoTableBody").innerHTML += ("<tr>"+"<td class='roster_td_odd_all'>"+type+"</td>"+"<td class='roster_td_odd_all'>"+count+"</td>"+"</tr>");
}
}
});
};
function clearTable(){
document.getElementById("autoTableBody").innerHTML = "";
};
function drawChart(){
jQuery.getJSON("https://spreadsheets.google.com/feeds/list/17PBCZMmVsSBiXV1-9f3KAfrpa_znstFRYM7GGvR_ps0/2/public/full?alt=json", function (data) {
const chartData = data.feed.entry;
const selectedSeason = document.getElementById('selectSeason').value;
let array = [];
let i;
for (i = 0; i < chartData.length; i++) {
let season = data.feed.entry[i]['gsx$season']['$t'];
let type = data.feed.entry[i]['gsx$type']['$t'];
let count = data.feed.entry[i]['gsx$count']['$t'];
if(selectedSeason === season){
array.push({type: type, count: count})
}
}
console.log(array);
let calArray = function(){
let rArray = [['Statistic', 'Count']];
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,array[h].count]);
}
return rArray
}
let chartArray = new google.visualization.arrayToDataTable(
calArray()
);
let chartOptions = {
animation: {
duration: 2.5,
startup: true,
},
bars: 'horizontal',
colors: ['#8040bf', '#8040bf', '#8040bf'],
chart: {
title: 'Phoenix Rising Amethyst',
subtitle: 'Season '+selectedSeason+' Record'
},
hAxis: {
direction: 1,
maxValue: 30,
minValue: 0,
},
};
let barChart = new google.charts.Bar(document.getElementById('chart_div'));
barChart.draw(chartArray, chartOptions);
});
};
</script>
<div id="tableDiv" class='table.div'>
<table>
<thead>
<tr>
<th class='roster_th_all_pra'>Statistic</th>
<th class='roster_th_all_pra'>Count</th>
</tr>
</thead>
<tbody id="autoTableBody"/>
</table>
</div>
<div id='chart_div'/>
</body>
</html>
