Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30591 > unrolled thread

Erro ao criar gráfico com morris.js

Back to article view | Back to comp.lang.javascript

Contents

  Erro ao criar gráfico com morris.js emerson.assissilva@gmail.com - 2016-05-31 20:20 -0700

#30591 — Erro ao criar gráfico com morris.js

Boa noite.
Estou criando um gráfico com o morris.js e tudo funciona como esperado na primeira vez que ele é criado, mas da segundo vez em diante não aparece mais nada.

A situação é o seguinte:
1 - Clico no botão
2 - Faço um get em uma url
3 - Abro um modal
4 - Crio o Morris.Bar() dentro do modal.

Só que quando fecho o modal e clico em outro botão pra criar o gráfico com outros dados não aparece nada.

Percebi que o gráfico é criado dentro da tag <sgv> que tem uns atributos x e y, só que esses atributos estão sendo setados para 0 quando o gráfico é criado pela segunda vez, e eu acho que esse é um dos problemas, só não sei por que ocorre nem como resolver.

Obs: Esse problema só ocorre quando crio o gráfico com o modal.

És a minha função:

var morris = null;
function getValores(val1, val2){
		
		$("#chart").empty();
        $("#chart").mask('Atualizando Gráfico');       
        $('#chart_modal').modal('show');
        
        $.get("{% url 'funcao_python' %}?val1=" + val1 + "&val2=" + val2,
                function(dados){
        			dictDados = []
        			dados['aaData'].forEach(function(item){
        				dictDados.push({title: item.title, value: item.value});
        			});
        			
        			//if (morris == null){
        			morris = new Morris.Bar({
		          	  	element: 'chart',
		          	  	data: dictDados,
		          	  	xkey: ['title'],
		          	  	ykeys: ['value'],
		          	  	labels: ['Valor'],
		          	  	ymax: parseFloat(dados['max_value']),
		          	  	resize: true
		          		
		          	});
        			/*}else{
        				morris.setData(dictDados);
        			}*/
        			
        			$('[text-anchor^=end] tspan').each(function(index){
        				elemento = $('[text-anchor^=end] tspan').eq(index);
        				value = parseFloat(elemento.text().replace(',','.')).toFixed(3)
        				elemento.text(value);
        			});
        			
        			$("#chart").unmask();        	
                });
         
    }


És o modal já com a div do chart:

<div id="chart_modal" class="modal hide fade" style="display: block; width: 800px;"> 
     
	     <div class="modal-header">
	          <h3 id="title">Gráfico</h3>
	     </div>
	     <div id="chart_modal-body" class="modal-body">
	     	<div id="chart" style="height: 370px;"></div>
	     </div>
	     <div class="modal-footer">
	       <a id="ok_modal" onclick="$('#chart_modal').modal('hide');" class="btn">OK</a>
	     </div>
  </div>

[toc] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web