CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
NorthBridge
NorthBridge

Reputation: 674

Google chart table - show multiple pages side by side

I'm making a table chart using the Google Charts tools, which displays data from a similar query:

SELECT COUNT(id) AS total_count, name FROM users_statistics GROUP BY name;

The chart then displays three columns - entry number, count number and username. The problem is, it has way too much data (around 8000 entries) and the table itself is very thin. What I want is to utilize the available white space by splitting the table in two parts, which stay side by side - something like this:

Table chart on two pages

Is there an easy way to do this without too much trouble with Google Charts or any other chart library?

Upvotes: 0

Views: 798

Answers (1)

asgallant
asgallant

Reputation: 26340

You can use DataViews to split your data into multiple sections, and then draw multiple tables. Syncing sorting and paging between tables could get a bit tricky, but it should be doable. Here's a basic example:

// split a 2000 row DataTable "data" into two 1000 row DataViews
var view1 = new google.visualization.DataView(data);
view1.setRows(0, 999);
var view2 = new google.visualization.DataView(data);
view2.setRows(1000, 1999);

var table1 = new google.visualization.Table(document.querySelector('#table_1'));
table1.draw(view1, {/* options */});
var table2 = new google.visualization.Table(document.querySelector('#table_2'));
table2.draw(view2, {/* options */});

Upvotes: 1

Related Questions