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