Change google Chart values by clicking on an element

Asked

Viewed 786 times

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:

Carrega junto com a pagina

Carrega após clicar no botão

  • 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 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.

1 answer

1


I don’t quite understand how you populate this data, whether it comes from a WS, or whether it’s manual. So I created two functions, one for popular per day and one per month.

By clicking on the buttons, simply call the function to re-populate the chart, as in the example below:

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

I must also point out, that the Google Chart has an option to Controls and Dashboards, that might help you too.

  • Thanks a lot for the help, that’s right, now I’m going to dig deeper into the code and leave it the way I need it, vlw.

  • No problem. If you need anything, just let me know.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.