Arrow icon
See all demos

Marey Chart

This demo is an interesting example of a diagramming studio using JointJS, our open-source diagramming library. Marey diagrams are usually used to analyze transportation systems such as bus or train schedules. However, there are other uses for this type of diagram, one of which is workflow analysis.
Demo instructions
Drag to pan the time, double-click the train to zoom in, and right-click to adjust the timetable.

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

The role of JointJS in building an application containing a Marey chart

JointJS, a powerful diagramming library, helps developers and companies of any size build advanced visual applications and No-Code/Low-Code tools. It provides a wealth of ready-made demos and a set of prebuilt features that make creating visual applications containing diagramming studios such as Marey chart a breeze.

We equip developers with all the features they need to save time and focus their energy elsewhere such as linear scale, async, linkTools, and zoom.

‍New to this topic? Learn more about Marey chart πŸ‘‡

What is a Marey chart?

This type of diagram is mainly used in transport to show the timetable of a bus, train or other vehicle. Two dimensions are taken into account for documenting speed and distances: time and station.

Other uses of Marey chart: workflow analysis

Timetable display is one of the use cases for which a Marey diagram can be used. Another application is workflow analysis, which helps companies to clarify, for example, the efficiency of their teams. In an interesting example explained in this article, we see a comparison of four teams trying to achieve the same result. In this case, displaying the workflow in the Marey chart gives supervisors a good idea about how quickly each of the teams managed to build and deploy a solution.

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Visit our Github profile to get the source code of the Marey chart demo and learn from other diagramming enthusiasts.

Speed up your development with aΒ powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.