如何在Google Visualization Query中将列C的值设置为字符串?

时间:2015-03-30 18:18:26

标签: javascript google-visualization

如何告知Google Visualization Query中的数据C列是字符串?我在文档选项中找不到任何地方,告诉我如何将某些列指定为字符串或数字。它认为列C是一个数字,并在列图表中广告另一列,当它实际上假设被设置为字符串时。

我是在查询选项中还是在柱形图的选项中设置它? 我添加了仪表板和数据表的代码和图片。

谢谢! 布兰登

<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>

Data Sheet Dashboard Output.

1 个答案:

答案 0 :(得分:0)

我之前没有以这种方式构建DataTables,但您可以尝试使用setColumnProperty

我不知道类型是否可以在创建后更改但是值得尝试这样的事情:

data = response.getDataTable();
data.setColumnProperty(colIndex, "type", "string");