How does 'view': {'columns': []} work

38 views
Skip to first unread message

Jason

unread,
Feb 5, 2016, 12:38:18 PM2/5/16
to Google Visualization API
Okay so I can not seem to find the literature on the VIEW aspect/option. Can I use it for tableCharts? Can I use it to distinguish between two separate tables in a spreadsheet in the same dataset? Or must I have two separate datasets/queries in the same dashboard? How would I accomplish such a thing?

I saw the example for 'view' in the pieChart part of the Dashboard documentation, but could not find the corresponding write up with more details on 'view'. I have my table properly functioning, in JSFiddle and the source spreadsheet, but added another table to the source spreadsheet that I would like to use specifically for a pieChart on the same Dashboard. I tried expanding my queryString to include the additional columns (N,O) then changed my &range=A1:F25 to A1:O25, to accommodate the new table further in the spreadsheet. Adding in the 'view': {'columns': []} to the table and piechart to account each using a specific column range. None of that worked.
*note* The new table in my source Google Spreadsheet is generated by a QUERY(), if that changes anything.

My original code, that works, is as follows (the pieChart doesn't display the information I want but pops up, whenever I add the 'view' clause it doesn't show up at all):

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id='dashboard_div'>
  <div id='chart_div'></div>
  <p></p>
  <div id='table_div'></div>
  <div id='control_div'></div>
  </div>

google.load('visualization', '1.0',
{'packages': ['table', 'controls']});

google.setOnLoadCallback(queryData);

function queryData()
{
  var queryString = encodeURIComponent('SELECT A,B,C,D,E,F');
  var gidInfoRange = '/gviz/tq?gid=2013544456&headers=1&range=A1:F25&tq=';
  var query = new google.visualization.Query(
    'personalLink' + gidInfoRange + queryString);
   
  query.send(handleQueryResponse);
 
};

function handleQueryResponse(response)
{
     if (response.isError())
   {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
   }
   
  var data = response.getDataTable();
   
  var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div'));

  var tableCategoryFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnIndex': 0
    }
  });
    //Define Table from spreadsheet data
  var tableChart = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table_div'
  });

  //Define first chart (material bar Chart)
 var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value'
          }
         
                   
        });

  dashboard.bind([tableCategoryFilter],[tableChart]);
  dashboard.draw(data);
};


Daniel LaLiberte

unread,
Feb 5, 2016, 12:50:47 PM2/5/16
to Google Visualization API
Hi Jason,

It sounds like you might want to make a separate query for this second part of your data, to display in a separate PieChart.  A single Dashboard can only process a single data table as input, and you *can* use the view option to specify that a PieChart should only use particular columns, but then the entire table with all rows should be correctly formatted.  And then you have to also specify appropriate view options for your other charts.

To debug your Dashboard, to see what data is being sent to each chart, you could use a Table chart instead of any other chart.  Be sure to include the 'table' package in your load() call.

The view option for ChartWrapper is documented under the ChartDraw function, which takes the same arguments:  https://developers.google.com/chart/interactive/docs/reference#google.visualization.drawchart

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/47763d87-e814-4aff-82ef-f51ee7bb484d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Message has been deleted

Jason

unread,
Feb 5, 2016, 4:23:15 PM2/5/16
to Google Visualization API
Hey Daniel,

Thanks for responding. The ChartDraw on view is exactly what I was looking for in reference to the ChartWrapper!

I am trying to understand in my own way what you are saying. So to do a debug to check if my new "table" from the spreadsheet is being called properly due to it being a query statement in the spreadsheet I can call it to a 'tablechart' and see if anything is displayed? If something is displayed then the data is being received correctly, otherwise querying a querying doesn't work? Sounds like a useful technique for many purposes.

Second. Are you saying I need to essentially recreate the whole code again for the new pie chart? Or can I somehow set it up in a way that has much less code?
Something like this (if it makes no sense then please forgive my ignorance as I have not tried anything like this Google visualization API):


<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id='dashboard_div'>
  <div id='table_div'></div>
  <div id='control_div'></div>
</div>
<p></p>
<div id='dashboard_div2'>
  <div id='chart_div'></div>

</div>


google.load('visualization', '1.0',
{'packages': ['table', 'controls']});

google.setOnLoadCallback(
drawMultipleDashboards);

function drawMultipleDashboards()
{
Dashboard1();
Dashboard2();
}

function queryData1()
{
   
  var queryString1 = encodeURIComponent('SELECT A,B,C,D,E,F');
  var gidInfoRange1 = '/gviz/tq?gid=2013544456&headers=1&range=A1:F25&tq=';
  var query1 = new google.visualization.Query(
    'personalLink1' + gidInfoRange1 + queryString1);
   
  query1.send(Dashboard1);
 
};
function queryData2()
{
   
  var queryString2 = encodeURIComponent('SELECT N,O');
  var gidInfoRange2 = '/gviz/tq?gid=2013544456&headers=1&range=N1:O6&tq=';
  var query2 = new google.visualization.Query(
    'personalLink2' + gidInfoRange2 + queryString2);
   
  query2.send(Dashboard2);
 
};

function Dashboard1(response)

{
     if (response.isError())
   {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
   }
   
  var data = response.getDataTable();
   
  var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div'));

  var tableCategoryFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnIndex': 0
    }
  });
    //Define Table from spreadsheet data
  var tableChart = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'table_div'
  });


  dashboard.bind([tableCategoryFilter],[tableChart]);
  dashboard.draw(data);
};

function Dashboard2(response)

{
     if (response.isError())
   {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
   }
   
  var data = response.getDataTable();
   
  var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div2'));


 //Define first chart (pie Chart)

 var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 300,
            'height': 300,
            'pieSliceText': 'value'
          },
          'view': {'columns': [0,1]}

        });

  dashboard.bind();
  dashboard.draw(data);
};
- show quoted text -
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

Daniel LaLiberte

unread,
Feb 7, 2016, 11:03:45 AM2/7/16
to Google Visualization API
Yes, separate Dashboards like you are doing is appropriate if it would be a problem to join the two sets of data into one, and specify a 'view' for each chart that uses the appropriate data in each case.  From your queries, it looks like joining into one data table would be awkward.  

Your code looks good on cursory overview, except critically, your drawMultpleDashboards function must call the query functions, which in turn call the DashBoard1 and 2 functions.



To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/d2f1c121-d9dd-4388-917f-4db68e7a6233%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages