JSPLUMB how to fetch records from database

JavaScript
1

I need some help please how can I fetch records from database and display it in jsplumb in hierarchical chart…I am not familiar with this plugin , I tried to read the docs but it didn’t show some example on how to display records from database.

Thank you in avdance

2

How can I use jsplumb to create dynamic hierarchical chart ,does anyone tried this before ?

Thank you in advance.

3

I don’t think JSPlumb has any concept of your database.
You’ll most likely have to fetch everything you need via AJAX (or just echo it to the page on load) before initializing the plugin.

4

Hi @James_Hibbard,

Thank you for the quick reply…yes I know how to fetch records from database via ajax,but I am confuse about the plugin how can I put the return json in the jsplumb,…I look at in there api and docs there is no example on how to handle json object to draw hierarchical chart dynamically.

Thank you in advance.

5

Well JSON is just a data format.
What data is JSPlumb expecting (a simple example of a chart would be nice) and what does your JSON look like?

6

@James_Hibbard,

I want to create like this

http://www.jsplumb.org/demo/chart/dom.html

but I am confuse how to do tha,there is no example code.

Thank you in advance.

7

Come on jemz, just open your sample page, inspect the source and put the pieces together from there.

Here is the source code of the page you linked to with all of the unnecessary elements removed.

As you can see, the JS for drawing the chart itself is reasonably well commented, so hopefully this should give you something to go on.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <title>jsPlumb 1.7.2 demo - chart (Vanilla)</title>

    <link rel="stylesheet" href="http://www.jsplumb.org/css/jsplumb.css">
    <link rel="stylesheet" href="http://www.jsplumb.org/demo/chart/demo.css">
  </head>

  <body data-demo-id="chart" data-library="dom">
    <div id="main">
      <div class="demo chart-demo" id="chart-demo">
        <div class="window" id="chartWindow1">window one</div>
        <div class="window" id="chartWindow2">window two</div>
        <div class="window" id="chartWindow3">window three</div>
        <div class="window" id="chartWindow4">window four</div>
        <div class="window" id="chartWindow5">window five</div>
        <div class="window" id="chartWindow6">window six</div>
      </div>
    </div>

    <script src="http://www.jsplumb.org/js/dom.jsPlumb-1.7.2-min.js"></script>
    <script>
      jsPlumb.ready(function() {

        var color = "gray";

        var instance = jsPlumb.getInstance({
          // notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother
          // than the curves on the first demo, which use the default curviness value.
          Connector : [ "Bezier", { curviness:50 } ],
          DragOptions : { cursor: "pointer", zIndex:2000 },
          PaintStyle : { strokeStyle:color, lineWidth:2 },
          EndpointStyle : { radius:9, fillStyle:color },
          HoverPaintStyle : {strokeStyle:"#ec9f2e" },
          EndpointHoverStyle : {fillStyle:"#ec9f2e" },
          Container:"chart-demo"
        });

        // suspend drawing and initialise.
        instance.doWhileSuspended(function() {
          // declare some common values:
          var arrowCommon = { foldback:0.7, fillStyle:color, width:14 },
            // use three-arg spec to create two different arrows with the common values:
            overlays = [
              [ "Arrow", { location:0.7 }, arrowCommon ],
              [ "Arrow", { location:0.3, direction:-1 }, arrowCommon ]
            ];

          // add endpoints, giving them a UUID.
          // you DO NOT NEED to use this method. You can use your library's selector method.
          // the jsPlumb demos use it so that the code can be shared between all three libraries.
          var windows = jsPlumb.getSelector(".chart-demo .window");
          for (var i = 0; i < windows.length; i++) {
            instance.addEndpoint(windows[i], {
              uuid:windows[i].getAttribute("id") + "-bottom",
              anchor:"Bottom",
              maxConnections:-1
            });
            instance.addEndpoint(windows[i], {
              uuid:windows[i].getAttribute("id") + "-top",
              anchor:"Top",
              maxConnections:-1
            });
          }

          instance.connect({uuids:["chartWindow3-bottom", "chartWindow6-top" ], overlays:overlays, detachable:true, reattach:true});
          instance.connect({uuids:["chartWindow1-bottom", "chartWindow2-top" ], overlays:overlays});
          instance.connect({uuids:["chartWindow1-bottom", "chartWindow3-top" ], overlays:overlays});
          instance.connect({uuids:["chartWindow2-bottom", "chartWindow4-top" ], overlays:overlays});
          instance.connect({uuids:["chartWindow2-bottom", "chartWindow5-top" ], overlays:overlays});

          instance.draggable(windows);
        });

        jsPlumb.fire("jsPlumbDemoLoaded", instance);
      });
    </script>
  </body>
</html>
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.