У меня есть комбо-диаграмма.Я хочу изменить данные на графике, когда я нажимаю на кнопку.Я получил это, чтобы работать отлично, когда не было приборной панели.Я пытался заставить код работать с приборной панелью, но безуспешно.
Это код, с которым я закончил:
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);
}
Я хочу нажать на кнопкуи данные изменяются для первых двух графиков.третья кнопка также будет иметь разные данные, но это также и другой график.
Я также пытался создать 3 отдельных графика в 3 разных делениях.И пытался переключаться между тремя делами.
В этом сценарии Когда я нажимаю на кнопку 1, отображается Major_chart, а Champion_chart скрывается, когда я нажимаю кнопку 2. Major_chart скрывается, а Champion_chart отображается
. Когда я нажимаю на кнопку 3, отображается grades_chart.но он не будет скрывать major_chart или 2 в зависимости от того, что видно.
после появления grades_chart я не могу его скрыть.Я могу переключаться между major_chart и champion_chart, но не grades_chart.
Вот как это выглядит: пустой пробел внизу должен быть grades_chart 
Итак, я попытался удалить grades_chart, и он работает только с 2. Значение, когда я нажимаю на кнопку 1, Major_chart показывает, а champion_chart скрывается.Когда я нажимаю на кнопку 2, показывается champion_chart, а major_chart скрывается.
Другая проблема заключается в том, что когда я нажимаю на кнопку 2, champion_chart меньше фактического размера, который должен быть.
, когда страницызагружается или при нажатии на кнопку 1 это выглядит так:
Когда я нажимаю на кнопку 2, показывается champion_chart, но он меньше и должен быть таким жеширина и высота в виде major_chart
код для этого сценария:
<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>
Когда я удаляю grades_chart из сценария, он корректно переключается, но диаграмма чемпиона все еще мала.
РЕДАКТИРОВАТЬ
Мне удалось переключиться между 3 делениями с помощью сценария ниже.
<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>
Единственная проблема сейчас состоит в том, что другие 2 диаграммы имеют неправильный размер.