Click here to Skip to main content
Click here to Skip to main content

Topography Table

, 20 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
A simple way to add colorization to large grids of raw data

Before

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
0 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
2 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
3 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
4 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
5 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
6 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
7 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
8 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
9 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
10 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
11 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
12 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
13 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
14 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

After

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
0 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
2 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
3 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
4 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
5 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
6 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
7 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
8 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
9 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
10 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
11 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
12 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
13 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
14 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Introduction

Often there is a need to display raw data to end-users in web-based reports. Unfortunately, there is no easy way to quickly identify the values or difference in values in large grids. This code shows an easy method to differentiate between relative values of a large set of data and subsequently display the data to the user. The code is based on an ancient webmaster tool I saw once that displayed hits/hour/month using a similar scheme. I believe this is called a heat map, thanks Verious.

Code

private static readonly string[] GRAYS = new string[]{"#080808","#101010","#181818",
"#202020","#282828","#303030","#383838","#404040","#484848","#505050","#585858","#606060",
"#686868","#707070","#787878","#808080","#888888","#909090","#989898","#A0A0A0",
"#A8A8A8","#B0B0B0","#B8B8B8","#C0C0C0","#C8C8C8","#D0D0D0","#D8D8D8","#E0E0E0",
"#E8E8E8","#F0F0F0","#F8F8F8","#FFFFFF"};

private static string GetGrayColorValue(int value, int max) {
    float normal = (GRAYS.Length - 1f) / max;
    int index = (int)(value * normal);
    if(index < 8) {
        return String.Format("style=\"background-color:{0};color:#ffffff;\"",
        GRAYS[index]);
    }
    else {
        return String.Format("style=\"background-color:{0};\"", GRAYS[index]);
    }
}

private void DoTest() {
    StringBuilder sb = new StringBuilder();
    Random random = new Random();
    int max = 234;
    int tempValue = 0;
    sb.Append("<table><thead><tr><th>Hour</th>");
    for(int i = 1; i <= 31; i++) {
        sb.AppendFormat("<th>{0}</th>", i);
    }
    sb.Append("</tr></thead><tbody>");
    for(int i = 0; i < 24; i++) {
        sb.AppendFormat("<tr><td>{0}</td>", i);
        for(int j = 1; j <= 31; j++) {
            tempValue = random.Next(max);
            sb.AppendFormat("<td {0}>{1}</td>", GetGrayColorValue(tempValue, max),
                tempValue);
        }
        sb.Append("</tr>");
    }
    sb.Append("</tbody></table>");
    mTest.InnerHtml = sb.ToString();
}

The DoTest method is just a sample implementation that will generate the table shown at the top of this article. The only thing I did not show was the definition of mTest which was a div tag in an ASP.NET page. Also, a special note about the table generation code: thead is used to help make the data accessible. The ASP.NET table HTML control throws this information away making it harder for non-visual readers.

Links

Here is the link to the Web Colors

Updates

  • 2008/10/18 Changed the data in the grid to make the look nicer as well as provided a before table to illustrate the difference better

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ennis Ray Lynch, Jr.
Architect ERL GLOBAL, INC
United States United States
My company is ERL GLOBAL, INC. I develop Custom Programming solutions for business of all sizes. I also do Android Programming as I find it a refreshing break from the MS.

Comments and Discussions

 
GeneralI think you meant "present" PinmemberSteve Echols17-Oct-08 17:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.141015.1 | Last Updated 20 Oct 2008
Article Copyright 2008 by Ennis Ray Lynch, Jr.
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid