3

Preciso alterar os valores do gráfico de dias para meses e vice-versa ao clicar nos "botões" por dia/por mês, já tentei criar dois gráficos e usar hide(); e show(); ao clicar, quase deu certo, porem ao clicar no botão o gráfico que estava com display:none aparece bem pequeno diferente do que carregou junto com a pagina.

$(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>

Quando uso o hide(); e show(); como disse acima, acontece isso aqui:

Carrega junto com a pagina

Carrega após clicar no botão

2
  • Não sei se entendi muito bem. Suas duas imagens mostram os dados de 1 mês específico (março e abril). Você gostaria de alternar o mês ou por mês seria separado por mês (janeiro, fevereiro, março, abril...)?
    – Randrade
    Commented 4/04/2017 às 16:46
  • @Randrade desculpe esqueci de mencionar a imagem não esta correta, na vdd uma deve mostrar por dia exemplo 1 março, 2 março, 3 março e a outra deve estar o acumulado do mês março, abril, maio e por ai vai ... Na imagem eu so quis mostrar o que acontece quando tento usar dois graficos deixando um com display none e alterando para block quando clico no elemento.
    – user27585
    Commented 4/04/2017 às 16:53

1 Resposta 1

1

Não entendi muito bem como você popula esses dados, se vem de um WS, ou se está manual. Por isso, criei duas funções, uma para popular por dia e outra por mês.

Ao clicar nos botões, basta chamar a função para popular novamente o gráfico, como no exemplo abaixo:

$(document).ready(function() {

  // Chart by day
  google.charts.load("current", {
    packages: ["corechart"]
  });
  google.charts.setOnLoadCallback(drawChart);
  var chart;

  function drawChartMonth() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Mes');
    data.addColumn('number', 'Tempo');
    data.addColumn('number', 'Tempo');

    data.addRows([
      ['Jan', 25, 7],
      ['Fev', 30, 5],
      ['Mar', 72, 9],
      ['Abr', 60, 15],
      ['Mai', 5, 5]
    ]);


    var options = {
      title: '',
      vAxis: {
        minValue: 0,
        ticks: [10, 20, 30, 40, 50, 60, 70, 80],
        format: '# min.'
      },
      legend: {
        position: 'none'
      },
      chartArea: {
        top: '15',
        width: '90%',
        height: '80%'
      },
      series: {
        0: {
          color: '#0b82c6'
        },
        1: {
          color: '#8fb809'
        },
      },
      lineWidth: 3
    };

    chart = new google.visualization.LineChart(document.getElementById('chart-performed'));
    chart.draw(data, options);
  }

  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
    };

    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')
    drawChartMonth();
  });
  $('.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')
    drawChart();
  });
});
.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>

Devo ressaltar também, que o Google Chart possui uma opção de Controls and Dashboards, que pode ser que te ajude também.

2
  • Cara muito obrigado pela ajuda, era isso mesmo, agora vou fuçar mais no código e deixar do jeito que preciso, vlw.
    – user27585
    Commented 4/04/2017 às 17:27
  • Sem problemas. Se precisar de algo, basta avisar.
    – Randrade
    Commented 4/04/2017 às 17:30

Você deve fazer log-in para responder a esta pergunta.