Algorithm for self-scaling ruler in plotter GUI component

Question

I am designing (not programming) a data-series viewer program for medical data, using C#/WPF. There is one main panel which shows the data, with the common mouse pan/zoom functionality (pan with left drag, horizontal zoom with scroll, vertical auto-fit with double click, selection with right drag).

The problem is: I need vertical and horizontal grid with rulers on the top/left, similar to those seen in audio-editing (goldwave, audacity), cartography (gpsTrackmaker) and ilustration (photoshop, inkscape) programs. Besides, these rulers are even configurable in most plotting APIs (Matlab, GNUPlot, Matplotlib) and even office programs (Excel, Calc).

The main requisite, besides being always aligned and scaled to content, is to have an "anti-clutter" algorithm which only draws tick labels with the maximum granularity possible without the labels "hitting" or hiding one another.

Below is an image showing two zoom levels of the same drawing on Inkscape. The first row shows each hundred labels. The second row shows each decade labels.

The question is: "Since this (the auto-resolution of viewing rulers) seems to be a solved problem in many programs, how should I look for / what are the available resouces/tutorials so I can specify and implement such a control that suits my needs?"

I would appreciate any suggestion or example, preferrably in C#, but could be in any language.

Answer 1

• W = visible protion of the ruler
• X = range (right-left) represented by W
• w = label width

n = W/w (maximum number of labels you can display)

x = X*w/W (minimal range between two labels)

Then you have to round x to some larger, cooler value 1, 2 or 5 in any magnitude.

For example

• x=18.4 => x1=20
• x=539 => x1=1000

w1 = x1/X*W (label width, or space between ticks)

n1 = W/w1 (number of ticks)