jQuery Animated Graph using jCarousel - Part 2

Last time we took a brief overview what was going to be needed to get the slider up and off the ground. This week, I want to go over the JSON response in more detail and also get some of the styling on the page.
 Let's start by dissecting the JSON response one step at a time. We went over the axis and path data last time, so I want to focus on the metrics data this time.

What are metrics? Metrics are simply a collection of quantitative data, or data that we can put a number to. Something like color is not a quantitative value and thus wouldn't make a very good metric for our graph. In our example, I chose some of the metrics that you're more likely to run into when dealing with cars, MPG, horsepower, and the likes.

The actual metrics object is a collection of value-pair arrays. Let's take a look at the first metric in the set to get a better idea of what is going on.

So we have

{ 
	"title" : "0-60 MPH", 
	"name" : "0-60", 
	"img" : "0-60.jpg",
	"def": "Time to reach 60 miles per hour on a straight strech of road", 
	"scaleMsg": "Seconds (Fewer is Better)", 
	"results": [9.4, 6.5, 7.7, 8.8, 9.3, 5.23] 
},

• "title" - text that we want to display when the graph is active
• "name" - text that will be displayed below the image thumbnail, and is totally optional
• "img" - actual file name of the thumb nail we're going to display
• "def" - definition of the metric
• "scaleMsg" - text defining what interval type the scale is, and which direction is better.
• "results" - an array of values that will represent each item from the axis array in order. (9.4 -> "1996 Toyota Paseo", 6.5 -> "1987 Mazda RX-7 TII", etc.)

Understanding the what the data represents is nice and all but what do we do with it now? The answer is design. Now that we now the data, we have to decide on how we want to display that data. Here is what I came up with just using some rectangles and MS Paint.

It's not pretty, but at least it gives me nice place to start out at. When I use a plugin, I tend to like the plugins that I can just point at a DIV and have it generate all the HTML it needs for me, no brains required. Given that we want to have the code generate the HTML, lets start with a containing DIV.

<div id="graph" ></div>

Great, now we're done with what we will actually put on our page. However, the guts of the graph that the our plugin will generate will look like this.

<div class="header">
  <div class="graph_caption">
    <h2></h2>
    <h3></h3>
  </div>
  <div class="scaleMsg"></div>
</div>

<div class="graph_content clearfix">
  <div class="titles">
    <div class="title"></div>
    <div class="title"></div>
    <div class="title"></div>
    ...
  </div>
  <div class="graphs">
    <div class="row">
      <div id="[graphname]_graph_[num]"></div>
      <div id="[graphname]_graph_[num]_value"></div>
    </div>
    <div class="row">
      <div id="[graphname]_graph_[num]"></div>
      <div id="[graphname]_graph_[num]_value"></div>
    </div>
    ....
  </div>
  <ul id="[graphname]_carousel">
    <li><img src="" alt="" /><p></p></li>
    <li><img src="" alt="" /><p></p></li>
    ...
  </ul>
</div>

This should be all the HTML that we need to get out plugin looking like out mockup. Don't worry if you don't get exactly what everything is for right at this moment, we'll go over everything in more detail when we actually start building the plugin next time.