Select mudou e agora? Alguma referencia?

Question

Alguém poderia orientar algo para implementar o código abaixo?

Tenho um formulário com o comando select. No evento de mudar ao selecionar um item preciso que rederize o gráfico conforme código:

 <select id="anim" name="cod_anim" class="form-control"></select>

<script type="text/javascript">   
     //google.load('visualization', '1.1', { 'packages': ['corechart'] });
     //google.setOnLoadCallback(drawChart);
    function drawChart() {      
        var frm = document.getElementById('#anim');
        var anim = frm.options[frm.selectedIndex].value;   
     
        var url = '/Progr/Aval/Evol/' + anim;
        $.get(url, {},
              function (data) {
                  var tdata = new google.visualization.DataTable();
                  tdata.addColumn('date', 'dat');
                  tdata.addColumn('number', 'pes');
                  for (var i = 0; i < data.length; i++) {
                      if (data[i].dat != null)
                          tdata.addRow([ToJavaScriptDate(data[i].dat), parseFloat(data[i].pes)]);
                  }
                  var options = {                      
                      width: 700,
                      height: 500,
                      vAxis: { title: "PES", minValue: 1, maxValue: 6 },
                      hAxis: { title: "DATA", textStyle: { fontSize: 10 } },
                      legend: { position: "none" }
                  };
                  var chart = new google.visualization.LineChart(document.getElementById('Evol'));
                  chart.draw(tdata, options);
              });
    }
</script>

 <div id="Evol" style="width: 900px; height: 500px;"></div>

Answer 1

Eu consegui com um evento no select " onchange", conforme abaixo, mas se no select tem apena 1 item eu não cosigo o efeito desejado.

Eu preciso que o gráfico renderize estando o select preenchido.

 <select id="anim" name="cod_anim" onchange = "drawchart(this.value)" class="form-control"></select>

<script type="text/javascript">   
     google.load('visualization', '1.1', { 'packages': ['corechart'] });
     google.setOnLoadCallback(function(){drawchart('')});
    function drawChart(cod_anim) {        
        var url = '/Progr/Aval/Evol/' + cod_anim;
        $.get(url, {},
              function (data) {
                  var tdata = new google.visualization.DataTable();
                  tdata.addColumn('date', 'dat');
                  tdata.addColumn('number', 'pes');
                  for (var i = 0; i < data.length; i++) {
                      if (data[i].dat != null)
                          tdata.addRow([ToJavaScriptDate(data[i].dat), parseFloat(data[i].pes)]);
                  }
                  var options = {                      
                      width: 700,
                      height: 500,
                      vAxis: { title: "PES", minValue: 1, maxValue: 6 },
                      hAxis: { title: "DATA", textStyle: { fontSize: 10 } },
                      legend: { position: "none" }
                  };
                  var chart = new google.visualization.LineChart(document.getElementById('Evol'));
                  chart.draw(tdata, options);
              });
    }
</script>

 <div id="Evol" style="width: 900px; height: 500px;"></div>

Answer 2

Wilson, uma opção, é no carregamento da página, você chamar o método drawChart() passando o código que está no select.

Answer 3

Alexandre, obrigado pelo retorno.

Tem algum exemplo?

Answer 4

Segue:

$(document).ready(function() {
    drawChart(_PARAMETRO_);
});

Answer 5

Alexandre,

eu estou tentando aprender JavaScript. Neste código em que momento ocorre o carregamento da página?

O parâmetro seria o "cod_anim"?

Answer 6

Você está usando asp.net web forms ou mvc? Está usando updatepanel?

Answer 7

MVC 4 C#  database first entity framework 5.

Answer 8

Segue o exemplo:

<script type="text/javascript">   
     $(document).ready(function() {
        google.load('visualization', '1.1', { 'packages': ['corechart'] });
        google.setOnLoadCallback(function(){drawchart('')});
        drawChart(_PARAMETRO_);
     });
    function drawChart(cod_anim) {        
        var url = '/Progr/Aval/Evol/' + cod_anim;
        $.get(url, {},
              function (data) {
                  var tdata = new google.visualization.DataTable();
                  tdata.addColumn('date', 'dat');
                  tdata.addColumn('number', 'pes');
                  for (var i = 0; i < data.length; i++) {
                      if (data[i].dat != null)
                          tdata.addRow([ToJavaScriptDate(data[i].dat), parseFloat(data[i].pes)]);
                  }
                  var options = {                      
                      width: 700,
                      height: 500,
                      vAxis: { title: "PES", minValue: 1, maxValue: 6 },
                      hAxis: { title: "DATA", textStyle: { fontSize: 10 } },
                      legend: { position: "none" }
                  };
                  var chart = new google.visualization.LineChart(document.getElementById('Evol'));
                  chart.draw(tdata, options);
              });
    }
</script>

Answer 9

Alexandre,

executando este código a tela abre e fecha.

Answer 10

Alexandre,

executando este código a tela abre e fecha.

Eu não estou entendendo:

_PARAMETRO_

 

Answer 11

Copia aqui o código da sua página.

Answer 12

@model BR.Models.Programa_Nutricao
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
   
    <div class="panel panel-primary">
        <div class=" panel-heading">
            <h3 class="panel-title">1. REGISTRO DE EVOLUTIVO DO PESO</h3>
        </div>
        <div class="panel-body">         
            <div class="row">
                <div class="editor-label  col-md-4">                 
                    <label class="control-label">Proprietário</label>
                </div>
                <div class="editor-field col-md-4">
                    @Html.DropDownList("cod_proprietario", (SelectList)ViewBag.cod_proprietario, String.Empty, new { id = "proprietario", @class = "form-control" })
                </div>
                <div class="editor-field col-md-1">
                    <input type="button" class="btn btn-info" value="Novo" id="botao_proprietario">
                </div>
            </div>         
            <div class="row">
                <div class="editor-label col-md-4">                 
                    <label class="control-label">Nome do animal</label>
                </div>
                <div class="editor-field col-md-4">                 
                        @Html.DropDownList("cod_animal", null, new { onchange = "drawchart(this.value)", Name = "cod_animal", id = "animal", @class = "form-control" })                  
                
                </div>
                <div class="editor-field col-md-1">
                    <input type="button" class="btn btn-info" value="Novo" id="botao_animal">
                </div>
            </div>       
        
            <div class="row">
                <div class="editor-field col-md-4">
                    @Html.LabelFor(model => model.data_semanal)<font style="color:red;">*</font>
                </div>
                <div class="editor-field col-md-4">
                    @Html.JQueryUI().Datepicker("data_semanal", null, new { id = "data_semanal", @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.data_semanal)
                </div>
            </div>
            <div class="row">
                <div class="editor-label  col-md-4">
                    @Html.LabelFor(model => model.peso_kg)
                </div>
                <div class="editor-field col-md-4">
                    @Html.TextBoxFor(model => model.peso_kg, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.peso_kg)
                </div>
            </div>
      
            <p>
                <input type='submit' value='Salvar' class="btn btn-success" />
                <a href="/Programa_Nutricao/Principal"><input type="button" value="Voltar" class="btn btn-success" /></a>
            </p>
        </div>
      
    </div>   
}
<div class="panel panel-primary">
    <div class=" panel-heading">
        <h3 class="panel-title">1. PAINEL DE MONITORAMENTO</h3>
    </div>
    <div class="panel-body">
        <div id="2" class="panel panel-success">
            <div class="panel-body">
                <div>
                    <fieldset>
                        <legend style="font-size:small">
                            <i>1.1. OBSERVAÇÃO GRÁFICA DO PESO CORPORAL</i>
                        </legend>
                        <div id="EvolucaoPeso" style="width: 900px; height: 500px;"></div>
                    </fieldset>
                    <fieldset>
                        <legend style="font-size:small">
                            <i>1.2. NÚMERO DE MEDIDAS DO PESO CORPORAL</i>
                        </legend>
                        <div id="table_div"></div>
                    </fieldset>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">   
    $("#proprietario").change(function () {
        var dados = $(this).val().toString();
        var options = '';
        if (dados != 0) {
            $.ajax({
                url: '@Url.Action("RetornaAnimais", "Principal")',
                type: 'POST',
                dataType: 'json',
                data: { codigo: dados },
                success: function (result) {
                    $.each(result, function (key, val) {                       
                        options += '<option value="' + val["id"] + '" selected>' + val["nome"] + '</option>';
                    });
                    $("#animal").html(options);
                }
            });
        } else {
            console.log(options)
            $("#animal").html(options);
        }
    }).change();
    $('#botao_proprietario').click(function () {
        var left = (window.screen.width / 2) - 260;
        var top = (window.screen.height / 2) - 300;
        var w = window.open('/Proprietario_/Create', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = ' + left + ',top = ' + top + '');
    });
    $('#botao_animal').click(function () {
        var left = (window.screen.width / 2) - 260;
        var top = (window.screen.height / 2) - 300;
        var w = window.open('/AnimalCompanhia_/Create', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=500,left = ' + left + ',top = ' + top + '');
    });
    function ToJavaScriptDate(value) {
        var pattern = /Date\(([^)]+)\)/;
        var results = pattern.exec(value);
        return new Date(parseFloat(results[1]));
    }
    $(document).ready(function () {
        google.load('visualization', '1.1', { 'packages': ['corechart'] });
        google.setOnLoadCallback(function () { drawchart('') });
        drawChart(_PARAMETRO_);
    });        
        function drawchart(animal) {
            var url = '/Programa_Nutricao/Principal/EvolucaoPeso/' + animal;
            $.get(url, {},
                  function (data) {
                      var tdata = new google.visualization.DataTable();
                      tdata.addColumn('date', 'data_semanal');
                      tdata.addColumn('number', 'peso_kg');
                      for (var i = 0; i < data.length; i++) {
                          if (data[i].data_semanal != null)
                              tdata.addRow([ToJavaScriptDate(data[i].data_semanal), parseFloat(data[i].peso_kg)]);
                      }
                      var options = {
                          title: 'Evolução do peso corporal',
                          width: 700,
                          height: 500,
                          vAxis: { title: "PESO (kg)", minValue: 1, maxValue: 6 },
                          hAxis: { title: "DATA", textStyle: { fontSize: 10 } },
                          legend: { position: "none" }
                      };
                      var chart = new google.visualization.LineChart(document.getElementById('EvolucaoPeso'));
                      chart.draw(tdata, options);
                  });
        }    
  
</script>

Answer 13

Wilson, criei uma view de exemplo onde o js chama o método no load da página.

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Teste</title>
    <script type="text/javascript">
        var value;
        $(document).ready(function () {
            value = $("#dropdown").val();

            if (value != undefined) {
                executarMetodo(value);
            }

            $("#dropdown").change(function () {
                value = $(this).val();
                executarMetodo(value);
            });
        });
        function executarMetodo(codigo) {
            alert(codigo);
        }
    </script>
</head>
<body>
    <div>
        <select id="dropdown">
            <option label="teste 1" value="1"></option>
            <option label="teste 2" value="2"></option>
        </select>
    </div>
</body>
</html>

Answer 14

Alexandre, blz o teu exemplo rodou 100%.

Vou adequar ao modelo.

Um detalhe: no script que carrega o drop id=animal, como fazer para vir como com o primeiro item vazio, pois assim é change funcionará. Obrigado. 

Answer 15

Wilson, normalmente eu adiciono na lista um item com o texto e o valor em branco.

Answer 16

Estou errando em alguma coisa.

Com  a implentação abaixo não está rodando, a página retorna em vazia:

<script type="text/javascript">        
        var value;
        $(document).ready(function () {
            google.load('visualization', '1.1', { 'packages': ['corechart'] });
            google.setOnLoadCallback(function () { drawchart('') });
            value = $("#animal").val();

            if (value != undefined) {
                drawchart(value);
            }

            $("#animal").change(function () {
                value = $(this).val();
                drawchart(value);
            });
        });
        function drawchart(codigo) {           
            var url = '/Programa_Nutricao/Principal/EvolucaoPeso/' + codigo;
            $.get(url, {},
                  function (data) {
                      var tdata = new google.visualization.DataTable();
                      tdata.addColumn('date', 'data_semanal');
                      tdata.addColumn('number', 'peso_kg');
                      for (var i = 0; i < data.length; i++) {
                          if (data[i].data_semanal != null)
                              tdata.addRow([ToJavaScriptDate(data[i].data_semanal), parseFloat(data[i].peso_kg)]);
                      }
                      var options = {
                          title: 'Evolução do peso corporal',
                          width: 700,
                          height: 500,
                          vAxis: { title: "PESO (kg)", minValue: 1, maxValue: 6 },
                          hAxis: { title: "DATA", textStyle: { fontSize: 10 } },
                          legend: { position: "none" }
                      };
                      var chart = new google.visualization.LineChart(document.getElementById('EvolucaoPeso'));
                      chart.draw(tdata, options);
                  });
        }
    </script>

Answer 17

Você colocou as referências dos arquivos javascripts?

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 18

Estava no final da página, mas mesmo alocando para cima, a página retorna em branco.

Agora se eu retiro as linhas google, a pagina abre, mas não renderiza o gráfico, rsrrs 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">     
        var value;      
        $(document).ready(function () {
            google.load('visualization', '1.1', { 'packages': ['corechart'] });
            google.setOnLoadCallback(function () { drawchart('') });
            value = $("#animal").val();

Answer 19

Wilson, nunca usei essa api do google, porém, vendo em alguns fóruns, o pessoal diz pra tirar o google.load e o google.setOnLoadCallback de dentro do ready. ou seja, faz assim:

<script type="text/javascript">     
        var value;      
            google.load('visualization', '1.1', { 'packages': ['corechart'] });
            google.setOnLoadCallback(function () { drawchart('') });
        $(document).ready(function () {
            value = $("#animal").val();

            google.load('visualization', '1.1', { 'packages': ['corechart'] });
            google.setOnLoadCallback(function () { drawchart('') });

            google.load('visualization', '1.1', { 'packages': ['corechart'] });
            google.setOnLoadCallback(function () { drawchart('') });

Answer 20

Opa, agora rolou.

Para este post acho que podemos encerrar. 

Só falta acertar a dinâmica de mudar o drop. Muito obrigado.