Protovis Scale Interaction Line Chart example

I am following the scale interaction example @ http://mbostock.github.com/protovis/docs/invert.html where I am trying to draw 2 line series chart.

My JSON file is as follows:

var psSeriesData =
    [{"Dates":["1-10","2-10","3-10","4-10","5-10","6-10","7-10","8-10"],"ScoresForA":    
    [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],"ScoresForB":
    [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]}]

I intend to plot the x-axis using the Dates and the 2 line chart using ScoresForA and ScoresForB respectively but am confused how to do so after much tweaking.

My code is as follows:

                var data = pv.range(2).map(function(i) {
                    return pv.range(0, 10, .1).map(function(x) { 
                        return {x: psSeriesData.Dates, y: psSeriesData.ScoresForA,ScoresForB  };
                    });
                });

                /* Chart dimensions and scales. */
                var w = 400,
                h = 200,
                x = pv.Scale.linear(0, 9.9).range(0, w),
                y = pv.Scale.linear(0, 10).range(0, h),
                i = -1;

                /* The root panel. */
                var vis = new pv.Panel()
                .width(w)
                .height(h)
                .bottom(20)
                .left(20)
                .right(10)
                .top(5);

                /* Y-ticks. */
                vis.add(pv.Rule)
                .data(pv.range(100))
                .visible(function() !(this.index % 2))
                .bottom(function(d) Math.round(y(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("left").add(pv.Label)
                .text(function(d) (d * 10).toFixed(0) );

                /* X-ticks. */
                vis.add(pv.Rule)
                .data(x.ticks())
                .visible(function(d) d > 0)
                .left(function(d) Math.round(x(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("bottom").add(pv.Label)
                .text(function(d) d.toFixed());

                /* A panel for each data series. */
                var panel = vis.add(pv.Panel)
                .data(data);

                /* The line. */
                var line = panel.add(pv.Line)
                .data(function(d) d)
                .left(function(d) x(d.x))
                .bottom(function(d) y(d.y))
                .lineWidth(3);

                /* The mouseover dots and label. */
                line.add(pv.Dot)
                .visible(function() i >= 0)
                .data(function(d) [d[i]])
                .fillStyle(function() line.strokeStyle())
                .strokeStyle("#000")
                .size(20)
                .lineWidth(1)
                .add(pv.Dot)
                .left(10)
                .bottom(function() this.parent.index * 12 + 10)
                .anchor("right").add(pv.Label)
                .text(function(d) (d.y * 10).toFixed(5));

                /* An invisible bar to capture events (without flickering). */
                vis.add(pv.Bar)
                .fillStyle("rgba(0,0,0,.001)")
                .event("mouseout", function() {
                    i = -1;
                    return vis;
                })
                .event("mousemove", function() {
                    var mx = x.invert(vis.mouse().x);
                    i = pv.search(data[0].map(function(d) d.x), mx);
                    i = i < 0 ? (-i - 2) : i;
                    return vis;
                });



                vis.render();

What am I doing wrong?

After inputs were given by nrabinowitz:

     var psSeriesData = {
  "Dates": ["1/10","2/10","3/10","4/10","5/10","6/10","7/10","8/10"],
  "ScoresForA": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],
  "ScoresForB": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};

                // start by iterating over the two keys for your time series data
                var data = ["ScoresForA","ScoresForB"].map(function(seriesKey) {
                    // use pv.range to walk through the indexes of the
                    // date array (basically the same as a for loop)
                    return pv.range(0, psSeriesData.Dates.length)
                    // map these indexes to an array of objects
                    .map(function(dateIndex) {
                        // now return an object with the date index
                        // and series value for that index
                        return {
                            x: dateIndex,
                            y: psSeriesData[seriesKey][dateIndex]
                        }
                    });
                });


                /* Chart dimensions and scales. */
                var w = 400,
                h = 200,
                x = pv.Scale.linear(0, 9.9).range(0, w),
                y = pv.Scale.linear(0, 10).range(0, h),
                i = -1;

                /* The root panel. */
                var vis = new pv.Panel()
                .width(w)
                .height(h)
                .bottom(20)
                .left(20)
                .right(10)
                .top(5);

                /* Y-ticks. */
                vis.add(pv.Rule)
                .data(pv.range(100))
                .visible(function() !(this.index % 2))
                .bottom(function(d) Math.round(y(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("left").add(pv.Label)
                .text(function(d) (d * 10).toFixed(0) );

                /* X-ticks. */
                vis.add(pv.Rule)
                //.data(function(d) [d[i].Dates])
                .data(pv.range(0, psSeriesData.Dates.length).map(function(a) (psSeriesData[a].Dates)))
          开发者_StackOverflow社区      .visible(function(d) d > 0)
                .left(function(d) Math.round(x(d)) - .5)
                .strokeStyle(function(d) d ? "#eee" : "#000")
                .anchor("bottom").add(pv.Label)
                .text(function(d) (d).toFixed());

                /* A panel for each data series. */
                var panel = vis.add(pv.Panel)
                .data(data);

                /* The line. */
                var line = panel.add(pv.Line)
                .data(function(d) d)
                .left(function(d) x(d.x))
                .bottom(function(d) y(d.y))
                .lineWidth(3);

                /* The mouseover dots and label. */
                line.add(pv.Dot)
                .visible(function() i >= 0)
                .data(function(d) [d[i]])
                .fillStyle(function() line.strokeStyle())
                .strokeStyle("#000")
                .size(20)
                .lineWidth(1)
                .add(pv.Dot)
                .left(10)
                .bottom(function() this.parent.index * 12 + 10)
                .anchor("right").add(pv.Label)
                .text(function(d) (d.y ).toFixed(5));

                /* An invisible bar to capture events (without flickering). */
                vis.add(pv.Bar)
                .fillStyle("rgba(0,0,0,.001)")
                .event("mouseout", function() {
                    i = -1;
                    return vis;
                })
                .event("mousemove", function() {
                    var mx = x.invert(vis.mouse().x);
                    i = pv.search(data[0].map(function(d) d.x), mx);
                    i = i < 0 ? (-i - 2) : i;
                    return vis;
                });



                vis.render();

Dates are still not displaying out as the x-axis, even though I used the map function and array referencing. There seems to be a problem reading the 'Dates' property. Any advices

Error: TypeError: Cannot read property 'Dates' of undefined

The first thing to do when working on a visualization like this (and especially when following the Protovis examples) is to make sure your data is in the format you need. I haven't gone through all of your code here, but you've got some clear issues with the data right up front:

• Why is your initial data in an array? Is there any reason to include the enclosing straight braces (i.e. the outer brackets in psSeriesData = [{ ... }])? There's no reason for this that I can see in the code as you've presented it, and it's only going to confuse things (e.g. psSeriesData.Dates is undefined - you'd need to reference psSeriesData[0].Dates).

• I'm not at all clear on what you're doing in your initial data-setup code, but I'm pretty certain it's not giving you what you want - it looks like a blind cut-and-paste from the example, even though it doesn't apply. The example is using pv.range to generate fake data - you don't need this, you have real data, and you can walk through this instead.

The best way to start here is to understand what the data is supposed to look like. In the example, the data is produced like this:

data = pv.range(3).map(function(i) {
    return pv.range(0, 10, .1).map(function(x) {
        return {x: x, y: i + Math.sin(x) + Math.random() * .5 + 2};
    });  
});

Run this in a console, and you'll see that the data produced looks like this:

[
    [
        {
            x: 0.1,
            y: 2.34
        },
        // ...
    ],
    // ...
]

The outer array holds the diffent time series; each time series is an array of objects like {x:0.1, y:2.34}. If your data doesn't look like this, it won't work with the example code.

Your initial data should work fine for this, but you'll need to get it into the right format. One issue here is the list of dates - these are strings, not numbers, and you won't be able to use them as data unless you either convert them to Date objects (this is a real pain, avoid it if possible) or map them to numbers - the latter is easy here because they're in a regular series. (If you had unevenly spaced dates, this all would be more complex, but let's forget that for now.) You can just use the index of the dates as the x values, and then use your two series as the y values.

Putting this all together, you can format your data like this:

// note - no enclosing array
var psSeriesData = {
  "Dates": ["1-10","2-10","3-10","4-10","5-10","6-10","7-10", "8-10"], 
  "ScoresForA": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92],
  "ScoresForB": [78.78,79.79,78.78,78.78,78.78,79.79,79.79,76.92]
};

// start by iterating over the two keys for your time series data
var data = ["ScoresForA","ScoresForB"].map(function(seriesKey) {
        // use pv.range to walk through the indexes of the
        // date array (basically the same as a for loop)
        return pv.range(0, psSeriesData.Dates.length)
            // map these indexes to an array of objects
            .map(function(dateIndex) {
                // now return an object with the date index 
                // and series value for that index
                return {
                    x: dateIndex,
                    y: psSeriesData[seriesKey][dateIndex]
                }
            });
});

There are a lot of other ways to do this as well, but the main point is that you come out with an array like this: [[{x:0, y:79.79}, ...], ...]. I haven't looked at the rest of your code, but now that your data is in the correct format, you should be able to replace the fake data in the example with the real data in your code, and have the whole thing work as expected (though you'll need to change any assumptions in the example about the expected max and min values for x and y).