Graphs

Graphs are the visualization method to display dependency between the values of two parameters. The most popular usage of graphs is the visualization of parameter change in time.

Types of graphs

There are numerous types of graphs presentations. Here are some of them:

Single value graph

This type of graph is the most popular one. The horizontal axis is used for the input parameter (like time), while the vertical axis is used to display the value of output, i.e. dependent parameter.

Multiple values graph

It is possible to combine several graphs in a single area if they share the same horizontal axis. These graphs typically also have common vertical axis and units, but in some cases, the vertical axis can be defined for every parameter independently — as on the picture above.

Sparkline

Air pressure sparkline

This type of graphs is not used to show exact values dynamics, it’s primary purpose is to display change tendency of the value. Typically they are positioned close to the current value of the parameter to explain, how this value is compared to previous states.

Envelopes

Envelope to adjust the mapping between original and resulting brightness levels of image

Envelopes graphs are basically not for reading data but to set up the dependency between two parameters, like mapping between input and output, or setting up the value dynamics in time.

Typical envelope of synthesizer application

This is a common use case for graphic editors and audio synthesizers.

Interactivity

Graphs as UI components can be both static and dynamic (like envelopes mentioned above). Static graphs are just embedded images, while interactive graphs provide some features for improved data readability or other specific purposes.

Best practices

Several graphs can be combined in a column and share the same horizontal axis to highlight the mutual dependency between them but minimize the clutter of overlapping graphs. It is standard implementation for music sequencers, trading applications and decoders of flight or voyage data records (“black boxes”).

Also, in some cases, it is useful to add color-coding of graph segments — it helps to identify areas of specific importance for the user and simplify the overall perception of parameter values and their change dynamics.

Typical problems

There are several tricking aspects with graphs, that are primarily related to the extent of data credibility.

Data presented on small scale graphs

If visible horizontal axis contains huge amounts of values (for instance, we show audio waveform 10 minutes long, that fits in the visible area), there is a problem, that every timeline pixel contains several parameter values — and it is not obvious, should this line display average value, minimum or maximum, or even be a whole line from lowest to highest values.

There is no general approach. Financial graphs use “candles” for every such period (and it is wider than one pixel to be working), that present initial, highest, lowest and ending values during this period.

For safety systems, it is better to display the most critical (lowest or highest) values.

Scientific statistical graphs in some cases display average value, but with background line that shows the range (or error rate) at this atomic level.

Connection of measurements on large scale graphs

A similar problem does exist for opposite scenarios when there are only several measurements of the value per timeline. Should they be connected with some interpolated values (by linear or another method)? Or maybe it is better not to connect them? Or wide bars (per measurement step) should be used?

There is also no best method for any case, so it is required to make an estimation of ease of usage of such data presentations and the possible conflict with preciseness or wrong interpretation of such visualizations.