Chris, Adding columns to the datatable should work in general, but why it doesn't depends on a lot of things. What other columns were added as well? The chart may not like the type of data you have added for that particular column. For the line and column charts, the first column can be string values, but others must be numbers or dates. You should probably be looking in your javascript console to see if there is an error.
The jsfiddle you last posted, https://jsfiddle.net/x6vkvhrc/, seems to work fine, and it includes the SPS column. On Wed, Mar 25, 2015 at 5:20 AM, chris Clements < [email protected]> wrote: > I can add to all other charts, I have but when I add' > data.addColumn('number', 'SPS'); under the var data = new > google.visualization.DataTable(); > it stops working... > > On Tuesday, 24 March 2015 09:44:20 UTC, chris Clements wrote: > >> I'm a complete newbie to Google Charts, >> >> I've been experimenting all day yesterday and this morning, >> >> I'm looking to achieve the chart as the code below but in a line chart >> instead of a bar chart, I got the code from the tooltip page, but I've >> struggled to convert it, or indeed add the chart tooltips to my own line >> graph, once I have this I would obviously like to add my own data and >> customisations, >> >> Thanks very much... >> >> >> <html> >> <head> >> <script src="https://www.google.com/jsapi"; type="text/javascript"></ >> script> >> <script type="text/javascript"> >> google.load('visualization', '1', {packages: ['corechart']}); >> google.setOnLoadCallback(drawTooltipCharts); >> >> // Set up data for visible chart. >> var primaryData = [ >> ['NBA Finals', 22.4], >> ['NFL Super Bowl', 111.3], >> ['MLB World Series', 19.2], >> ['UEFA Champions League Final', 1.9], >> ['NHL Stanley Cup Finals', 6.4], >> ['Wimbledon Men\'s Championship', 2.4] >> ]; >> >> // Set up data for your tooltips. >> var tooltipData = [ >> ['Year', 'NBA Finals', 'NFL Super Bowl', 'MLB World Series', >> 'UEFA Champions League Final', 'NHL Stanley Cup Finals', >> 'Wimbledon Men\'s Championship'], >> ['2005', 12.5, 98.7, 25.3, 0.6, 3.3, 2.8], >> ['2006', 13.0, 90.7, 17.1, 0.8, 2.8, 3.4], >> ['2007', 9.3, 93.0, 15.8, 0.9, 1.8, 3.8], >> ['2008', 14.9, 97.5, 17.1, 1.3, 4.4, 5.1], >> ['2009', 14.3, 98.7, 13.6, 2.1, 4.9, 5.7], >> ['2010', 18.2, 106.5, 19.4, 2.2, 5.2, 2.3], >> ['2011', 17.4, 111.0, 14.3, 4.2, 4.6, 2.7], >> ['2012', 16.8, 111.3, 16.6, 2.0, 2.9, 3.9], >> ['2013', 16.6, 108.7, 12.7, 1.4, 5.8, 2.5], >> ['2014', 15.7, 111.3, 15.0, 1.9, 4.7, 2.4] >> ]; >> >> var primaryOptions = { >> title: 'Highest U.S. Viewership for Most Recent Event (in >> millions)', >> legend: 'none', >> tooltip: {isHtml: true} // This MUST be set to true for your >> chart to show. >> }; >> >> var tooltipOptions = { >> title: 'U.S. Viewership Over The Last 10 Years (in millions)', >> legend: 'none' >> }; >> >> // Draws your charts to pull the PNGs for your tooltips. >> function drawTooltipCharts() { >> >> var data = new google.visualization.arrayToDataTable(tooltipData >> ); >> var view = new google.visualization.DataView(data); >> >> // For each row of primary data, draw a chart of its tooltip >> data. >> for (var i = 0; i < primaryData.length; i++) { >> >> // Set the view for each event's data >> view.setColumns([0, i + 1]); >> >> var hiddenDiv = document.getElementById('hidden_div'); >> var tooltipChart = new google.visualization.LineChart(hiddenDiv >> ); >> >> google.visualization.events.addListener(tooltipChart, 'ready', >> function() { >> >> // Get the PNG of the chart and set is as the src of an img >> tag. >> var tooltipImg = '<img src="' + tooltipChart.getImageURI() + >> '">'; >> >> // Add the new tooltip image to your data rows. >> primaryData[i][2] = tooltipImg; >> >> }); >> tooltipChart.draw(view, tooltipOptions); >> } >> drawPrimaryChart(); >> } >> >> function drawPrimaryChart() { >> >> var data = new google.visualization.DataTable(); >> data.addColumn('string', 'Event'); >> data.addColumn('number', 'Highest Recent Viewership'); >> >> // Add a new column for your tooltips. >> data.addColumn({ >> type: 'string', >> label: 'Tooltip Chart', >> role: 'tooltip', >> 'p': {'html': true} >> }); >> >> // Add your data (with the newly added tooltipImg). >> data.addRows(primaryData); >> >> var visibleDiv = document.getElementById('visible_div'); >> var primaryChart = new google.visualization.ColumnChart( >> visibleDiv); >> primaryChart.draw(data, primaryOptions); >> >> } >> </script> >> </head> >> <body> >> <div id="hidden_div" style="display:none"></div> >> <div id="visible_div" style="height:300px"></div> >> </body> >> </html> >> > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 9 Juniper Ridge Road, Acton MA -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
