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+

The source code of this demo is available as part of the JointJS+ commercial license. Don't have a license yet? Start a trial and use the source code of this and many other demos for free, with no obligations, for 30 days.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS+

All features required to build this demo are included in the commercial JointJS+ package. Don't have a license yet? Start a trial and build professional applications with ease.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

The source code of this demo is available in the JointJS open-source library which helps developers create simple visual applications in less time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

Made with JointJS

All features required to build this demo application are included in our open-source library, JointJS. Download the package and create basic visual applications in no time.

Compatible with:

ReactAngularVueSvelteHTML5Salesforce Lightning

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