[visualization-api] Re: Official documentation on how to include multiple charts on the same page?
Hi Andrew,
Thanks for sharing; I'm not quite there with your example though.
Please see my code, which is just the example area chart code from the
Google
I'd just like three of the same chart:
script type=text/javascript
src=https://www.google.com/jsapi;/script
script type=text/javascript
google.load(visualization, 1, {packages:[corechart]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Impressions'],
['2014-07-01', 1850],
['2014-07-02', 1950],
['2014-07-03', 2100],
['2014-07-04', 1900],
['2014-07-05', 2000],
['2014-07-06', 2170],
['2014-07-07', 1660],
['2014-07-08', 2030],
['2014-07-09', 2130],
['2014-07-10', 2230]
]);
var options = {
hAxis: {textPosition: 'none'},
vAxis: {
textPosition: 'none',
gridlines: {color:'transparent'},
baselineColor:'transparent',
minValue: 0
},
theme: 'maximized',
legend: 'none'
};
var chart = new
google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
/script
On Thursday, July 31, 2014 9:17:50 PM UTC-7, Andrew Gallant wrote:
There are many ways to include multiple charts on the same page. The
thing they all share in common are that each chart has to have a unique
container div, so if I create 3 charts on a page, I might put them in 3
container divs with id's chart1, chart2, and chart3. You can
separate out the code for each chart into its own function, or you can
combine them all together, eg:
function drawCharts () {
// code to draw chart1
// code to draw chart2
// code to draw chart3
}
google.load('visualization', '1', {packages: ['corechart'], callback:
drawCharts});
is functionally equivalent to:
function drawChart1 () {
// code to draw chart1
}
function drawChart2 () {
// code to draw chart2
}
function drawChart3 () {
// code to draw chart3
}
function drawCharts () {
drawChart1();
drawChart2();
drawChart3();
}
google.load('visualization', '1', {packages: ['corechart'], callback:
drawCharts});
Is that what you are looking for?
On Thursday, July 31, 2014 5:46:24 PM UTC-4, WhoSoLovesUs wrote:
Hi,
To someone familiar and comfortable with javascript this may seem like an
easy task...
But I'd like to put three charts on the same web page
Is there any official documentation from Google about what to do in this
case?
I've looked online a fair bit; the problem is that every individual
solution looks a little different to my eyes (not surprisingly)
Thanks, basically I'm looking for some hand holding and explanation here
:)
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
[visualization-api] Re: Official documentation on how to include multiple charts on the same page?
Hi Saji, not too sure what I'm looking at here (though I notice there are multiple charts on the same page) On Thursday, July 31, 2014 5:29:40 PM UTC-7, Saji Antony wrote: May be you could check my hobby project view-source:http://www.smart-earn.com/fundamentals/p/summary/3201 and an example of json data http://www.smart-earn.com/gj/8/3201 -- 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+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
[visualization-api] Re: Official documentation on how to include multiple charts on the same page?
Hi, ok I got it working ... thanks so much for sharing this :)
Something like this would be handy to have in the Google Charts
documentation somewhere, as I've seen it is a commonly asked question
On Thursday, July 31, 2014 9:17:50 PM UTC-7, Andrew Gallant wrote:
There are many ways to include multiple charts on the same page. The
thing they all share in common are that each chart has to have a unique
container div, so if I create 3 charts on a page, I might put them in 3
container divs with id's chart1, chart2, and chart3. You can
separate out the code for each chart into its own function, or you can
combine them all together, eg:
function drawCharts () {
// code to draw chart1
// code to draw chart2
// code to draw chart3
}
google.load('visualization', '1', {packages: ['corechart'], callback:
drawCharts});
is functionally equivalent to:
function drawChart1 () {
// code to draw chart1
}
function drawChart2 () {
// code to draw chart2
}
function drawChart3 () {
// code to draw chart3
}
function drawCharts () {
drawChart1();
drawChart2();
drawChart3();
}
google.load('visualization', '1', {packages: ['corechart'], callback:
drawCharts});
Is that what you are looking for?
On Thursday, July 31, 2014 5:46:24 PM UTC-4, WhoSoLovesUs wrote:
Hi,
To someone familiar and comfortable with javascript this may seem like an
easy task...
But I'd like to put three charts on the same web page
Is there any official documentation from Google about what to do in this
case?
I've looked online a fair bit; the problem is that every individual
solution looks a little different to my eyes (not surprisingly)
Thanks, basically I'm looking for some hand holding and explanation here
:)
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
[visualization-api] Official documentation on how to include multiple charts on the same page?
Hi, To someone familiar and comfortable with javascript this may seem like an easy task... But I'd like to put three charts on the same web page Is there any official documentation from Google about what to do in this case? I've looked online a fair bit; the problem is that every individual solution looks a little different to my eyes (not surprisingly) Thanks, basically I'm looking for some hand holding and explanation here :) -- 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+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
[visualization-api] Re: How to change date format - Data Table from GA Query (SuperProxy) URL?
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 mmdd, 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
titleGA 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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https
[visualization-api] Re: How to change date format - Data Table from GA Query (SuperProxy) URL?
Thank you for sharing these two options :)
Out of curiosity, which one would you choose in this case, and are there
any particular reasons behind making either choice?
Perhaps if you needed it to be in 'date' format for some other purpose as
well?
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 mmdd, 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
titleGA 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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https
[visualization-api] Set Custom Header Row Values in a Table Chart?
Hi, I'm using Google
SuperProxyhttps://developers.google.com/analytics/solutions/google-analytics-super-proxyto
get a dataSourceUrl from our GA data (starts as a Query URI), and using
it for a table chart
One issue I'm having is that the GA query makes the dimension and metric
names the header rows values, e.g.:
*ga:dimension1 | ga:avgEventValue | ga:visitsWithEvent*
data |data |
data
Can I edit this in the charts code to replace them with my own column
header values? My chart code looks like this so far (from the SuperProxy
demo):
html
head
titlePie!/title
!--Load the AJAX API--
script type=text/javascript
src='https://www.google.com/jsapi?autoload={modules:[{name:visualization,version:1}]}'
/script
script type=text/javascript
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var countryWrapper = new google.visualization.ChartWrapper({
// Example Country Share Query
containerId: pageviews,
dataSourceUrl: https://my.appspot.com/url;,
chartType: Table,
options: {
showRowNumber : false,
width: 630,
}
});
countryWrapper.draw();
}
/script
/head
body
div id=pageviews style=margin:auto;width:630px;/div
/body
/html
Thank You :)
I may need to ask this in the SP forum
--
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+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
[visualization-api] How to change date format - Data Table from GA Query (SuperProxy) URL?
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
titleGA 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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
[visualization-api] Re: Set Custom Header Row Values in a Table Chart?
Thank You :) I also have a related question if you would be interested: How to change date format - Data Table from GA Query (SuperProxy) URL?https://groups.google.com/forum/#!topic/google-visualization-api/_ZrVlkmo1-o -- 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+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
[visualization-api] Connecting to and Visualizing GA Data?
Hi, I'd like to experiment with visualizing google analytics data This guide https://developers.google.com/analytics/solutions/articles/gdataAnalyticsCharts and associated code seems to be outdated (the links to the files are not found, though I managed to find them elsewhere) Specifically I get stopped when I click on the Access Google Analytics button, I'm taken to a page that says The page you requested is invalid. If a Google team member reads this, would it be possible to update the above page so that it still works today? 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 google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
[visualization-api] Displaying A Single Metric on a Web Page
Hi, I am just getting started with visualizations I'm using a google doc, and for now I am embedding charts into an HTML page, which is working really nicely However there is no chart type for a single metric, which I'd like to include on the dashboard I'm creating Would creating a visualization be the best way to do this? If I could get the raw value I could style it using CSS, but I'm not sure how to do that Thanks :) -- 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+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
