Wednesday, 15 January 2014

Google Charts Tooltips only works with a first row that has no tooltips -



Google Charts Tooltips only works with a first row that has no tooltips -

i'm trying utilize tooltips in google bar chart, , running weird issue tooltips work if top row of datatable has no tooltips in it.

when this, chart doesn't render:

function drawvisualization() { // create , populate info table. var info = google.visualization.arraytodatatable([ ['report','ineffective', 'developing', 'effective', 'highly effective'], ['growth rating',{v:18, f:'tooltip text'},{v:12, f:'tooltip text'},{v:66, f:'tooltip text'},{v:4, f:'tooltip text'}], ['composite rating',{v:6, f:'tooltip text'},{v:12, f:'tooltip text'},{v:58, f:'tooltip text'},{v:25, f:'tooltip text'}] ]); // create , draw visualization. new google.visualization.barchart(document.getelementbyid('chart_div')). draw(data, {title:"title", colors: ['#638fbc','#ffe17c','#ffa87c','#204c7a'], haxis: {title: "percent of educators", viewwindow:{max:105, min:0}, titletextstyle: {italic: false}}, chartarea: {width: "60%"}, isstacked: true} ); }

but if this, chart renders fine

function drawvisualization() { // create , populate info table. var info = google.visualization.arraytodatatable([ ['report','ineffective', 'developing', 'effective', 'highly effective'], ['empty', 0 , 0 , 0 , 0 ], ['growth rating',{v:18, f:'tooltip text'},{v:12, f:'tooltip text'},{v:66, f:'tooltip text'},{v:4, f:'tooltip text'}], ['composite rating',{v:6, f:'tooltip text'},{v:12, f:'tooltip text'},{v:58, f:'tooltip text'},{v:25, f:'tooltip text'}] ]); // create , draw visualization. new google.visualization.barchart(document.getelementbyid('chart_div')). draw(data, {title:"title", colors: ['#638fbc','#ffe17c','#ffa87c','#204c7a'], haxis: {title: "percent of educators", viewwindow:{max:105, min:0}, titletextstyle: {italic: false}}, chartarea: {width: "60%"}, isstacked: true} );

i have no thought why adding row makes work.

any help appreciated.

this because back upwards {v:,f:} cells in arraytodatatable bit spotty @ moment. we'll publish prepare in next version of library. in meantime, can utilize google.visualization.datatable constructor so:

var info = new google.visualization.datatable(); data.addcolumn('string', 'report'); data.addcolumn('string', 'developing'); data.addcolumn('string', 'effective'); data.addcolumn('string', 'highly effective'); data.addrows([ ['growth rating',{v:18, f:'tooltip text'},{v:12, f:'tooltip text'},{v:66, f:'tooltip text'},{v:4, f:'tooltip text'}], ['composite rating',{v:6, f:'tooltip text'},{v:12, f:'tooltip text'},{v:58, f:'tooltip text'},{v:25, f:'tooltip text'}] ]);

charts google-visualization

No comments:

Post a Comment