How can I set the value of column C as a string in my Google Visualization Query?
Question
How can I tell the data from a Google Visualization Query that Column C is a string? I can't find anywhere in the documentation options that shows me how to designate certain columns as strings or numbers. It thinks column C is a number and ads another column in the column chart, when it's actually suppose to be set as a string.
Do I set it in query options or in the options for the column chart? I added my code and pictures of the dashboard and datasheet.
Thanks! Brandon
<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the controls package. google.load('visualization', '1.0', {'packages':['controls']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawDashboard); // Callback that creates and populates a data table, // instantiates a dashboard, a range slider and a bar chart, // passes in the data and draws it. function drawDashboard() { var query = new google.visualization.Query( 'https://docs.google.com/a/sleschool.org/spreadsheets/d/1TRcHxsLuunRUPgn-i-h3OcVvh0TNp_VhJrNBI3ulMlA/edit#gid=0'); query.setQuery('select A,B,C'); query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var scoreSlider = new google.visualization.ControlWrapper({ controlType: 'NumberRangeFilter', containerId: 'filter_div', options: { filterColumnLabel: 'Score' } }); var rtiFilter = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'rtifilter_div', options: { 'filterColumnLabel': 'RTI','ui': { 'labelStacking': 'vertical','allowTyping': true,'allowMultiple': true } }}); // Create a Column Bar chart, passing some options var columnChart = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', containerId: 'chart_div', options: { width: 600, height: 400, legend: 'right', title: 'Summative Assessment Data', } }); // Define a table var table = new google.visualization.ChartWrapper({ chartType: 'Table', dataTable: data, containerId: 'table_div', options: { width: '400px' } }); // Establish dependencies, declaring that 'filter' drives 'ColumnChart', // so that the column chart will only display entries that are let through // given the chosen slider range. dashboard.bind([scoreSlider], [table, columnChart]); dashboard.bind([rtiFilter], [table, columnChart]); // Draw the dashboard. dashboard.draw(data); } </script> </head> <body> <!--Div that will hold the dashboard--> <div id="dashboard_div"> <h2>Summative Assessment Data</h2> <!--Divs that will hold each control and chart--> <div id="filter_div"></div> <br /> <div id="rtifilter_div"></div> <table> <tr> <td> <div id="chart_div"></div> </td> <td> <div id="table_div"></div> </td> </tr> </table> </div> </body> </html>
1 answers
solution1
0 2015-04-26 15:20:13
I've haven't built DataTables in this way before but you might try using setColumnProperty .
I have no idea if type can be changed after it is created but it is worth a shot trying something like this:
data = response.getDataTable();
data.setColumnProperty(colIndex, "type", "string");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.