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.
