javascript - Show tooltip on load with google charts -
i'm trying use tooltip.trigger = 'selection'
, setselection([{row:4,column:null}])
, tooltip doesn't show automatically. when click on tooltip.
here's jsfiddle showing problem.
any ideas can try?
thanks!
i ended using annotations. though interested in tooltips if figures out way.
var gmapdata = [[{"label":"date","type":"date"},"one",{"role":"annotation","type":"string"},"two",{"role":"annotation","type":"string"},"three",{"role":"annotation","type":"string"}],["date(2012, 3, 26)",412,null,278,null,149,null],["date(2012, 3, 27)",410,null,272,null,147,null],["date(2012, 3, 30)",414,null,280,null,146,null],["date(2012, 4, 1)",406,"$406",268,"$268",141,"$141"]]; drawchart(); function drawchart() { var data = window.data = google.visualization.arraytodatatable(gmapdata); // apply tooltip formatting var formatter = new google.visualization.numberformat({pattern: '$#,###'}); var cols = (gmapdata[0].length-1) / 2; x = cols; // apply tooltip formatting while ((--x) >= 0) formatter.format(data, x*2+1); var options = { title: 'number watch', legend: { position: 'bottom' }, interpolatenulls: true, curvetype: 'function', selectionmode: 'single', tooltip: {trigger: 'focus'}, focustarget: 'category', annotations: { textstyle: { fontsize: 18 } }, vaxis: {format: '$#,###'}, width: 400, height: 300 }; var chart = window.chart = new google.visualization.linechart(document.getelementbyid('num_watch')); chart.draw(data, options); }
hi,
this known bug focustarget: 'category'. particular option uses mouse position signal how position tooltip, , programmatic selection won't trigger tooltip display.
to circumvent issue, use multiple selection on first load. here's example of this, along reset changes focustarget 'category' @ first opportunity: http://jsfiddle.net/b1kt6mrl/
jsfiddle:
// ..... previous code, not annotations chart.draw(data, options); chart.setselection([{row:4, column:1}, {row:4, column:2}, {row:4, column:3}]); google.visualization.events.addonetimelistener(chart, 'onmouseover', function() { var selection = chart.getselection(); options.focustarget = 'category'; options.selectionmode = 'single'; google.visualization.events.addonetimelistener(chart, 'ready', function() { chart.setselection(selection); }); chart.draw(data, options); });
Comments
Post a Comment