Skip to main content

Release 6.6.4

· 2 min read
Simon Porritt
Simon Porritt
JsPlumb core team

Organization chart starter app​

We've added a new starter app - Organization chart. It uses our Hierarchy layout and inspector component to provide a solid foundation for your own org charts, with some nice navigation between elements.

Organization chart JsPlumb, build diagrams and rich visual UIs fast - JsPlumb, build diagrams and rich visual UIs fast

The org chart starter app showcases several features of JsPlumb Toolkit:

  • The Hierarchy layout makes it a snap to arrange items in a hierarchical view
  • The Surface element has a number of helper methods to let you navigate around the dataset. In this app we take advantage of the Surface's ability to smoothly pan to and zoom in on a specific element.
  • We use the inspector to provide a detail view of each individual, and from inside the inspector we can navigate the chart.
  • For rendering in this app we use HTML elements, which we can easily style.

Zooming and panning​

  • We've made a couple of updates to the internals of the Surface widget, to improve the way we animate a zoom and pan operation. You can see the results in our new Organization chart starter application.

Inspector component​

  • It's now possible to switch off the template cache in the Inspector component. This allows you to serve a template for a given object whose content is based upon the data contained within the object. In previous versions once a template had been retrieved for a given combination of object type (node/group/edge/port) and type, the template was cached for the duration of the page load.

Start a free trial

Interested in the concepts discussed in this article? JsPlumb is now in maintenance mode, but the good news is that we've released a bigger and better library - VisuallyJs. If you can do it in JsPlumb you can do it more easily in VisuallyJs.

To read more about VisuallyJs, check out the home page, or if you want to get started on a trial right now, head over to the trial page at https://visuallyjs.com/trial

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.