jsPlumbTree

A jQuery plugin for generating a tree structure using jsPlumb. The tree is drawn from left to right, top to bottom.

Please note that only jsPlumb up to version 1.7.x is supported!!

Usage

Initialization should be done in the jsPlumb ready callback:

jsPlumb.ready(function() {
    // get an instance of jsPlumb first
    var pdef = {
        // disable dragging
        DragOptions: null,
        // tree container id (with all the nodes)
        Container : "container"
    };
    var plumb = jsPlumb.getInstance(pdef);

    var opts = {
        // node objects id prefix
        prefix: 'node_',
        // left coordinate of root node (0)
        baseLeft: 0,
        // top coordinate of root node (0)
        baseTop: 0,
        // node width
        nodeWidth: 100,
        // horizontal padding between nodes
        hSpace: 36,
        // vertical padding between nodes
        vSpace: 10,
        // source anchor
        sourceAnchor: "RightMiddle",
        // target anchor
        targetAnchor: "LeftMiddle",
        // source endpoint definition
        sourceEndpoint: null,
        // target endpoint definition
        targetEndpoint: null,
        // image url for plus anchor button
        imgPlus: null,
        // image url for minus anchor button
        imgMinus: null,
        // a function(this, node) to be called before making a connection
        connectFunc: null,
        // ...add other jsPlumb options here...
    };

    var tree = jQuery.jsPlumbTree(plumb, opts);
    tree.init();
});

All nodes must have the following HTML attributes set:

data-id: node id. Must be unique in the whole tree
data-parent: parent node id. Do not set for the root node
data-first-child: id of the first child node
data-next-sibling: id of the next sibling node

API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

Aug 18, 2022

A Phigros chart render based on Pixi.js

Dec 30, 2022

A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Jul 29, 2022

Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

Jan 2, 2023

GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

Dec 29, 2022

🍞📊 Beautiful chart for data visualization.

🍞 📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. 📦 Packages The functionality of TOAST U

Jan 2, 2023

:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

Dec 31, 2022

Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

Dec 25, 2022

📈 A small, fast chart for time series, lines, areas, ohlc & bars

📈 μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Jan 7, 2023

Comments

Branches collapsing

Hi,

I really appreciate this plugin, but I was wondering if there's a way to have all the branches collapsed by default?

Also, if there is a way to remember which branches where expanded/collapsed so when I toggle a parent node, the one collapsed stay that way.

Thanks

opened by Claude-Viglob 0