zer00ne zer00ne - 1 month ago 16
Javascript Question

Trying to change DataView by user input with Google Visualization

I've been developing this dataset with Google Visualization and so far I've managed to get it functional and halfway finished. There is only one chart that can change

chartType
by the user checking one of the yellow radio buttons on top. Below that group of yellow radio buttons are a group of blue radio buttons.

enter image description here

These blue radio buttons were intended to change
DataView
, unfortunately, I can't seem to get it working. I receive the following error:


Uncaught TypeError: a.Y is not a function(…)
.................
jsapi_compiled_default_module.js:129




  1. I've tried downgrading to the deprecated Google API:


  2. I've downgraded jQuery down to 2.2.2

  3. I've placed the script before the closing
    </body>
    tag.

  4. I've placed it in the
    </head>

  5. I've gone insane.



PLUNKER

SNIPPET





.sgc,
.sgc>label {
display: inline-block;
transition-property: none
}
.sgc,
.sgc>label,
.sgc>label:after {
overflow: hidden;
box-sizing: border-box
}
.sgc {
position: relative;
border: 1px solid currentColor;
font-style: normal;
font-weight: 400;
text-decoration: none;
border-radius: 2px;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
transition-duration: .7s;
transition-timing-function: cubic-bezier(.445, .05, .55, .95);
-webkit-tap-highlight-color: transparent
}
.sgc>label,
.sgc>label:after {
font-style: inherit;
text-decoration: inherit;
font-weight: inherit
}
.sgc>input {
position: absolute;
left: -10000px;
opacity: 0
}
.sgc>input[type=checkbox]~label {
transition-duration: 0s
}
.sgc>label,
.sgc>label:after,
.sgc>label:before {
transition-duration: inherit;
transition-timing-function: inherit
}
.sgc>input[type=checkbox]~label:before {
opacity: 0
}
.sgc>input:disabled:nth-child(1)~label:nth-of-type(1) {
opacity: .3;
cursor: not-allowed
}
.sgc>input:nth-child(1):checked~label:nth-of-type(1):after,
.sgc>input:nth-child(1):checked~label:nth-of-type(1):before {
opacity: 1
}
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1):after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1):before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1)~label:after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(1)~label:before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2):after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2):before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2)~label:after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(2)~label:before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3):after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3):before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3)~label:after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(3)~label:before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4):after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4):before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4)~label:after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(4)~label:before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5):after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5):before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5)~label:after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(5)~label:before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6):after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6):before,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6)~label:after,
.sgc>input:nth-child(1):checked~label:first-of-type:nth-last-of-type(6)~label:before {
transform: translateX(0)
}
.sgc>input:disabled:nth-child(2)~label:nth-of-type(2) {
opacity: .3;
cursor: not-allowed
}
.sgc>input:nth-child(2):checked~label:nth-of-type(2):after,
.sgc>input:nth-child(2):checked~label:nth-of-type(2):before {
opacity: 1
}
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2):after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2):before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2)~label:after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(2)~label:before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3):after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3):before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3)~label:after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(3)~label:before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4):after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4):before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4)~label:after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(4)~label:before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5):after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5):before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5)~label:after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(5)~label:before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6):after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6):before,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6)~label:after,
.sgc>input:nth-child(2):checked~label:first-of-type:nth-last-of-type(6)~label:before {
transform: translateX(100%)
}
.sgc>input:disabled:nth-child(3)~label:nth-of-type(3) {
opacity: .3;
cursor: not-allowed
}
.sgc>input:nth-child(3):checked~label:nth-of-type(3):after,
.sgc>input:nth-child(3):checked~label:nth-of-type(3):before {
opacity: 1
}
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3):after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3):before,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3)~label:after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(3)~label:before,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4):after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4):before,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4)~label:after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(4)~label:before,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5):after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5):before,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5)~label:after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(5)~label:before,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6):after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6):before,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6)~label:after,
.sgc>input:nth-child(3):checked~label:first-of-type:nth-last-of-type(6)~label:before {
transform: translateX(200%)
}
.sgc>input:disabled:nth-child(4)~label:nth-of-type(4) {
opacity: .3;
cursor: not-allowed
}
.sgc>input:nth-child(4):checked~label:nth-of-type(4):after,
.sgc>input:nth-child(4):checked~label:nth-of-type(4):before {
opacity: 1
}
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4):after,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4):before,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4)~label:after,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(4)~label:before,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5):after,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5):before,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5)~label:after,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(5)~label:before,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6):after,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6):before,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6)~label:after,
.sgc>input:nth-child(4):checked~label:first-of-type:nth-last-of-type(6)~label:before {
transform: translateX(300%)
}
.sgc>input:disabled:nth-child(5)~label:nth-of-type(5) {
opacity: .3;
cursor: not-allowed
}
.sgc>input:nth-child(5):checked~label:nth-of-type(5):after,
.sgc>input:nth-child(5):checked~label:nth-of-type(5):before {
opacity: 1
}
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5):after,
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5):before,
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5)~label:after,
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(5)~label:before,
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6):after,
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6):before,
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6)~label:after,
.sgc>input:nth-child(5):checked~label:first-of-type:nth-last-of-type(6)~label:before {
transform: translateX(400%)
}
.sgc>input:disabled:nth-child(6)~label:nth-of-type(6) {
opacity: .3;
cursor: not-allowed
}
.sgc>input:nth-child(6):checked~label:nth-of-type(6):after,
.sgc>input:nth-child(6):checked~label:nth-of-type(6):before {
opacity: 1
}
.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6):after,
.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6):before,
.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6)~label:after,
.sgc>input:nth-child(6):checked~label:first-of-type:nth-last-of-type(6)~label:before {
transform: translateX(500%)
}
.sgc>label {
padding: 0 .71em;
cursor: pointer;
float: left;
line-height: 3em
}
.sgc>label:after,
.sgc>label:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
transform: translateX(-100%)
}
.sgc>label:after {
color: #fff;
content: attr(data-value);
padding: inherit;
z-index: 10;
opacity: 0;
transition-property: opacity, transform
}
.sgc>label,
.sgc>label:after {
text-align: center;
text-overflow: ellipsis;
white-space: nowrap
}
.sgc>label:before {
content: '';
color: inherit;
background: currentColor;
transition-property: transform
}
.sgc>label:first-of-type:nth-last-of-type(1),
.sgc>label:first-of-type:nth-last-of-type(1):after,
.sgc>label:first-of-type:nth-last-of-type(1):before,
.sgc>label:first-of-type:nth-last-of-type(1)~label,
.sgc>label:first-of-type:nth-last-of-type(1)~label:after,
.sgc>label:first-of-type:nth-last-of-type(1)~label:before {
width: 100%
}
.sgc>label:first-of-type:nth-last-of-type(2),
.sgc>label:first-of-type:nth-last-of-type(2):after,
.sgc>label:first-of-type:nth-last-of-type(2):before,
.sgc>label:first-of-type:nth-last-of-type(2)~label,
.sgc>label:first-of-type:nth-last-of-type(2)~label:after,
.sgc>label:first-of-type:nth-last-of-type(2)~label:before {
width: 50%
}
.sgc>label:first-of-type:nth-last-of-type(3),
.sgc>label:first-of-type:nth-last-of-type(3):after,
.sgc>label:first-of-type:nth-last-of-type(3):before,
.sgc>label:first-of-type:nth-last-of-type(3)~label,
.sgc>label:first-of-type:nth-last-of-type(3)~label:after,
.sgc>label:first-of-type:nth-last-of-type(3)~label:before {
width: 33.33333%
}
.sgc>label:first-of-type:nth-last-of-type(4),
.sgc>label:first-of-type:nth-last-of-type(4):after,
.sgc>label:first-of-type:nth-last-of-type(4):before,
.sgc>label:first-of-type:nth-last-of-type(4)~label,
.sgc>label:first-of-type:nth-last-of-type(4)~label:after,
.sgc>label:first-of-type:nth-last-of-type(4)~label:before {
width: 25%
}
.sgc>label:first-of-type:nth-last-of-type(5),
.sgc>label:first-of-type:nth-last-of-type(5):after,
.sgc>label:first-of-type:nth-last-of-type(5):before,
.sgc>label:first-of-type:nth-last-of-type(5)~label,
.sgc>label:first-of-type:nth-last-of-type(5)~label:after,
.sgc>label:first-of-type:nth-last-of-type(5)~label:before {
width: 20%
}
.sgc>label:first-of-type:nth-last-of-type(6),
.sgc>label:first-of-type:nth-last-of-type(6):after,
.sgc>label:first-of-type:nth-last-of-type(6):before,
.sgc>label:first-of-type:nth-last-of-type(6)~label,
.sgc>label:first-of-type:nth-last-of-type(6)~label:after,
.sgc>label:first-of-type:nth-last-of-type(6)~label:before {
width: 16.66667%
}
.sgc .italic,
.sgc.italic {
font-style: italic
}
.sgc .bold,
.sgc.bold {
font-weight: 700
}
.sgc .underline,
.sgc.underline {
text-decoration: underline
}
.sgc .line-through,
.sgc.line-through {
text-decoration: line-through
}
@keyframes click-wave {
0% {
height: 20px;
width: 20px;
opacity: 0.35;
position: relative;
}
100% {
height: 100px;
width: 100px;
margin-left: -40px;
margin-top: -40px;
opacity: 0;
}
}
.opt {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
top: 7px;
right: 0;
bottom: 0;
left: 0;
height: 20px;
width: 20px;
transition: all 0.15s ease-out 0s;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
margin-right: 0.5rem;
outline: none;
position: relative;
z-index: 1000;
}
.opt:hover {
background: #9faab7;
}
.opt:checked {
background: #40e0d0;
}
.opt:checked::before {
height: 20px;
width: 20px;
position: absolute;
content: '\2716';
display: inline-block;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.opt:checked::after {
animation: click-wave 0.65s;
background: #40e0d0;
content: '';
display: block;
position: relative;
z-index: 100;
}
.opt.radio {
border-radius: 50%;
}
.opt.radio::after {
border-radius: 50%;
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">

<title>00A00</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<link href='sgc.css' rel='stylesheet'>

<style>
/*form { background-image:url(bgl720x404.png); background-color: #333; }*/
#ii {
margin-top: 80px
}
#chart {
height: 70vh;
/*background-image:url(bgl720x404.png); background-size: cover; background-repeat:no-repeat; */
}
.group.group:after,
.chart.chart:after {
color: #333;
}
</style>
</head>

<body class='sl'>
<header>
<form id="chartOpt" class="sgc" style="width: 100%; color: #ffcc00">
<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'>
<input type="radio" name="chart" id="chart4" value='4'>
<label for="chart1" class="chart" data-value="Master Chart">Master Chart</label>
<label for="chart2" class="chart" data-value="Line Chart">Line Chart</label>
<label for="chart3" class="chart" data-value="Column Chart">Column Chart</label>
<label for="chart4" class="chart" data-value="Scatter Chart">Scatter Chart</label>
</form>
<form id="groupOpt" class='sgc' style="width:100%; color: #00ffff">
<input type="radio" name="group" id="group1" value='1'>
<input type="radio" name="group" id="group2" value='2'>
<input type="radio" name="group" id="group3" value='3'>
<input type="radio" name="group" id="group4" value='4'>
<input type="radio" name="group" id="group5" value='5'>
<input type="radio" name="group" id="group6" value='6'>
<label for="group1" class="group" data-value="by Generation">by Generation</label>
<label for="group2" class="group" data-value="by Religion">by Religion</label>
<label for="group3" class="group" data-value="by Party Affiliation">by Party Affiliation</label>
<label for="group4" class="group" data-value="by Political Ideology">by Political Ideology</label>
<label for="group5" class="group" data-value="by Race">by Race</label>
<label for="group6" class="group" data-value="by Gender">by Gender</label>
</form>
</header>

<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>

</section>
<footer>&nbsp;</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">
var options = {
backgroundColor: {
fill: 'transparent',
stroke: '#000000',
strokeWidth: 0
},
tooltip: {
textStyle: {
color: '0000FF'
},
trigger: 'focus'
},
animation: {
"startup": true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of / Opposed to Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontSize: 18
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontSize: 22
},
format: '####'
},
vAxis: {
textStyle: {
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontSize: 16
},
maxValue: 1,
format: '#%'

},
legend: {
textStyle: {
color: 'white'
}
}

}
var query;
var chart;
var data;
var view;
var formatter;
var main;
var selChart;
var selGroup;
var visual;
google.charts.load('current', {
'packages': ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1EY13wZB9IUet4e5gVeMEFLQcHdNfr--S4j741XVAfxo/gviz/tq?gid=1104711743&range=A:T');
query.send(function(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
return;
}
data = response.getDataTable();
visual = new google.visualization.DataView(data);
formatter = new google.visualization.NumberFormat({
pattern: '#%'
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
formatter.format(data, 6);
formatter.format(data, 7);
formatter.format(data, 8);
formatter.format(data, 9);
formatter.format(data, 10);
formatter.format(data, 11);
formatter.format(data, 12);
formatter.format(data, 13);
formatter.format(data, 14);
formatter.format(data, 15);
formatter.format(data, 16);
formatter.format(data, 17);
formatter.format(data, 18);
formatter.format(data, 19);
chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(visual, options);
});
}

$('#chartOpt').on('change', selectChart);

function selectChart() {
chartSel = $("input[name='chart']:checked").val();
main = new google.visualization.ChartWrapper({
containerId: 'chart'
});
switch (chartSel) {
case '1':
main.setChartType('LineChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '2':
main.setChartType('LineChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '3':
main.setChartType('ColumnChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
case '4':
main.setChartType('ScatterChart');
main.setOptions(options);
main.setDataTable(data);
main.draw();
break;
}
}

$('#groupOpt').on('change', selectGroup);

function selectGroup() {
groupSel = $("input[name='group']:checked").val();
view = new google.visualization.DataView({
containerId: 'chart'
});
switch (groupSel) {
case '0':
view.setColumns([0, 1, 2, 3, 4]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '1':
view.setColumns([0, 5, 6, 7, 8, 9]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '2':
view.setColumns([0, 10, 11, 12]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '3':
view.setColumns([0, 13, 14, 15]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '4':
view.setColumns([0, 16, 17]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
case '5':
view.setColumns([0, 18, 19]);
view.setOptions(options);
view.setDataTable(data);
view.draw();
break;
}
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>

</html>




Answer

the code is failing here when trying to create the DataView...

function selectGroup() {
  groupSel = $("input[name='group']:checked").val();
  view = new google.visualization.DataView({  // <-- fails here
    containerId: 'chart'
  });
  switch (groupSel) {
    case '0':
      view.setColumns([0, 1, 2, 3, 4]);
      view.setOptions(options);  // <- view doesn't have this method
      view.setDataTable(data);   // <- view doesn't have this method
      view.draw();               // <- view doesn't have this method
      break;
    case '1':
      ...

i think you have DataView confused with ChartWrapper

first, the constructor for a DataView only accepts a DataTable or another DataView,
not a containerId

changing to a ChartWrapper does make sense for the code that is there
but ChartWrapper doesn't have a method for setColumns

use setView instead
also need to set a chartType

function selectGroup() {
  groupSel = $("input[name='group']:checked").val();
  view = new google.visualization.ChartWrapper({  // <-- change to ChartWrapper
    containerId: 'chart',
    chartType: 'LineChart'                        // <-- set chartType
  });
  switch (groupSel) {
    case '0':
      view.setView({columns: [0, 1, 2, 3, 4]});   // <-- use setView, note object arg
      view.setOptions(options);
      view.setDataTable(data);
      view.draw();
      break;
    case '1':
    ...

this should remove the error...