I am trying to figure out how to display the visuals I created in an alternate page within my Vertical tabs. The tabs are already styled, and I have omitted the CSS due to its length. The HTML file I am working with is test.html, and the visuals are in the alternate file App.js. Despite testing to confirm that the visuals work, nothing shows up when I click on the tab. It's as if clicking a button with no action attached. No changes occur on the screen.
How can I integrate the visuals into the tabs to make them visible?
Code snippet of test.html Page(CSS link excluded for brevity):
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body ng-App="App">
<div id="container" style="padding-top: 20px" ng-controller="AppController">
<div id="tab">
<button class="tablink" onclick="show1()">Visual 1</button>
</div>
<div id="visual1" ng-show"display1">
<script type="text/javascript" src="App.js"></script>
<div id="testdash">
<div id="filter1"></div>
<div id="chart1"></div>
</div>
</div>
</body>
</html>
App.js file:
var app = angular.module('App',);
app.controller('AppController', function($scope, $http, $ace) {
$scope.show1 = function() {
if ($scope.display1 == false) {
getCurrVis1();
$scope.display1 = true; }
else {
$scope.display1 = false; }
}
function getCurrVis1() {
var req = { method: 'POST',
url: "test.tsv"
}
$http(req).success(function(js) {
var data = js;
drawChart1(data);
})
}
function drawChart1(data) {
//creates data table
var table = new google.visualization.DataTable();
var data = data;
console.log(data);
var dataRows = data.split("\n");
var headers = dataRows[0].split('\t');
table.addColumn('string', headers[0]);
table.addColumn('number', headers[1]);
table.addColumn('string', headers[2]);
var rs = [];
for (var x=1; x<(dataRows.length); x++) {
var cols = dataRows[x].split('\t');
var row = [];
row.push(cols[0]);
row.push(parseInt(cols[1]));
row.push(cols[2]);
rs.push(row);
}
table.addRows(rs);
// Create a dashboard to bind a filter to the chart
var dashboard = new google.visualization.Dashboard(document.getElementById('testdash'));
var filter1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'filter1',
'options': {
'filterColumnIndex': 0,
'ui': {
'label': 'Filter:',
'selectedValuesLayout': 'belowStacked',
'allowTyping': false,
'allowMultiple':true,}
}
});
//Sets chart, and chart options
var chart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1',
'options': { 'left': '25%',
'height': '80%',
'width': '80%' ,
'width':800,
'height':600,
'pieSliceText': 'value'},
'view': { 'columns': [0,1]}
});
dashboard.bind(filter1, chart);
dashboard.draw(table);
}
}