I have a DataTable defined that I display as a table and in chart form. I have also added a push button to increment a value in the table.
Problem 1: When incrementing by a decimal value from 8.1 + 0.1 I get something like 8.1999999999 Idea 1: Maybe there is a number precision error and if I could format the cell to one decimal place I could hide the error. so I tried "formatDecimal.format(data, 1);" but now ... Problem 2: When I apply the formatting, the cell no longer updates when I use the push button (but the chart does update!). Not sure why applying a formatting causes the table to no longer update This is my first kick at the can using Google Vis API. Ideas for dealing with either problem? Here is the entire html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > <title> Google Visualization API Sample </title> <script type="text/javascript" src="http://www.google.com/jsapi";></ script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['table', 'barchart']}); </script> <script type="text/javascript"> var data; var table; var dataSpeed; var chartSpeed; var formatDecimal; function drawVisualization() { data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Speed'); data.addRows(2); data.setCell(0, 0, 'Joe'); data.setCell(0, 1, 8.1); data.setCell(1, 0, 'Moe'); data.setCell(1, 1, 5); // try to format with 1 decimal place ... and still allow it to be changed from click button // if you comment out the two lines below, the table values update correctly!!! formatDecimal = new google.visualization.TableNumberFormat ({fractionDigits: 1}); formatDecimal.format(data, 1); // Apply formatter to second column //draw table table = new google.visualization.Table(document.getElementById ('table')); table.draw(data, null); // define Speed data dataSpeed = new google.visualization.DataView(data); dataSpeed.setColumns([0, 1]); chartSpeed = new google.visualization.BarChart (document.getElementById('chartSpeed')); chartSpeed.draw(dataSpeed, {width: 300, height: 300}); // sorting ability google.visualization.events.addListener(table, 'sort', function(event) { data.sort([{column: event.column, desc: !event.ascending}]); chartSpeed.draw(dataSpeed, {width: 300, height: 300}); }); }; function changeSpeed(dir) { data.setCell(0, 1, data.getValue(0, 1) + dir ); chartSpeed.draw(dataSpeed, {width: 300, height: 300}); table.draw(data, null); }; google.setOnLoadCallback(drawVisualization); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div>The Original Data Table</div> <div id="table"></div> <br /> <input type="button" value=↑ onclick="changeSpeed(0.1)" /> <input type="button" value=↓ onclick="changeSpeed(-0.1)" /> <div>A Data View Chart</div> <div id="chartSpeed"></div> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en -~----------~----~----~----~------~----~------~--~---
