This layout is used by the following built-in charts/reports and examples
Layout Script
var div = $("#chart"); if(chartData.columns.length == 0) { $(div).append("<h4>"+chartData.empty.label.text+"</h4>"); } else { if(chartData.custom.title) $(div).append("<h4>"+chartData.custom.title+"</h4>"); var table = d3.select("#chart").append('table') var thead = table.append('thead') var tbody = table.append('tbody'); $("#chart > table").addClass("table") thead.append('tr').selectAll('th').data(chartData.columns[1]).enter().append('th').text(function (column) { return column; }); if ( chartData.ytype ) { $('thead > tr > th:first').text(chartData.ytype + " \\ " + chartData.xtype) } else { $('thead > tr > th:first').text(chartData.xtype) } var tr = tbody.selectAll('tr').data(chartData.groups[0]).enter().append("tr"); var td = tr.selectAll("td").data(function(d) { var result = new Array(); $.each(chartData.columns,function(index,value){ if(value[0] == d){ result.push.apply(result,value); } }); return result; }).enter().append("td").text(function(d,i) { return d; }); }
If you still have questions, feel free to refer to our support team.