2

Preciso criar um código que após passar alguns parâmetros ele gera-se um gráfico parecido com a imagem abaixo, pensei em criar uma tabela para cada atividade. Alguém tem alguma dica, ou conhece um artigo que possa me ajudar? Penso em usar Json para passar os dados (sei trabalhar com Json), meu problema seria criar essa function em Javascript

inserir a descrição da imagem aqui

Essa tabela é definida por dependências, como vemos na imagem a atividade B é dependente da atividade A

Meu Json terá uma estrutura parecida com essa abaixo:

<script>
$(document).ready(function () {

    $.ajax({
        type: "GET",
        url: "/Venda/GetDadosItensVenda",
        success: function (itensVenda) {

            if (itensVenda != null) {

                $('#tbody').children().remove();

                $(itensVenda).each(function (i) {

                    var tbody = $('#tbody');
                    var tr = "<tr>";
                    tr +=
                    tr += "<td>" + itensVenda[i].CodigoProduto;
                    tr += "<td>" + itensVenda[i].Quantidade;
                    tr += "<td>" + itensVenda[i].PrecoUnitario;
                    tr += "<td>" + "<button class='btn btn-info' onclick=Editar(" + itensVenda[i].Id + ")>" + "Editar";
                    tr += "<td>" + "<button class='btn btn-danger' onclick=Deletar(" + itensVenda[i].Id + ")>" + "Deletar";

                    tbody.append(tr);

                });
            }
        }
    });
});

`

5
  • 1
    Quando você diz "um gráfico" você se refere à imagem inteira? E é importante que seja tudo uma imagem? No meu entender, o mais simples seria criar várias tabelas mesmo (já que é mais fácil criar e estilizar elementos no DOM do que desenhar tabelas arbitrárias num canvas), posicionando-as de forma absoluta numa área da página. As setas poderiam ser uma única imagem, rotacionada com CSS. P.S. Ainda que seja importante gerar uma imagem, há uma biblioteca que consegue transformar o resultado visual da página em uma imagem.
    – mgibsonbr
    17/10/2015 às 22:01
  • 1
    A propósito, você já sabe ou já definiu como seria esse JSON? Seria apenas uma descrição declarativa dos dados (e o programa desenha como quer) ou teria também especificado o posicionamento? Se não definiu. eu sugeriria uma lista de listas, a ser desenhada da esquerda pra direita, onde cada elemento ou é "início" ou é uma estrutura com os valores da tabela (as tabelas sempre têm o mesmo formato, certo?). Só uma dúvida: todos os elementos da direita são "alcançáveis" por todos os elementos da esquerda? Poderia por exemplo ter um E com seta saindo de B mas não de C?
    – mgibsonbr
    17/10/2015 às 22:10
  • @mgibsonbr Não seria uma imagem não, seria várias tabelas mesmo. Eu editei a minha pergunta com um Json parecido com que quero usar.
    – user31040
    18/10/2015 às 18:21
  • 1
    Obrigatoriamente tem que ser nesse layout? Pergunto porque temos vários frameworks que podem ajudar a montar um gráfico. Porém nesse layout acho difícil. Até porque não parece um gráfico rsrs 18/10/2015 às 18:42
  • Não que precisa ser um gráfico, basta ser algo visual para informar as dependências entre atividades. Estou aberto a sugestões.
    – user31040
    18/10/2015 às 18:51

2 Respostas 2

1

JC, no seu exemplo você está esquecendo de fechar as tags, em todo caso eu usaria um template para montar o HTML.

Segue um exemplo com HandleBars.

$(function () {

  var source = $("#tmpl-registros").html();
  var template = Handlebars.compile(source);
  var tabela = $('#tbody');
  
  $.ajax({
    type: "GET",
    url: "/Venda/GetDadosItensVenda",
    success: function (itensVenda) {
      if (itensVenda != null) {
        var html = template(itensVenda);
        tabela.html(html);
      }
    },
    error: function () {
      var itensVenda = [];
      for (var indice = 1; indice <= 20; indice++) {
        itensVenda.push({
          Id: indice, 
          CodigoProduto: indice, 
          Quantidade: indice, 
          PrecoUnitario: 1.23 * indice
        });
      }

      var html = template(itensVenda);
      tabela.html(html);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

<table>
  <thead>
    <tr>
      <th>CodigoProduto</th>
      <th>Quantidade</th>
      <th>PrecoUnitario</th>
      <th>Editar</th>
      <th>Deletar</th>
    </tr>
  </thead>
  <tbody id="tbody">
  </tbody>
</table>

<script id="tmpl-registros" type="text/x-handlebars-template">
  {{#each this}}
  <tr>
    <td>{{CodigoProduto}}</td>
    <td>{{Quantidade}}</td>
    <td>{{PrecoUnitario}}</td>
    <td><button class='btn btn-info' onclick=Editar({{Id}})>Editar</button></td>
    <td><button class='btn btn-danger' onclick=Deletar({{Id}})>Deletar</button></td>
  </tr>
  {{/each}}
</script>

-1

Tente isto:

<script>
function sua_funcao(parametroA) {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("tabela").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","cria_tabela.php?parametro="+parametroA,true);
            xmlhttp.send();
}
</script>

Este código vai no head de sua página, ele pega uma página isolada "cria_tabela.php" e alimenta o item "tabela" no seu código com o resultado desta página, assim você pode continuar a programar PHP com poucas linhas de JavaScript.

Este é o item a ser alimentado:

<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12" id="tabela" >
</div>

E na cria_tabela teria suas tabelas criadas em PHP.

Se ainda não conhece, recomendo dar uma pesquisada em bootstrap, para melhor aparência da página.

0

Você deve fazer log-in para responder a esta pergunta.