3
I need to change the chart values from days to months and vice versa by clicking the "buttons" por dia/por mês, I have tried to create two charts and use hide(); and show(); when clicking, it almost worked, but when clicking on the button the chart that was with display:none appears very small different from what loaded along with the page.
$(document).ready(function() {
// Chart by day
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Tempo');
data.addColumn('number', 'Tempo');
data.addRows([
[1, 5, 7],
[2, 10, 5],
[3, 7, 9],
[4, 10, 15],
[5, 5, 5]
]);
var options = {
title: '',
hAxis: {
title: '',
format: '# março'
},
vAxis: {
minValue: 0,
ticks: [5, 10, 15, 20],
format: '# min.'
},
legend: {position: 'none'},
chartArea:{top:'15',width:'90%',height:'80%'},
series: {
0: { color: '#0b82c6' },
1: { color: '#8fb809' },
},
lineWidth: 3
};
var chart = new google.visualization.LineChart(document.getElementById('chart-performed'));
chart.draw(data, options);
}
$('.dia-mes span:last-child').on('click', function(event) {
event.preventDefault();
$('.dia-mes span:first-child').removeClass('green');
$('.dia-mes span:last-child').addClass('green')
});
$('.dia-mes span:first-child').on('click', function(event) {
event.preventDefault();
$('.dia-mes span:last-child').removeClass('green');
$('.dia-mes span:first-child').addClass('green')
});
});.chart-performed h3
{
margin: 45px 0 15px 0;
font-size: 18px;
color: #7f8c8d;
font-weight:500;
}
#chart-performed,
#chart-performed svg,
#chart-performed div div
{
height:270px !important;
}
#chart-performed-month,
#chart-performed-month svg,
#chart-performed-month div div
{
height:270px !important;
}
.chart-label
{
margin:0;
width: 100%;
background-color: #fff;
padding: 25px 60px 25px 60px;
display: flex;
justify-content:flex-start;
flex-direction:row;
align-items:center;
justify-content:space-between;
}
.label
{
display: flex;
}
.chart-label .label > span
{
display: flex;
flex-direction:row;
align-items:center;
margin-right:50px;
font-size:14px;
font-weight:600;
color:#666464;
}
.chart-label .label > span:first-child::before
{
background-color:#0b82c6;
}
.chart-label .label > span:last-child::before
{
background-color:#8fb809;
}
.chart-label .label > span::before
{
content:'';
width:14px;
height:14px;
border-radius:100%;
display:block;
margin-right: 5px;
}
.chart-label .dia-mes
{
text-align: right;
border-radius: 8px;
border: 2px solid #bcbdbe;
display:flex;
}
.chart-label .dia-mes span
{
font-size:14px;
font-weight:500;
color:#bcbdbe;
padding:3px 10px;
text-align: center;
cursor: pointer;
}
.chart-label .dia-mes .green
{
background-color: #8fb809;
color:#fff;
border-radius:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart-performed">
<h3>Atividades realizadas x Quizes respondidos</h3>
<div class="chart-label">
<div class="label">
<span>Atividades</span>
<span>Quizes</span>
</div>
<div class="dia-mes">
<span class="green">por dia</span>
<span>por mês</span>
</div>
</div>
<div id="chart-performed" style="width: 100%;"></div>
<div id="chart-performed-month" style="width: 100%;"></div>
</div>When I use Hide(); and show(); as I said above, it happens here:
I don’t know if I understand it very well. Your two images show the data of 1 specific month (March and April). You would like to alternate the month or per month be separated by month (January, February, March, April...)?
– Randrade
@Randrade sorry I forgot to mention the image not this correct, in vdd one must show by day example 1 March, 2 March, 3 March and the other must be the accumulated of the month March, April, May and so on ... In the image I just wanted to show what happens when I try to use two Graphics leaving one with None display and changing to block when I click on the element.
– user27585