Databases
StackOverflow2013
Postsdbo
POProtovis Scale Interaction Line Chart example
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProtovis Scale Interaction Line Chart example
    text
    copied!<p>I am following the scale interaction example @ <a href="http://mbostock.github.com/protovis/docs/invert.html" rel="nofollow">http://mbostock.github.com/protovis/docs/invert.html</a> where I am trying to draw 2 line series chart.</p> <p>My JSON file is as follows:</p> <pre><code>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]}] </code></pre> <p>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.</p> <p>My code is as follows:</p> <pre><code> 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 &gt; 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 &gt;= 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 &lt; 0 ? (-i - 2) : i; return vis; }); vis.render(); </code></pre> <p>What am I doing wrong?</p> <p>After inputs were given by nrabinowitz:</p> <pre><code> 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))) .visible(function(d) d &gt; 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 &gt;= 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 &lt; 0 ? (-i - 2) : i; return vis; }); vis.render(); </code></pre> <p>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</p> <p>Error: TypeError: Cannot read property 'Dates' of undefined</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload