Click here to Skip to main content
13,143,374 members (36,151 online)
Click here to Skip to main content
Add your own
alternative version

Stats

12.5K views
9 bookmarked
Posted 17 Oct 2008

Topography Table

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

Before

 1234567891011121314151617181920212223242526272829303132
0012345678910111213141516171819202122232425262728293031
11234567891011121314151617181920212223242526272829303132
223456789101112131415161718192021222324252627282930313233
3345678910111213141516171819202122232425262728293031323334
44567891011121314151617181920212223242526272829303132333435
556789101112131415161718192021222324252627282930313233343536
6678910111213141516171819202122232425262728293031323334353637
77891011121314151617181920212223242526272829303132333435363738
889101112131415161718192021222324252627282930313233343536373839
9910111213141516171819202122232425262728293031323334353637383940
101011121314151617181920212223242526272829303132333435363738394041
111112131415161718192021222324252627282930313233343536373839404142
121213141516171819202122232425262728293031323334353637383940414243
131314151617181920212223242526272829303132333435363738394041424344
141415161718192021222324252627282930313233343536373839404142434445

After

 1234567891011121314151617181920212223242526272829303132
0012345678910111213141516171819202122232425262728293031
11234567891011121314151617181920212223242526272829303132
223456789101112131415161718192021222324252627282930313233
3345678910111213141516171819202122232425262728293031323334
44567891011121314151617181920212223242526272829303132333435
556789101112131415161718192021222324252627282930313233343536
6678910111213141516171819202122232425262728293031323334353637
77891011121314151617181920212223242526272829303132333435363738
889101112131415161718192021222324252627282930313233343536373839
9910111213141516171819202122232425262728293031323334353637383940
101011121314151617181920212223242526272829303132333435363738394041
111112131415161718192021222324252627282930313233343536373839404142
121213141516171819202122232425262728293031323334353637383940414243
131314151617181920212223242526272829303132333435363738394041424344
141415161718192021222324252627282930313233343536373839404142434445

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.

You may also be interested in...

Comments and Discussions

 
GeneralI think you meant "present" Pin
Steve Echols17-Oct-08 17:06
memberSteve Echols17-Oct-08 17:06 

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

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

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