graphics

Latency heatmaps in D3 and Highcharts

August 20, 2013 - By 

See Brendan Gregg’s blog on how important and cool heatmaps can be for showing latency information and how average latency hides what is really going on:

Now if we want to create heatmap graphics, how can we do it? Two popular web methods for displaying graphics are Highcharts and D3. Two colleges of mine whipped up some quick examples in both Highcharts and D3 to show latency heatmaps and those two examples are shown below. The data in the charts is random just for the purposes of showing examples of these graphics in actions.

Highcharts Heatmap

see code at http://jsfiddle.net/vladiweb/GNd3G/

 

D3 Heatmap

see code at
http://jsfiddle.net/eyalkaspi/YH8sw

One comment on “Latency heatmaps in D3 and Highcharts”

  1. This is pretty cool

    http://blogs.sas.com/content/jmp/2014/01/02/sharing-jmp-11-results-with-interactive-html/

    What I like is the histogram at the end of the line
    and then it’s neet to be able to select part of the scatter and see how that selection stacks up in the histogram.

    I always find heat maps a bit difficult to read.

    It also could be a partial solution to combining hits in a bucket with time spent in that bucket. The heat map could represent one and the histogram could represent the other.

    The links to the interactive examples are at the bottom of the article

Comments are closed.