Why Horizon Charts?
When SeaLion 1.0 was out, all it could do was to collect the raw output of commands executed by the agent and display those in a web interface using a beautiful timeline display. It was more of an activity recorder back then than a complete monitoring solution. Plotting this recorded activity outputs using a time series data visualisation was the next step in the journey towards becoming a full-fledged monitoring tool. We had this target of squeezing maximum information in the desktop screen so that a user can have a view of hundreds of servers and pinpoint the problematic servers at one look. From that point onwards the search for a visualisation tool which could serve to the set of our requirements had started.
We evaluated a handful of libraries and frameworks, but we hit certain limitations of those. For instance, Line charts gave a good view of spikes but displaying more than three graphs(one each for a metric) for a server, cluttered the graphs so much that it almost made no sense visually. Heat maps, on the other hand, had beautiful rendering, but there was no way to depict comparison among two servers, the color density being an absolute value. Also, we had a limitation on the height a graph can attain, maximum value on the y-axis to be precise. Since higher values meant more vertical space and the maximum values were unpredictable, it was harder for us to modify the graphs to fit our needs. Hence, it was clear that line charts, column charts or heat maps were not the way to go.
A lot of research and prototypes later, we stumbled upon horizon charts, suggested by Sabyasachi Ruj, one of the senior engineers of our organisation. Horizon chart was developed keeping the space utilization in mind. It uses colors to depict the higher values and the direction of offsets to show negatives. Horizon charts not only reduced the screen space required but also provided a better visualization regarding spotting a huge change in the trend. Let’s dig a little deep into how horizon charts work.
The plotting mechanism for horizon graph is similar to regular column charts except that the height does not serve as the quantity measurement parameter. A regular column chart displays information such that the peaks pertain to higher values. For example, the following graph shows a trend where it is easy to spot a spike.
But you can also conclude that the height of chart would keep increasing with the magnitude of the values. Here is how horizon graphs solve it. It divides the graph horizontally into two parts and paints them in different colors keeping darker color at the higher position as you can see in the following picture.
Then it stacks dark colored partition over the lighter one.
Here is how the color density does the math. If there is only one color and a set of values from 1 to 100, the height of peak decides the higher number. When there are two colors, the lighter color shows values from 1 to 50, and the darker one shows 51 to 100. Hence, darker the color, higher the value and the height will be reduced by a factor of the number of colors used. You can find a further detailed explanation here.
Since there is no need of the y-axis in these plots and the color densities are relative, we got an easy solution to our problem of comparison among different graphs. One can easily focus on the dark colors and get to the cause of unusual data trends.
Horizon charts, though difficult to process from the start helped us solve a great deal. Not only did we create beautiful data visualization but we also succeeded in rendering a lot of information on a limited screen space.
This blog post is written by Yogita Sharma of Team SeaLion.
















