I´m writing a library that uses bootstrap and DC.js. The bootrap grid is generated automatically by the library. I´m trying to make a grid that has a title row and then a row with two columns: the first column has two rows, each slot for one chart. The second column has only one row, for a third chart. This is the automatically generated javascript code:
container = d3.select(\"body\")
.append(\"div\")
.attr(\"class\", \"container\")
.attr(\"style\", \"font: 12px sans-serif;\");
// Add a row for the dashboard title
var title = container.append(\"div\").attr(\"class\", \"row\");
title
.attr(\"class\", \"col-sm-12\")
.attr(\"id\", \"title\")
.attr(\"align\", \"center\");
title.append(\"h4\").text(\"Complex scene\");
var g1_0 = container.append(\"div\").attr(\"class\", \"row\");
var g1_0_0 = g1_0.append(\"div\").attr(\"class\", \"col-sm-6\");
var g1_0_1 = g1_0.append(\"div\").attr(\"class\", \"col-sm-6\");
g1_0_1.attr(\"id\", \"DateVolumeChart\");
var g2_0 = g1_0_0.append(\"div\").attr(\"class\", \"row\");
var g2_0_0 = g2_0.append(\"div\").attr(\"class\", \"col-sm-6\");
g2_0_0.attr(\"id\", \"DateOpenChart\");
var g2_1 = g1_0_0.append(\"div\").attr(\"class\", \"row\");
var g2_1_0 = g2_1.append(\"div\").attr(\"class\", \"col-sm-6\");
g2_1_0.attr(\"id\", \"DateCloseChart\");
Although the three charts show on the screen, I had expected that the two charts on the left would be aligned with the chart on the right and the whole set of charts being of height 400: the height of the charts on the left is 200 and the height of the chart on the right is 400.
[I wanted to post the image, but don´t have enough reputation]
Instead of the image being of height 400, the first chart on the left is alligned with the chart on the right. But the second chart on the left starts after the end of the chart on the right (400) and not after the chart on the left (200), so the total height is 600.
I found the problem... the bootstrap code is actually working fine, the problem