单击按钮时更改谷歌图表数据
I have a combo chart. I want to change the data in the chart when I click on a button. I have gotten this to work perfectly when there was no dashboard. I've tried making the code work with the dashboard, but have not had any success.
This is the code I ended up with:
function majorChart(){
var dataMajor = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, {type: 'string', role: 'annotation'}],
<?php
$combosql = " SELECT dancer_id1, dancer_name, dancer_placement1, number_competitors1, feis_entered, date, was_recalled, recall1 from mark_cards1 where dancer_id1='$childId' AND major = 'yes' ORDER BY date ASC";
$ComboRes = mysqli_query($con,$combosql);
while ($comboRow=mysqli_fetch_array($ComboRes)){
$dancerName = $comboRow["dancer_name"];
$orgDate = $comboRow["date"];
$date = date("M-d-Y", strtotime($orgDate));
$competitors = $comboRow['number_competitors1'];
$was_recalled = $comboRow["was_recalled"];
$recalled = $comboRow["recall1"];
$not_recalled = $competitors - $recalled;
$place = $comboRow['dancer_placement1'];
$place_num = intval($place);
$feis = $comboRow['feis_entered'];
list($dancer_placed) = explode(' ', $place);
if($was_recalled == ''){
$got_recalled = 'Yes';
}elseif($was_recalled =='-'){
$got_recalled == 'No';
}
echo "['$feis - $date', -$not_recalled, 'Total Dancers Not Placed: $not_recalled', $recalled, 'Total Dancers Placed: $recalled', $was_recalled $place_num, '$dancerName placed $dancer_placed out of $competitors total dancers', '$place'],";
}
?>
]);
//champion data
var dataChampion = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, {type: 'string', role: 'annotation'}],
<?php
$combosql = " SELECT dancer_id1, dancer_name, dancer_placement1, number_competitors1, feis_entered, date, was_recalled, recall1 from mark_cards1 where dancer_id1='$childId' AND champion = 'yes' ORDER BY date ASC";
$ComboRes = mysqli_query($con,$combosql);
while ($comboRow=mysqli_fetch_array($ComboRes)){
$dancerName = $comboRow["dancer_name"];
$orgDate = $comboRow["date"];
$date = date("M-d-Y", strtotime($orgDate));
$competitors = $comboRow["number_competitors1"];
$was_recalled = $comboRow["was_recalled"];
$recalled = $comboRow["recall1"];
$not_recalled = $competitors - $recalled;
$place = $comboRow["dancer_placement1"];
$place_num = intval($place);
$feis = $comboRow["feis_entered"];
list($dancer_placed) = explode(' ', $place);
if($was_recalled == ''){
$got_recalled = 'Yes';
}elseif($was_recalled == '-'){
$got_recalled = 'No';
}
echo "['$feis - $date', -$not_recalled, 'Total Dancers Not Placed: $not_recalled', $recalled, 'Total Dancers Placed: $recalled', $was_recalled $place_num, '$dancerName placed $dancer_placed out of $competitors total dancers', '$place'],";
}
?>
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('major_chart'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter feis'
},
'matchType': 'any'
}
});
// Create a combo chart, passing some options
var options = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'major',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
});
dashboard.bind(searchfilter, options);
// Draw the dashboard.
dashboard.draw(dataMajor);
document.getElementById('tropy_icon').addEventListener('click', function () {
//options.slices[0].color = 'yellow';
dashboard.draw(dataMajor);
}, false);
document.getElementById('medal_icon').addEventListener('click', function () {
//options.slices[0].color = 'yellow';
dashboard.draw(dataChampion);
}, false);
}
I want to click on a button and the data changes for the first 2 charts. the third button is also going to have different data, but it is also a different chart.
I also tried creating 3 separate charts in 3 different divs. And tried to toggle between the three divs.
In this scenario When I click on button 1 major_chart will show and champion_chart will hide when I click on button 2 major_chart will hide and champion_chart will show
When I click on button 3 grades_chart will show but it won't hide major_chart or 2 depending on which is visible.
after grades_chart appears I cannot hide it. I can switch between major_chart and champion_chart, but not grades_chart.
this is what it looks like: the empty white space at the bottom is supposed to be grades_chart 
So I tried removing grades_chart and it does work with just 2. Meaning when I click on button 1 major_chart shows and champion_chart hides. When I click on button 2 champion_chart shows and major_chart hides.
The other problem is that when I click on button 2, champion_chart is smaller than the actual size it's supposed to be.
when pages loads or when click on button1 it looks like this:
When I click on button 2 champion_chart shows, but it is smaller and should be the same width and height as major_chart
code for this scenario:
<script>
function switchMajor() {
if (document.getElementById('major_chart')) {
if (document.getElementById('major_chart').style.display == 'none') {
document.getElementById('major_chart').style.display = 'block';
document.getElementById('champion_chart').style.display = 'none';
document.getElementById('grades_chart').style.display == 'none';
}
}
}
function switchChampion() {
if (document.getElementById('champion_chart')) {
if (document.getElementById('champion_chart').style.display == 'none') {
document.getElementById('champion_chart').style.display = 'block';
document.getElementById('major_chart').style.display = 'none';
document.getElementById('grades_chart').style.display == 'none';
}
}
}
function switchGrades() {
if (document.getElementById('grades_chart')) {
if (document.getElementById('grades_chart').style.display == 'none') {
document.getElementById('grades_chart').style.display = 'block';
document.getElementById('champion_chart').style.display = 'none';
document.getElementById('grades_chart').style.display == 'none';
}
}
}
</script>
When I remove grades_chart from the script it toggles correctly, but the champion_chart is still small.
EDIT
I was able to toggle between 3 divs with the script below.
<script>
function switchMajor() {
var major = document.getElementById('major_chart');
var champion = document.getElementById('champion_chart');
var grades = document.getElementById('grades_chart');
if (major.style.display === 'none'){
major.style.display = 'block';
champion.style.display = 'none';
grades.style.display = 'none';
}
}
function switchChampion() {
var major = document.getElementById('major_chart');
var champion = document.getElementById('champion_chart');
var grades = document.getElementById('grades_chart');
if (champion.style.display === 'none'){
champion.style.display = 'block';
major.style.display = 'none';
grades.style.display = 'none';
}
}
function switchGrades() {
var major = document.getElementById('major_chart');
var champion = document.getElementById('champion_chart');
var grades = document.getElementById('grades_chart');
if (grades.style.display === 'none'){
grades.style.display = 'block';
major.style.display = 'none';
champion.style.display = 'none';
}
}
</script>
The only problem now is that the other 2 charts are not the correct size.