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.