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