Combining a chart with a table

Greg Slocum

unread,

Aug 21, 2018, 9:32:37 AM8/21/18

to Google Visualization API

I'd like to combine a chart with a table as in the figure below. I'm currently accomplishing this with an Excel kludge, but would think there is an easier way.

Any direction would be greatly appreciated.

Ray Thomas

unread,

Aug 21, 2018, 10:42:19 PM8/21/18

to Google Visualization API

A table in Google Charts is drawn in the same way as a graph and can use the same data.

Create divs to hold the graph and the table then simply draw them both in nearly the same way.

two divs - chart_div and table_div

1 data table - data

Draw the chart and table:

var chart = new google.visualization.LineChart(document.getElementById("chart_div"));

chart.draw(data);

var table = new google.visualization.Table(document.getElementById("table_div"));
table.draw(data);

Greg Slocum

unread,

Aug 23, 2018, 11:53:14 AM8/23/18

to Google Visualization API

OK, thanks for the direction this far.

I have code to generate the two files attached. Now I'd like the table to appear below the chart in the same page. Obviously, I can take the code to generate the chart then append the code to generate the table, but I'm guessing I need to include something to specify the division.

I can work out all of the formatting, but would appreciate just this little bit more direction. What tags do I need between the chart and the table?

214-210-LM.htm

214-254-R.htm

Greg Slocum

unread,

Aug 23, 2018, 2:47:41 PM8/23/18

to Google Visualization API

Got it. create chart, create table, load chart, load table,

</head>
<body>
<div id="line_top_x"></div>
<div id="table_div"></div>
</body>
</html>

214-208-RMW.htm

Reply all

Reply to author

Forward