Search the Community

Gráfico está saindo invertido; com o valor mais alto com a coluna mais baixa que a coluna com o valor menor. Passando o mouse pelas colunas observo que os valores estão corretos. Mas as colunas não ficam desenhadas na altura correta. Se alguém puder ajudar, agradeço. <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(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Celulas', 'Pessoas', 'Visitantes'], <?php if (is_array($total_pessoas_reuniao)) { Foreach ($total_pessoas_reuniao as $raw) { $celula = $raw['celula']; $pessoas = $raw['totalpessoas']; $visitantes= $raw['totalVisitantes']; ?> ['<?php echo $celula; ?>','<?php echo $pessoas; ?>','<?php echo $visitantes; ?>'], <?php } } ?> ]); var celulasOptions = { width: 700, height: 450, chart: { title: 'Dados das células', subtitle: 'Dados comparativos das células' }, series: { 0: { axis: 'Pessoas' }, 1: { axis: 'Visitantes' } }, axes: { y: { Pessoas: {label: 'Quantidade de pessoas'}, visitantes: {side: 'right', label: 'Quantidade de visitantes'}, }, }, bar: { groupWidth: '60%' }, legend: { position: "relative" }, backgroundColor: 'white', chartArea: {left:20,top:0,width:'100%',height:'75%'}, }; var classicOptions = { width: 700, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'Quantidade'}, 1: {title: 'pessoas'} } }; function drawCelulasChart() { var celulasChart = new google.charts.Bar(chartDiv); celulasChart.draw(data, google.charts.Bar.convertOptions(celulasOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Celulas'; button.onclick = drawCelulasChart; } drawCelulasChart(); }; </script> <div id="chart_div" style="padding:10px !important;"></div>

Olá pessoas, estou utilizando o Google Charts, e me venho a necessidade de usar imagem nos gráficos. Alguém já usou, e sabe como fazer?

Pessoal, primeiramente boa tarde! Seguinte, estou utilizando o chartJS para manipular um gráfico, mas estou com um problema, os valores que eu seto no data dele, forjam valores automáticos na temperatura, mas eu queria setar manualmente esses valores da temperatura, alguém sabe como faço para manipular esses dados? (apenas da temperatura). Esse é meu código JS <script> var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: ["0", "5", "10", "15", "20", "25", "30", "35","40","45","50","55","60","65","70","75","80","85","90","95","100","105","110","115","120","125","130","135"], datasets: [{ label: "Rampa de temperatura - mostura", backgroundColor: 'transparent', borderColor: '#FFB22B', borderWidth: 3, radius: 5, data: [102, 130, 201, 340,220,150,450,560,670,560,810,150,160,150,105,103,120,110,180,310,410,510,310,110,310,410,510,110,], }] }, // Configuration options go here options: { title:{ display: true, fontSize: 20, text: "RAMPA DE TEMPERATURA" }, labels:{ fontStyle: "bold" }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Tempo em minutos' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Temperatura em ºC' } }] } } }); </script>

Olá! Estou tentando usar o google charts pela primeira vez para tentar exibir um gráfico em uma pagina. Vou explicar como estou tentando fazer isso... Tenho uma pagina que faz uma requisição via "ajax"(dataType: json) para outra pagina que roda uma query sql. O resultado dessa query eu armazeno em um array, que depois utilizo a função "json_encode" para codificar o array no formato json. Até aí tudo funciona normal, porem o gráfico não é exibido na pagina que faz a requisição por um pequeno detalhe de aspas no array. Exemplo de resultado: {"cols":[ {"label":"grupo","type":"string"}, {"label":"valor","type":"number"} ], "rows":[ {"c":[{"v":"ACESSO REMOTO"},{"v":"5033.99"}]}, {"c":[{"v":"FORMATACAO"},{"v":"640.00"}]} ] } Como deveria ser: {"cols":[ {"label":"grupo","type":"string"}, {"label":"valor","type":"number"} ], "rows":[ {"c":[{"v":"ACESSO REMOTO"},{"v":5033.99}]}, {"c":[{"v":"FORMATACAO"},{"v":640.00}]} ] } Repare que nas linhas onde eu tenho "acesso remoto" e "formatação", ao lado seria respectivamente seus valores. É nesse campo "valor" que não deveria aparecer aspas. Mas a função "json_enconde" coloca aspas em todos os campos, e por esse motivo o gráfico não é exibido. Quando removo essas aspas desse campo "valor" manualmente e coloco na pagina, o gráfico é exibido. Alguem sabe como posso resolver esse problema? Alguem já conseguiu utilizar o charts dessa maneira que estou tentando? Obs: Como estou utilizando o charts pela primeira vez, segui a documentação do Google Chart com Json.