jQuery Animated Graph using jCarousel - Part 1

This is a brief tutorial on how to use of jCarousel to make an animated horizontal graph.

Let's begin by stating what we are trying to accomplish with this plugin:

1. Read a JSON data source
2. Build an image slider using jCarousel
3. Generate dynamic graphical data base on the JSON data
4. Animate the data

Step 1:
First off, we have to decide what kind of data we want to get back from the server or read from file. For simplicity, I'm going to use a read in a static JSON script file, but you just as easily point the plugin at any server side language.

I'm going to start by defining the y-axis. Let's say that the y-axis will be an array of strings such as "1996 Toyota Paseo, 1987 Mazda RX-7 TII, 2002 Subaru 2.5RS, 2007 Toyota Yaris S, 2005 Subaru Legacy 2.5GT Lim" (all of which happen to be cars that I have owned). Conveniently we'll call this property "axis"

Next, we are going to need images for jCarousel to display, which will also represent our different metrics. The only thing that we need at this point is to know what path these images are coming from, so lets add another property to out json called "path" and give it a value of "images/metrics"

Now we need to add the actual metrics to the collection. We'll call this one "metrics". Metrics is a collection of collections, if that makes sense. We want to have more information stored here than just the typical key value pair. Here is the different information that we'll be keeping track of for each metric we want to graph: title, name, img, subscript, scaleMessage, and results.

This should sum up what we are looking for in our JSON results and after we put it all together, it should come out looking something like this:

{
    "axis": [
        "1996 Toyota Paseo",
        "1987 Mazda RX-7 TII",
        "2001 Subaru 2.5RS",
        "2007 Toyota Yaris S",
        "2001 Toyota Siena LE",
        "2005 Subaru Legacy 2.5GT Lim"
    ],
    "path": "images/metrics/",
    "metrics" : [
        {
            "title" : "0-60 MPH",
            "name" : "0-60",
            "img" : "0-60.jpg",
            "subscript": "Time to reach 60 miles per hour on a straight strech of road",
            "scaleMsg": "Seconds (Fewer is Better)",
            "results": [9.4, 3398, 1905, 8.8, 9.3, 9999]
        },
        {
            "title" : "Quarter Mile",
            "name" : "1/4 Mile",
            "img" : "quarter-mile.jpg",
            "subscript": "Time to complete a quarter mile race",
            "scaleMsg": "Seconds (Fewer is Better)",
            "results": [16.8, 407, 266, 16.8, 16.8, 9999]
        },
        {
            "title" : "Average Gas MPG (City)",
            "name" : "City MPG",
            "img" : "mpg-city.jpg",
            "subscript": "Average MPG you can expect while driving in the city",
            "scaleMsg": "Miles (More is Better)",
            "results": [24, 15, 18, 29, 17, 17]
        },
        {
            "title" : "Average Gas MPG (Highway)",
            "name" : "Highway MPG",
            "img" : "mpg-highway.jpg",
            "subscript": "Average MPG you can expect while driving on the highway",
            "scaleMsg": "Miles (More is Better)",
            "results": [31, 21, 26, 36, 23, 23]
        },
        {
            "title" : "Horsepower",
            "name" : "HP",
            "img" : "horsepower.jpg",
            "subscript": "Engine Horsepower",
            "scaleMsg": "Horsepower (More is Better)",
            "results": [93, 202, 155, 106, 210, 250]
        }
    ]
}

Later we'll go over what each value in the metrics represents, but for now, this is a good place to stop. Next time, we'll look at what it's going to take to get jCarousel hooked into our plugin.