zer00ne zer00ne - 25 days ago 5
jQuery Question

Google Visualization - vAxis maxValue property not working

For a reason that totally escapes me, I can't get the

maxValue
property of
vAxis
to work:


var options = { vAxis: { maxValue: .85 } }



The
vAxis
is a percentage with a range of 0 to 100% and I'd like to save some room by setting the max to 85%. I think it has something to do with this project switching between 7
DataSources
and 4
ChartTypes
because I've never had this problem when I made single charts.

The following Snippet is a reduced case with the minimal functionality that could be related to the issue. Thank you for your time and effort.

SNIPPET





<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>G04B32</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
*,
*:before,
*:after {
font-style: normal !important;
}
body {
position: relative;
}
form {
background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png);
background-color: #333;
}
#ii {
margin-top: 80px
}
.panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#chart {
height: 70vh; width: 96vw; background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png); background-size: cover; background-repeat: no-repeat; }
.group.group: after, .chart.chart: after, .root.root: after {
color: #333;
}
div.google-visualization-tooltip {
background-color: rgba(0, 0, 0, .6);
border-radius: 6px;
min-width: 325px;
max-height: 75px;
}
div.google-visualization-tooltip > ul > li {
display: table-cell;
margin: 0 5px;
}
div.google-visualization-tooltip > ul > li > span {
color: gold;
}
#groupOpt.off {
display: none;
}
#groupOpt.on {
display: block;
}
</style>
</head>

<body class='sl'>
<header class='panel'>
<form id="rootOpt" class="sgc" style="width: 20%; color: #fffff">
<input type="radio" name="root" id="root0" value='0' class='chx' checked>
<input type="radio" name="root" id="root1" value='1'>
<label for="root0" class="root" id="switch0" data-value="Results">Results</label>
<label for="root1" class="root" id="switch1" data-value="Groups">Groups</label>
</form>
<form id="chartOpt" class="sgc" style="width: 80%; color: #ffcc00">
<input type="radio" name="chart" id="chart0" value='0' checked>
<input type="radio" name="chart" id="chart1" value='1'>
<input type="radio" name="chart" id="chart2" value='2'>
<input type="radio" name="chart" id="chart3" value='3'>
<label for="chart0" class="chart" data-value="Line Chart">Line Chart</label>
<label for="chart1" class="chart" data-value="Area Chart">Area Chart</label>
<label for="chart2" class="chart" data-value="Column Chart">Column Chart</label>
<label for="chart3" class="chart" data-value="Scatter Chart">Scatter Chart</label>
</form>
<form id="groupOpt" class='sgc off' style="width:100%; color: #00ffff">
<input type="radio" name="group" id="group0" data-format='4' class='chx' value='1' checked>
<input type="radio" name="group" id="group1" data-format='5' class='chx' value='2'>
<input type="radio" name="group" id="group2" data-format='3' class='chx' value='3'>
<input type="radio" name="group" id="group3" data-format='3' class='chx' value='4'>
<input type="radio" name="group" id="group4" data-format='2' class='chx' value='5'>
<input type="radio" name="group" id="group5" data-format='2' class='chx' value='6'>
<label for="group0" class="group" data-value="Generation">Generation</label>
<label for="group1" class="group" data-value="Religion">Religion</label>
<label for="group2" class="group" data-value="Party Affiliation">Party Affiliation</label>
<label for="group3" class="group" data-value="Political Ideology">Political Ideology</label>
<label for="group4" class="group" data-value="Race">Race</label>
<label for="group5" class="group" data-value="Gender">Gender</label>
</form>
</header>
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

var options = {
backgroundColor: {
fill: 'transparent'
},
tooltip: {
textStyle: {
color: 'gold',
fontSize: 16,
fontName: 'Verdana'
},
trigger: 'focus',
isHtml: true
},
animation: {
startup: true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
format: '####',
slantedText: true
},
vAxis: {
maxValue: .85,// <<<<<<<<<<<<<<<<<<<<<DOESN'T WORK>>>>>>
format: '#%',
textStyle: {
fontName: 'Open Sans',
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontName: 'Arial',
fontSize: 16
}

},

legend: {
textStyle: {
color: 'white',
fontName: 'Verdana'
},
position: 'bottom'
},

crosshair: {
trigger: 'both',
orientation: 'both',
focused: {
color: 'gold',
opacity: .7
},
selected: {
color: 'cyan',
opacity: .7
}
},
pointSize: 12,
theme: 'materials',
chartArea: {
left: 100,
top: 75,
width: '90%',
height: '60%'
}

}

var chart;
var main;
var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
var qArray = ['https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1552974580&range=A:C', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=2111420909&range=A:E', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1379142381&range=A:F', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1749299608&range=A:D', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=268750266&range=A:D', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=148086622&range=A:C', 'https://docs.google.com/spreadsheets/d/1c9xyhR1_BavywsAOvpkf65Nhf9o0j8KHqRrEYC25mus/gviz/tq?gid=1474413858&range=A:C'];

function drawChart() {
chart = new google.visualization.ChartWrapper();
chart.setDataSourceUrl(qArray[0]);
chart.setChartType(cArray[0]);
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}

function alterChart(C, Q) {

C = Number(C);
Q = Number(Q);
var URL = qArray[Q];
var VIS = cArray[C];

main = new google.visualization.ChartWrapper();
main.setDataSourceUrl(URL);
main.setChartType(VIS);
main.setContainerId('chart');
main.setOptions(options);
main.draw();
}

$('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
var chartSel = $("input[name='chart']:checked").val();
var groupSel = $("input.chx:checked").val();
if (e.target !== e.currentTarget) {
var target = e.target.id;
var status = $("input[name='root']:checked").attr('id');
}

if (target === 'root0' && status === 'root0') {
$('#groupOpt').slideUp().removeClass('on').addClass('off');
return alterChart(chartSel, groupSel);
}
if (target === 'root1' && status === 'root1') {
$('#groupOpt').slideDown().addClass('on').removeClass('off');
return alterChart(chartSel, groupSel);
}

if (target === 'chart0' || target === 'chart1' || target === 'chart2' || target === 'chart3') {
if (status === 'root0') {
return alterChart(chartSel, groupSel);
} else {
return alterChart(chartSel, groupSel);
}
} else {
if (status === 'root0') {
return alterChart(chartSel, groupSel);
} else {
return alterChart(chartSel, groupSel);
}
}
});

var group = document.querySelectorAll('.chx');
var len = group.length;
var rad;
var i;
for (i = 0; i < len; i++) {
group[i].onclick = function() {
if (rad == this) {
this.checked = false;
rad = null;
} else {
rad = this;
}
}
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>

</html>




Answer

you can override with --> vAxis.viewWindow.max

  vAxis: {
      viewWindow: {
          max: 0.85
      }
      ...

also, vAxis.maxValue is only available on a continuous axis...