tableChart custom column label, lineChart delete extra space

84 views
Skip to first unread message

Jason

unread,
Feb 23, 2016, 10:58:42 AM2/23/16
to Google Visualization API
Hi!!

So I have been trying to get a table chart with a custom column name/label to appear. When I use the label function in the query for a spreadsheet it works fine, but does not work as part of the Visualization API. I tried to create a separate query in a spreadsheet with custom labels to query against the Visualization API but then get no column names at all. Does anyone know how to solve this? It is only a 2 row, 2 column table (eg 2 column names, 2 cells of numbers).

Additionally I would like to eliminate the extra space on the right side of a line chart, with NO legend. I tried messing with the chartArea option by pushing the chartarea to the left then increasing the chartarea width but it just messes it up. Here is a list of my options that work but produce a large blank space at the right end of the chart.
    
 var options = {
        title: 'Line Chart, January 2016',
        legend: { position: 'none' },
        width: 1000,
          hAxis: {
          title: 'Date',
          format: 'M/d/yy',
          textStyle: {fontSize: 10},
          gridlines: {count: 31}
          },
          vAxis: {
          title: 'Sales'
          }

      };

Thanks for any help you can provide!

Jason

unread,
Feb 23, 2016, 11:14:50 AM2/23/16
to Google Visualization API
Update: Okay. The issue with the table custom label not showing from the spreadsheet query was solved by just manually increasing the style width in div. Simple enough.

Daniel LaLiberte

unread,
Feb 23, 2016, 11:55:32 AM2/23/16
to Google Visualization API
For your line chart, there is a new option to specify the size of the right side of the chart area.

  options = {
    ...
      chartArea: { right: 0 }
  }

You'll need to be using the 'current' version to get this feature.  https://developers.google.com/chart/interactive/docs/basic_load_libs

--
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/37605408-0696-41be-9ce2-db7ad8cfef77%40googlegroups.com.

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



--

Jason

unread,
Feb 23, 2016, 12:21:52 PM2/23/16
to Google Visualization API
Hello again Daniel.

That worked perfectly for the Line Chart. Thank you!

In regards to custom column names via query statement is this possible? Or must you use the DataTable method setColumnLabel?

Thanks again
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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.



--

Daniel LaLiberte

unread,
Feb 23, 2016, 1:26:12 PM2/23/16
to Google Visualization API
The Query call by itself can only get what the Spreadsheet (or other data source) provides.  It doesn't provide a way of specifying how to customize the data once it is returned, so you would have to modify the data table once you have it in the browser.  Also consider using a DataView instead: https://developers.google.com/chart/glossary#dataview

As another alternative you might want to consider, if you can use a ChartWrapper to construct your chart, then you can also provide parameters to specify a data source URL for the spreadsheet and a view parameter that lets you construct the equivalent of a DataView.

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.



--

--
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/97424f80-5920-4688-879e-a3410e928dbe%40googlegroups.com.

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



--

Jason

unread,
Feb 23, 2016, 5:05:32 PM2/23/16
to Google Visualization API
Daniel,

I see. Thank you. I assumed that I could use the same subset of SQL querying as used in Google Spreadsheets, which does not appear to be the case. So if I use a spreadsheet as a "data source" I will just have to have a worksheet where I display my intended query results, which can then be read by the Google Visualization API query. Does that make sense? The alternative being using the DataView class, as below.

I have been reading as much information on DataView as possible, including many examples from the forum posted by you, Andrew Gallant, and Sergey. It appears that it may be able to solve several other things I have been playing around with. Is something like this what you are referring to when using the DataView class with setColumnLabel method?
var view = new google.visualization.DataView(data);
view.setColumnLabel(1,'Header Title Example');

Thanks for your time Daniel.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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.



--

--
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-visualization-api+unsub...@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.



--

Daniel LaLiberte

unread,
Feb 24, 2016, 9:18:07 AM2/24/16
to Google Visualization API
A DataView doesn't let you change the column labels except by using setColumns to specify the entire set of columns, including labels.  

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.



--

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



--

--
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/ce80986b-04de-4b94-8347-be5db06e8579%40googlegroups.com.

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



--

Jason

unread,
Feb 24, 2016, 1:49:22 PM2/24/16
to Google Visualization API
Hey Daniel,

Okay I am little confused by that. I think I must be misunderstanding some of the material I have read, no surprise as I do not have must experience in this.

So when I read about this method of the DataView class I thought that was exactly what you could do. When you use a DataView of the underlying "data" it essentially pulls the data table you have created, reads that table realtime, then allows you to alter how it is displayed in the visualization. So then when I read this method below I took that I coul change the label of a column through a DataView. What exactly does this method do ? Sorry for dragging this out, just want a better understanding.

setColumnLabel(columnIndex, label)

Sets the label of a column.

  • columnIndex should be a number greater than or equal to zero, and less than the number of columns as returned by the getNumberOfColumns() method.
  • label is a string with the label to assign to the column. The column label is typically displayed as part of the visualization. For example the column label can be displayed as a column header in a table, or as the legend label in a pie chart.

Daniel LaLiberte

unread,
Feb 24, 2016, 1:59:36 PM2/24/16
to Google Visualization API
You found the setColumnLabel method under the DataTable section rather than the DataView section.   I know it can be confusing the way the document is constructed.

You should be able to modify the underlying data table of a data view, but I'm not actually sure whether the column labels will be updated in the data view. Perhaps if you call setColumns() again to update the data view it would pull out the current labels from the data table to use as defaults.

Hope that helps 

--
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/e3115c0f-a1c6-454a-ba1f-e6112c147aad%40googlegroups.com.

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

Jason

unread,
Feb 24, 2016, 2:13:36 PM2/24/16
to Google Visualization API
Oh. You are absolutely correct. I don't know how I missed that the method was actually part of the DataTable class.... haha. Sorry about that!


On Wednesday, February 24, 2016 at 1:59:36 PM UTC-5, Daniel LaLiberte wrote:
You found the setColumnLabel method under the DataTable section rather than the DataView section.   I know it can be confusing the way the document is constructed.

You should be able to modify the underlying data table of a data view, but I'm not actually sure whether the column labels will be updated in the data view. Perhaps if you call setColumns() again to update the data view it would pull out the current labels from the data table to use as defaults.

Hope that helps 
On Wed, Feb 24, 2016 at 1:49 PM, Jason <jgdk...@gmail.com> wrote:
Hey Daniel,

Okay I am little confused by that. I think I must be misunderstanding some of the material I have read, no surprise as I do not have must experience in this.

So when I read about this method of the DataView class I thought that was exactly what you could do. When you use a DataView of the underlying "data" it essentially pulls the data table you have created, reads that table realtime, then allows you to alter how it is displayed in the visualization. So then when I read this method below I took that I coul change the label of a column through a DataView. What exactly does this method do ? Sorry for dragging this out, just want a better understanding.

setColumnLabel(columnIndex, label)

Sets the label of a column.

  • columnIndex should be a number greater than or equal to zero, and less than the number of columns as returned by the getNumberOfColumns() method.
  • label is a string with the label to assign to the column. The column label is typically displayed as part of the visualization. For example the column label can be displayed as a column header in a table, or as the legend label in a pie chart.

--
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-visualization-api+unsub...@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.



--
Reply all
Reply to author
Forward
0 new messages