Question

I have a large JSON file which is essentially a huge array filled with elements. Using jQuery, I want to load this JSON file into the HTML page, convert it into an HTML object or table that is accessible using HTML. After doing this, I would create several DIVs on this HTML page with rounded corners to emulate a bar graph. Could the heights of these DIVs change, dynamically, depending upon the current JSON data stored on the server? How can I do all of this? I only need to know how to load the JSON data, convert the JSON data, and how to get the DIVs to change depending upon this data. Below is an example of the JSON data and sample DIV code.

In other words, I would want the DIV’s height to be something like “height: data[1].key1;”

JSON sample:

  data: 
   [ { name: 'average',
       key1: x,
       key2: y,
       key3: z },

HTML div example:

<div style="    margin: 0px auto 10px;
            padding: 4px;
            opacity: 1; border: 1px solid rgb(0, 0, 0);
            box-shadow: 0px 0px 1px rgb(0, 0, 0) inset;
            color: rgb(255, 235, 124);
            float: left;
            width: 0px;
            height: data[1].key1;
            background: #222222;
            left: 55px; 
            position: absolute; 
            top: 259px;
            border-radius: 0px 0px 0px 0px;" class="pane">
</div>

Answer 1

With jQuery you can do something like:


$('.divSelector').css({ 'height': data[1].key1 + 'px' });