emerson.assissilva
6/1/2016 3:20:00 AM
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>