Gráfico Google Charts

ThiagoN · July 17, 2020 at 08:32 AM

bom dia

estou tentando colocar a data, mas ele só esta aceitando numero array.

tentei mudar alinha data.addColumn('timeofday', 'Time of Day') para data.addColumn('time', 'Time of Day') mas ai o gráfico não aparece.

esta vindo do bando uma string, mas o gráfico não esta aceitando, mudei o formato no banco para Time, mas tb não funciona.. quando eu formato campo no banco como int ai ele aceita..

alguma luz

segue me codigo.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Tratativa</title>
    <link rel="stylesheet" type="text/css" href="../css/stilo.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width" scale="1">
    <!-- transforma a pagina em  responsivel-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
       google.charts.load('current', {packages: ['corechart', 'bar']});
		google.charts.setOnLoadCallback(drawAnnotations);

		function drawAnnotations() {
			var data = new google.visualization.DataTable();
			data.addColumn('timeofday', 'Time of Day');
			data.addColumn('number', 'UPM');
			data.addColumn({type: 'string', role: 'annotation'});
			data.addColumn('number', 'Erros');
			data.addColumn({type: 'string', role: 'annotation'});
			data.addRows([	
				<?php
				include 'conexao.php';          
				$sql = "SELECT * FROM upm_hora";
				$buscar = mysqli_query($conexao,$sql);
				while ($dados = mysqli_fetch_array($buscar)) {
					$hora = $dados['horasG'];
					$upm = $dados['upm'];
					$erros = $dados['difErros'];
					$tempo = $dados['horasD'];
					$meta = 800;					
					?>								
					[{v: [<?php echo $hora ?>, 0, 0], f: ' <?php echo $hora ?>'}, <?php echo $upm ?>, '<?php echo $upm ?>', <?php echo $erros ?>, '<?php echo $erros ?>'],	
				<?php } ?>				
				]);
			
			var options = {
				title: 'Evolução da UPM',
				annotations: {
					alwaysOutside: true,
					textStyle: {
						fontSize: 14,
						color: '#000',
						auraColor: 'none'
					}
				},
				hAxis: {
					title: 'Hora',
					format: 'h:mm ',					
				},
				vAxis: {
					title: 'UPM'
				}
			};

			var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
			chart.draw(data, options);
		}
    </script>
</head>
<body style="background-image:  url('../img/logo-pagina-inicial.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; ">
    <header>
        
        <div id="interface" style="background-image:  url('../img/logo-pagina-inicial3.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; margin-top: 60px">            
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <div id="chart_div"  style = " width : 100% ; height : 500px     ; " ></div>
        </div>
    </header>
</body>
</html>

Edited July 17, 2020 at 08:34 AM by ThiagoN

Sign In

Gráfico Google Charts

Recommended Posts

ThiagoN

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information