diagrama ishikawa (espinha de piexe)

145 views
Skip to first unread message

Edson Lima

unread,
Oct 17, 2014, 2:29:12 PM10/17/14
to rail...@googlegroups.com
Sei que foge um pouco do tema Rails, mas já pesquisei muito e resolvi recorrer ao grupo.

Alguém já precisou desenvolver o diagrama Ishikawa (espinha de peixe). Preciso desenvolver esse diagrama dinamicamente.

Ronaldo Possan

unread,
Oct 17, 2014, 3:03:16 PM10/17/14
to rail...@googlegroups.com
Você consegue isso com algumas bibliotecas JS.

Encontrei esta e parece ser interessante: http://www.gojs.net/latest/samples/index.html

Outra que recomendo'é a RaphaelJS: http://raphaeljs.com/graffle.html


Em 17 de outubro de 2014 15:29, Edson Lima <edsonl...@gmail.com> escreveu:
Sei que foge um pouco do tema Rails, mas já pesquisei muito e resolvi recorrer ao grupo.

Alguém já precisou desenvolver o diagrama Ishikawa (espinha de peixe). Preciso desenvolver esse diagrama dinamicamente.

--
--
Você recebeu essa mensagem porquê está inscrito no Google
Groups "rails-br".
Para enviar uma mensagem para o grupo, mande um email para rail...@googlegroups.com
Para se descadastrar, mande um e-mail para
rails-br+u...@googlegroups.com
Visite o grupo em http://groups.google.com/group/rails-br?hl=pt-BR
Leia nossa política de uso: http://goo.gl/YGgt7

---
Você recebeu essa mensagem porque está inscrito no grupo "rails-br" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para rails-br+u...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.



--
Ronaldo Possan
Software Engineer
Expertise in Web Development
+55 19 8820-7159
 ronaldo.possan

Edson Lima

unread,
Oct 17, 2014, 3:13:15 PM10/17/14
to rail...@googlegroups.com
Tinha visto estas bibliotecas mas não encontrei algo próximo a este diagrama.

Vou tentar adaptar algumas dessas, mas se alguém conhecer outros exemplos e compartilhar, agradeço. 

Júlio César Siqueira

unread,
Oct 17, 2014, 10:55:13 PM10/17/14
to rail...@googlegroups.com
Esses dias eu estava vendo um video sobre bibliotecas javascript para desenhar com html

Achei esse vídeo sobre o assunto. Busque por Canvas e SVG com javascript, talvez ajude...

https://www.youtube.com/watch?v=iC92yM8_ZKw

Everaldo Gomes

unread,
Oct 17, 2014, 10:59:20 PM10/17/14
to rail...@googlegroups.com
D3.js é a lib mais massa:


Procure por "fishbone diagram".

É isso?

Não estou familiarizado com este diagrama

--

Edson Lima

unread,
Oct 22, 2014, 8:53:01 AM10/22/14
to rail...@googlegroups.com
Estou tentando implementar o fishbone.js  da d3.js

Mas estou recebendo este erro:

NS_ERROR_FAILURE:
O erro acontece quando tento executar o fishborne em algum elemento que não seja "body".


<!DOCTYPE html>
<html lang="en">
<head>
<body style="">
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="content">
<div class="row">
<div class="span9">
<div id="content">
<label>testando</label>
<fieldset>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="">
<li id="aba_objetivo" style="display: list-item;">
<li id="aba_analise_causa" class="active" style="display: list-item;">
<a data-toggle="tab" href="#analise_causa">Analise da causa</a>
</li>
<li id="aba_planejamento_pa" class="" style="display: list-item;">
</ul>
<div id="my-tab-content" class="tab-content">
<div id="identificacao" class="tab-pane">
<div id="objetivo" class="tab-pane">
<div id="analise_causa" class="tab-pane active">
<button id="1" class="btn btn-default" onclick="carregar_causa(this, 4);" type="button">MEDIÇÃO</button>
<div id="myModal" class="modal fade" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1">
<div id="fishbone">
<svg width="1302" height="397">
</div>
<script>



  //modal
    var modal = function(e){
        $('#myModal').modal({
            keyboard: false
        })
        $('#myModal').on('hidden',function(){
           location.reload();
        });
    }

    var carregar_causa = function(e, id){
        $("#modal_content").load('/ocurrences/' + id + '/causa?causaTipo='+ e.id);
        $("#myModalLabel").html($(e).html());
        modal(e);
    }

  //Espinha de peixe
  // create the configurable selection modifier
  var fishbone = d3.fishbone();

  // load the data
  d3.json("/data.json", function(data){
      // the most reliable way to get the screen size
      var size = (function(){
                  return {width: this.clientWidth, height: this.clientHeight};
              }).bind(window.document.documentElement),

              svg = d3.select("#fishbone")
                      .append("svg")
                  // firefox needs a real size
                      .attr(size())
                  // set the data so the reusable chart can find it
                      .datum(data)
                  // set up the default arrowhead
                      .call(fishbone.defaultArrow)
                  // call the selection modifier
                      .call(fishbone);

      // this is the actual `force`: just start it
      fishbone.force().start();

      // handle resizing the window
      d3.select(window).on("resize", function(){
          fishbone.force()
                  .size([size().width, size().height])
                  .start();
          svg.attr(size())
      });

  });
</script>
</div>
<div id="planejamento_pa" class="tab-pane">
</div>
</fieldset>
</div>
<script type="text/javascript">

    $(function () {
        $('#tabs').tab();
        $("li[id*='aba_']").hide();

        $.get("/ocurrences/4/abas",
            function(retorno){
                for (i = 0; i < retorno.length; i++) {
                    $("#aba_" + retorno[i]).show();
                }
                $("#tabs a[href='#" + retorno[retorno.length - 1] + "']").tab("show");
            }
        );
    });

    var atualizar_abas = function(abas){

    }

  btnSalvar = function(id){
      $('edit_ocurrence_' + id).submit(function() {
          var valuesToSubmit = $(this).serialize();
          $.ajax({
              url: $(this).attr('action'), //sumbits it to the given url of the form
              data: valuesToSubmit,
              dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
          }).success(function(json){
                      //act on result.
                  });
          return false; // prevents normal behaviour
      });
  }


</script>
</div>
</div>
</div>
<footer>
</div>
</body>
</html>




Em sexta-feira, 17 de outubro de 2014 15h29min12s UTC-3, Edson Lima escreveu:

Douglas Rossignolli

unread,
Oct 22, 2014, 8:56:08 AM10/22/14
to rail...@googlegroups.com
Agora que o problema é no js jovem, porque não abre uma issue no repositório dessa biblioteca que você está usando?

--
--
Você recebeu essa mensagem porquê está inscrito no Google
Groups "rails-br".
Para enviar uma mensagem para o grupo, mande um email para rail...@googlegroups.com
Para se descadastrar, mande um e-mail para
rails-br+u...@googlegroups.com
Visite o grupo em http://groups.google.com/group/rails-br?hl=pt-BR
Leia nossa política de uso: http://goo.gl/YGgt7

---
Você recebeu essa mensagem porque está inscrito no grupo "rails-br" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para rails-br+u...@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.



--
Atenciosamente,
Douglas Rossignolli

Edson Lima

unread,
Oct 22, 2014, 9:09:28 AM10/22/14
to rail...@googlegroups.com
já abri, mas como já passei muito tempo nessa atividade, estou tentando aqui também. Se sair alguma coisa lá, posto aqui.
<!DOCTYPE html>
<html lang="en">
<head>
<body style="">
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="content">
<div class="row">
<div class="span9">
<div id="content">
<label>testando</label>
<fieldset>
<script>
<span style="color
...
Reply all
Reply to author
Forward
0 new messages