none
Select mudou e agora? Alguma referencia? RRS feed

  • Pergunta

  • 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>





    • Editado Wilson Boris quarta-feira, 8 de abril de 2015 12:57 complento
    quarta-feira, 8 de abril de 2015 01:38

Respostas

  • 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('') });
    • Marcado como Resposta Wilson Boris quinta-feira, 9 de abril de 2015 14:42
    quinta-feira, 9 de abril de 2015 14:31

Todas as Respostas

  • 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>

    quarta-feira, 8 de abril de 2015 17:58
  • Wilson, uma opção, é no carregamento da página, você chamar o método drawChart() passando o código que está no select.
    quarta-feira, 8 de abril de 2015 18:16
  • Alexandre, obrigado pelo retorno.

    Tem algum exemplo?

    quarta-feira, 8 de abril de 2015 18:32
  • Segue:

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

    quarta-feira, 8 de abril de 2015 18:41
  • 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"?

    quarta-feira, 8 de abril de 2015 23:14
  • Você está usando asp.net web forms ou mvc? Está usando updatepanel?
    quinta-feira, 9 de abril de 2015 11:02
  • MVC 4 C#  database first entity framework 5.
    quinta-feira, 9 de abril de 2015 11:29
  • 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>

    quinta-feira, 9 de abril de 2015 11:44
  • Alexandre,

    executando este código a tela abre e fecha.

    quinta-feira, 9 de abril de 2015 12:06
  • Alexandre,

    executando este código a tela abre e fecha.

    Eu não estou entendendo:
    _PARAMETRO_
     
    quinta-feira, 9 de abril de 2015 12:12
  • Copia aqui o código da sua página.
    quinta-feira, 9 de abril de 2015 12: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>


    quinta-feira, 9 de abril de 2015 12:26
  • 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>

    quinta-feira, 9 de abril de 2015 13:01
  • 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. 

    quinta-feira, 9 de abril de 2015 13:29
  • Wilson, normalmente eu adiciono na lista um item com o texto e o valor em branco.
    quinta-feira, 9 de abril de 2015 13:39
  • 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>

    quinta-feira, 9 de abril de 2015 14:09
  • 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>

    quinta-feira, 9 de abril de 2015 14:12
  • 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();

    quinta-feira, 9 de abril de 2015 14:23
  • 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('') });
    • Marcado como Resposta Wilson Boris quinta-feira, 9 de abril de 2015 14:42
    quinta-feira, 9 de abril de 2015 14:31
  • Opa, agora rolou.

    Para este post acho que podemos encerrar. 

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

    quinta-feira, 9 de abril de 2015 14:42