How to show a table with the line chart

Go Mezant

unread,

Aug 13, 2013, 6:32:47 PM8/13/13

to google-visua...@googlegroups.com

I have generated a LineChart, now I'd like to add a table to display the data being charted. tried adding second visualization and doesn't work and also tried separating methods for table and line chart and still doesn't work.

Haven't seen any example. By the way, I tried the Dashboard and it will not work either.

Perhaps I'm missing something.

asgallant

unread,

Aug 13, 2013, 6:55:46 PM8/13/13

to google-visua...@googlegroups.com

Adding a table along side a chart is fairly simple to do. If you post your code, I can help you figure out where the error is.

AC Gomez

unread,

Aug 13, 2013, 9:17:58 PM8/13/13

to google-visua...@googlegroups.com

sure, here it is. I's like to show the table below the chart:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

google.load('visualization', '1', {packages: ['corechart']});

</script>

function drawVisualization() {

var data = google.visualization.arrayToDataTable([['Timestamp', 'TotalAggregate', 'col1', 'col2', 'col3', 'col4', 'col5', 'col6', 'col7', 'col8',

'col9', 'col10', 'col11', 'col12', 'col13'],['8/1/2013', 822.04, 94.73, 124.1, 0, 11.45, 0, 0, 3.55, 0, 0, 588, 0, 0.18, 0, ],['8/2/2013', 1503.6, 353.92,

416.5, 0, 34.27, 0, 0, 10.6, 1.5, 0.18, 686, 0, 0.6, 0, ],['8/3/2013', 1780.81, 647.26, 708.9, 0, 59.14, 0, 0, 18.25, 3, 0.36, 343, 0, 0.87, 0, ],['8/4/2013',

2080.73, 845.53, 828.75, 0, 82.48, 0, 0, 25.4, 3, 0.36, 294, 0, 1.2, 0, ],['8/5/2013', 2422.43, 1033.08, 952, 0, 105.76, 0, 0, 32.7, 3, 0.36, 294, 0, 1.53, 0,

],['8/6/2013', 2758.33, 1214.24, 1076.1, 0, 128.88, 0, 0, 39.85, 3, 0.39, 294, 0, 1.86, 0, ],['8/7/2013', 3084.26, 1387.96, 1198.5, 0, 151.36, 0, 0, 46.8, 3,

0.42, 294, 0, 2.22, 0, ],['8/8/2013', 3449.57, 1594.02, 1328.55, 0, 172.88, 0, 0, 54.15, 3, 0.42, 294, 0, 2.55, 0, ],['8/9/2013', 3821.81, 1809.29, 1450.95, 0,

196, 0, 0, 65.09, 3.18, 0.42, 294, 0, 2.88, 0, ],['8/10/2013', 4176.92, 2020.57, 1570.8, 0, 212.03, 0, 0, 72.68, 3.18, 0.42, 294, 0, 3.24, 0, ],['8/11/2013',

4546.55, 2239.07, 1695.75, 0, 230.15, 0, 0, 80.43, 3.18, 0.42, 294, 0, 3.57, 0, ],['8/12/2013', 4905.16, 2451.52, 1815.6, 0, 248.44, 0, 0, 88.08, 3.18, 0.42,

294, 0, 3.9, 0, ],['8/13/2013', 3479.94, 1757.44, 1280.95, 0, 177.27, 0, 0, 63.12, 2.12, 0.28, 196, 0, 2.78, 0]]);

var ac = new google.visualization.LineChart(document.getElementById('visualization'));

ac.draw(data, {

title : 'Trend for this Month: 8/2013',

isStacked: true,

width: 1200,

height: 1000,

vAxis: {title: "Value"},

hAxis: {title: "Date"}

});

}

google.setOnLoadCallback(drawVisualization);

</script>

</head>

</body>

</html>

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/7LepTa3cACY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

AC Gomez

unread,

Aug 13, 2013, 10:31:05 PM8/13/13

to google-visua...@googlegroups.com

never mind, figured it out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>

Google Visualization API Sample

</title>

google.load('visualization', '1', {packages: ['corechart']});

google.load('visualization', '1', {packages:['table']});