Boa noite, pessoal! Estou com um problema em relação a alguns gráficos que fiz, eu não estou conseguindo deixá-los responsivos como o restante da aplicação, alguém saberia me dizer como posso resolver este problema? Obrigado
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas
respostas
Gráficos responsivos
Oi João tudo bem?
Teria como postar seu código aqui, ou se for mais de um arquivo colocar no gitub por gentileza. Assim posso analisar e ver onde está o problema.
Tudo certo, e com você? Abaixo segue o código que está no arquivo graficos.js
<var grafico = new google.visualization.LineChart(document.getElementById('graficoLinha'));
grafico.draw(tabela, opcoes);
var tabela = google.visualization.arrayToDataTable([
['Mês','Entrada','Saída'],
['jan',2500,1000],
['fev',1000,500],
['mar',3000,1300],
['abr',1500,1700],
['mai',5000,2250],
['jun',3567,3000],
['jul',3452,1468],
['ago',1833,5250],
['set',1800,1000],
['out',1800,1000],
['nov',3569,1500],
['dez',3000,1740]
]);
var opcoes = {
title: 'Entradas e saídas da conta',
width: 800,
height: 400,
vAxis: {
gridlines: {color: 'transparent'},
format: 'currency',
title: 'Valores'
},
hAxis: {
title: 'Mês'
}
}Aqui está a chamada do gráfico
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/graficos.js"> </script>
<script>
google.charts.load('current', {'packages':['corechart'], 'language': 'pt'});
google.charts.setOnLoadCallback(desenharGrafico);
</script>E aqui o desenho do gráfico na página
<div class="container-fluid graficos">
<div id="graficoLinha"> </div>
</div>
<script src="js/graficos.js"></script>
<script src="js/jquery.js"></script>Não consegui carregar o gráfico.
Aqui google.charts.setOnLoadCallback(desenharGrafico); quem é desenharGrafico?
opaa, achei que tinha pegado ele também kkk. Segue novamente:
function desenharGrafico (){
<var grafico = new google.visualization.LineChart(document.getElementById('graficoLinha'));
grafico.draw(tabela, opcoes);
...
Muito estranho...
To tomando erro nessa linha Uncaught TypeError: Cannot read property 'LineChart' of undefined at topico-graficos-responsivos.html:20
No seu projeto o gráfico carregou ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/graficos.js"> </script>
<title>Document</title>
</head>
<body>
<div class="container-fluid graficos">
<div id="graficoLinha"> </div>
</div>
<script>
var grafico = new google.visualization.LineChart(document.getElementById('graficoLinha'));
grafico.draw(tabela, opcoes);
var tabela = google.visualization.arrayToDataTable([
['Mês', 'Entrada', 'Saída'],
['jan', 2500, 1000],
['fev', 1000, 500],
['mar', 3000, 1300],
['abr', 1500, 1700],
['mai', 5000, 2250],
['jun', 3567, 3000],
['jul', 3452, 1468],
['ago', 1833, 5250],
['set', 1800, 1000],
['out', 1800, 1000],
['nov', 3569, 1500],
['dez', 3000, 1740]
]);
var opcoes = {
title: 'Entradas e saídas da conta',
width: 800,
height: 400,
vAxis: {
gridlines: { color: 'transparent' },
format: 'currency',
title: 'Valores'
},
hAxis: {
title: 'Mês'
}
}
</script>
<script src="js/graficos.js"></script>
<script src="js/jquery.js"></script>
<script>
function desenharGrafico (){
google.charts.load('current', { 'packages': ['corechart'], 'language': 'pt' });
google.charts.setOnLoadCallback(desenharGrafico);
}
</script>
</body>
</html>No meu carrega sim, mas antes de eu postar a dúvida também estava com este problema, ai testei envolvendo a div do gráfico dentro da tag main e com isso voltou a aparecer, depois tirei para testar e continuou funcionando perfeitamente
Testei como você disse e não funcionou. Poderia postar todo o projeto no github assim irei ter o mesmo projeto igualzinho para analisar.
solução!
Bom dia, André. Tudo bem? Acabei de encontrar uma forma de deixá-los responsivos, testei utilizando a API Chartjs e lá basta utilizar os comandos height: 70vh; width: 85vw; no CSS que resolve o problema, mas de todo modo agradeço a atenção novamente. Muito obrigado
Disponha e bons estudos!!!