Hi, and thank you :) Just to follow up
Using the 'date' method also adds vertically aligned grid lines to the
chart, which I have so far been unable to turn off with the configuration
options (new to using them though)
(for now I am using the string method)
On Wednesday, September 25, 2013 5:31:03 PM UTC-7, asgallant wrote:
>
> You can use the "view" parameter of the ChartWrapper to change the way the
> data is displayed. You can either change the string format, or you can
> transform them into Date objects.
>
> Assuming those dates are in the form "yyyymmdd", here are a couple of
> examples you could use:
>
> // reformat the string:
> var VDPViewsWrapper = new google.visualization.ChartWrapper({
> // Example Country Share Query
> containerId: "pageviews",
> dataTable: data,
> chartType: "ColumnChart",
> options: {
> title: 'Pageviews',
> showRowNumber: 'false',
> width: '425',
> height: '300',
> legend: 'none',
> hAxis: {textPosition:'none'},
> titleTextStyle: {fontSize: 18, bold: 'false'}
> },
> view: {
> columns: [{
> type: 'string',
> label: data.getColumnLabel(0),
> calc: function (dt, row) {
> var dateString = dt.getValue(row, 0);
> var year = dateString.substring(0, 4);
> var month = dateString.substring(4, 6);
> var day = dateString.substring(6);
> var date = year + '/' + month + '/' + day;
> return date;
> }
> }, 1]
> }
> });
>
> // change string to a Date object:
> var VDPViewsWrapper = new google.visualization.ChartWrapper({
> // Example Country Share Query
> containerId: "pageviews",
> dataTable: data,
> chartType: "ColumnChart",
> options: {
> title: 'Pageviews',
> showRowNumber: 'false',
> width: '425',
> height: '300',
> legend: 'none',
> hAxis: {textPosition:'none'},
> titleTextStyle: {fontSize: 18, bold: 'false'}
> },
> view: {
> columns: [{
> type: 'date',
> label: data.getColumnLabel(0),
> calc: function (dt, row) {
> var dateString = dt.getValue(row, 0);
> var year = parseInt(dateString.substring(0, 4));
> var month = parseInt(dateString.substring(4, 6)) - 1;
> var day = parseInt(dateString.substring(6));
> var date = new Date(year, month, day);
> return date;
> }
> }, 1]
> }
> });
>
>
> On Wednesday, September 25, 2013 4:37:44 PM UTC-4, WhoSoLovesUs wrote:
>>
>> Hi, I'm getting date values that look like '20130903' from the data table
>> (powered by SuperProxy), so when I hover over my columns I see these
>> unfamiliar and unattractive date values.
>>
>> Can I change the format of the date in my page code?
>>
>> Here is my code:
>>
>> <html>
>>> <head>
>>> <title>GA Chart - Column</title>
>>>
>>> <!--Load the AJAX API-->
>>> <script type="text/javascript"
>>> src='https://www.google.com/jsapi?autoload={
>>> "modules":[{"name":"visualization","version":"1"}]}'>
>>> </script>
>>>
>>> <!-- Visualization -->
>>> <!--
>>> https://developers.google.com/chart/interactive/docs/reference#google.visualization.drawchart-->
>>> <script type="text/javascript">
>>> google.setOnLoadCallback(drawVisualization);
>>>
>>> function drawVisualization () {
>>> var query = new google.visualization.Query('
>>> https://my.appspot.com/url');
>>> // use the #setQuery method if you want to write a select
>>> statement
>>> query.send(function (response) {
>>> var data = response.getDataTable();
>>>
>>> // change column labels
>>> data.setColumnLabel(0, 'Date');
>>> data.setColumnLabel(1, 'Pageviews')
>>>
>>> var VDPViewsWrapper = new google.visualization.ChartWrapper({
>>> // Example Country Share Query
>>> containerId: "pageviews",
>>> dataTable: data,
>>> chartType: "ColumnChart",
>>> options: {
>>> title: 'Pageviews',
>>> showRowNumber: 'false',
>>> width: '425',
>>> height: '300',
>>> legend: 'none',
>>> hAxis: {textPosition:'none'},
>>> titleTextStyle: {fontSize: 18, bold: 'false'}
>>> }
>>> });
>>>
>>> VDPViewsWrapper.draw();
>>> });
>>>
>>> }
>>> </script>
>>> </head>
>>> <body>
>>> <div id="pageviews" style="margin:auto;width:630px;"></div>
>>> </body>
>>> </html>
>>>
>>
>> Thank You
>>
>>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
<<attachment: Screen Shot 2013-09-26 at 11.15.57 AM.png>>
