Chris, I took you code and merely changed ColumnChart to LineChart, and it works fine. See http://jsfiddle.net/dlaliberte/stn4pc63/ What issues are you having?
On Tue, Mar 24, 2015 at 5:44 AM, chris Clements < [email protected]> 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.
