This layout is used by the following built-in charts/reports and examples
Javascript Layout
var div = $("#chart"); var what; if (chartData.sums.length < 2) { $(div).append("<h4>" + chartData.empty + "</h4>"); } else { if (chartData.title) { $(div).append("<h4>" + chartData.title + " <small>" + chartData.sum + "</small></h4>"); } var table = d3.select("#chart").append('table') var thead = table.append('thead') var tbody = table.append('tbody'); $("#chart > table").addClass("table") $("#chart > table").addClass("table-hover") thead.append('tr').selectAll('th').data(chartData.labels).enter().append('th').text(function(column) { return column; }); var expanded = true; $('thead').on("click", function() { var childs = $("tbody").children(); if (expanded) { $.each(childs, function(index, element) { if (!$(element).hasClass("active")) { $(element).hide(); } }); } else { $.each(childs, function(index, element) { if (!$(element).hasClass("active")) { $(element).show(); } }); } expanded = !expanded; }); $('thead > tr').css("cursor", "pointer"); var tr = tbody.selectAll('tr').data(chartData.columns).enter().append("tr").classed("active", function(value, index) { return value.active; }).style("font-weight", function(value, index) { return value.fontweight; }); var td = tr.selectAll("td").data(function(tr_data,index) { return chartData.sums[index]; }).enter().append("td").text(function(d) { return d; }); $.each($(".active:not(:last-child)"), function(index, elem) { $(elem).css("cursor", "pointer"); $(elem).on("click", function(event) { var children = $(this).nextUntil(".active"); $.each($(children), function(index, child) { if ($(child).is(':visible')) { $(child).hide(); } else { $(child).show(); } }); }); }); } updateFrameHeight();
If you still have questions, feel free to refer to our support team.