<script type="text/javascript" language="javascript">
/* Sizing and scales. */
var data = [[6,5.8965517241379],[6,6.625],[4,6.0384615384615],[2,3.7272727272727]],
    cuentos = ['La araña hambrienta y la tortuga','Conociendo a las arañas','Pájaro Cu','Los Aztecas'],
    w = 600,
    h = 250,
    n = 2,
    m = data.length,
    y = pv.Scale.linear(0, 10).range(0, h),
    x = pv.Scale.ordinal(pv.range(m)).splitBanded(0, w, 4/5);

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

vis.anchor("center").add(pv.Label)
    .top(-20)
    .font("20px sans-serif")
    .text("How are you in comprehension?");

/* The bars. */
var bar = vis.add(pv.Panel)
    .data(data)
    .left(function() x(this.index))
    .width(x.range().band)
  .add(pv.Bar)
    .data(function(d) d)
    .left(function() this.index * x.range().band/n)
    .width(x.range().band / n)
    .bottom(0)
    .height(y)
    .fillStyle(pv.Colors.category20().by(pv.index));

/* The value label. */
bar.anchor("top").add(pv.Label)
    .textStyle("white")
    .text(function(d) d.toFixed(1));

/* The variable label. */
bar.parent.anchor("bottom").add(pv.Label)
    .textAlign("left")
    //.textMargin(5)
    .textBaseline("top")
    .textAngle(3*Math.PI/2)
    .text(function() cuentos[this.parent.index]);

/* X-axis ticks. */
vis.add(pv.Rule)
    .data(y.ticks(10))
    .bottom(y)
    .strokeStyle(function(d) d ? "rgba(127,127,127,0.3)" : "#000")
  .add(pv.Rule)
    .left(0)
    .width(5)
    .strokeStyle("#000")
  .anchor("left").add(pv.Label)
    .text(y.tickFormat);

vis.add(pv.Dot)
    .data(["Tu","Tus compañeros"])
    .right(-10)
    .size(8)
    .strokeStyle(null)
    .top(function () 100 + this.index * 20)
    .fillStyle(pv.Colors.category20().by(pv.index))
  .anchor("right").add(pv.Label);

var data_voc = [[13,11.793103448276],[11,11.25],[11,9.6153846153846],[3,7.8888888888889]],
    cuentos = ['La araña hambrienta y la tortuga','Conociendo a las arañas','Pájaro Cu','Los Aztecas'],
    w = 600,
    h = 250,
    n = 2,
    m = data_voc.length,
    y = pv.Scale.linear(0, 15).range(0, h),
    x = pv.Scale.ordinal(pv.range(m)).splitBanded(0, w, 4/5);

/* The root panel. */
var vis_2 = new pv.Panel()
    .width(w)
    .height(h)
    .bottom(100)
    .left(20)
    .right(100)
    .top(60);

vis_2.anchor("center").add(pv.Label)
    .top(-20)
    .font("20px sans-serif")
    .text("How are you in your vocabulary?");

/* The bars. */
var bar_2 = vis_2.add(pv.Panel)
    .data(data_voc)
    .left(function() x(this.index))
    .width(x.range().band)
  .add(pv.Bar)
    .data(function(d) d)
    .left(function() this.index * x.range().band/n)
    .width(x.range().band / n)
    .bottom(0)
    .height(y)
    .fillStyle(pv.Colors.category20().by(pv.index));

/* The value label. */
bar_2.anchor("top").add(pv.Label)
    .textStyle("white")
    .text(function(d) d.toFixed(1));

/* The variable label. */
bar_2.parent.anchor("bottom").add(pv.Label)
    .textAlign("left")
    //.textMargin(5)
    .textBaseline("top")
    .textAngle(3*Math.PI/2)
    .text(function() cuentos[this.parent.index]);

/* X-axis ticks. */
vis_2.add(pv.Rule)
    .data(y.ticks(15))
    .bottom(y)
    .strokeStyle(function(d) d ? "rgba(127,127,127,0.3)" : "#000")
  .add(pv.Rule)
    .left(0)
    .width(5)
    .strokeStyle("#000")
  .anchor("left").add(pv.Label)
    .text(y.tickFormat);

vis_2.add(pv.Dot)
    .data(["Tu","Tus compañeros"])
    .right(-10)
    .size(8)
    .strokeStyle(null)
    .top(function () 100 + this.index * 20)
    .fillStyle(pv.Colors.category20().by(pv.index))
  .anchor("right").add(pv.Label);

vis.canvas("comprehension_vis");
vis.render();
vis_2.canvas("vocabulary_vis");
vis_2.render();


</script>
<div id="vocabulary_vis"></div><div id="comprehension_vis"></div>
            </div>