How can I have two google charts on one page? I'm using super proxy to get JSON table from google analytics API.
Currently, only the first chart (Table) is shown. Missing the second chart.
My code is attached below. I'm not so familiar with the API things. I checked some solutions, but all have data locally instead of from online sources, e.g., spreadsheet, JSON table.
Any help would be appreciated.
<html>
<head>
<!--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.load('visualization', '1', {packages: ['table','geochart']});
google.setOnLoadCallback(drawVisualization);
function drawCountriesTable() {
var CountriesTableWrapper = new google.visualization.ChartWrapper({
"containerId": "CountriesTable_div",
"dataSourceUrl": "https://top3dapp.appspot.com/query?id=agpzfnRvcDNkYXBwchULEghBcGlRdWVyeRiAgICAgICACgw&format=data-table-response",
"refreshInterval": 43200,
"chartType": "Table",
"options": {
"showRowNumber" : true
}
});
CountriesTableWrapper.draw();
}
function drawRegionsMap() {
var RegionsMapWrapper = new google.visualization.ChartWrapper({
"containerId": "RegionsMap_div",
"dataSourceUrl": "https://top3dapp.appspot.com/query?id=agpzfnRvcDNkYXBwchULEghBcGlRdWVyeRiAgICAvKGCCgw&format=data-table-response",
"refreshInterval": 43200,
"chartType": "GeoChart",
"options": {
"displayMode": 'markers',
"colorAxis": { "colors": ['#A9DEF2', '#048DC7'] }
}
});
RegionsMapWrapper.draw();
}
function drawVisualization() {
drawCountriesTable();
drawRegionsMap();
}
</script>
</head>
<body>
<h2>Countries</h2>
<div id="CountriesTable_div" style="margin:auto;width:630px;"></div>
<h2>Regions</h2>
<div id="RegionsMap_div" style="margin:auto;width:630px;"></div>
</body>
The is a bug of super proxy. Bug report see:
https://github.com/googleanalytics/google-analytics-super-proxy/issues/17
Following the steps as suggested on github:
Open query_helper.py
Go to the method 'GetPublicEndpointResponse'
In line 395, you should see
transformed_response_content = response.get('transformed_content')
Change that line to:
transformed_response_content = transform.Transform(response_content)
Test/Deploy updates
Related
In my page I load the chart as described in the docs. It's a view in asp.net that renders the output. The view checks if a class called Avstemning is populated then puts strings from that class into the chart as data. But if I use Norwegian letters like ø,æ, å. The chart data can't read it even as I specify the language option to use. What is going on here?
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
#if (Model.Avstemning != null)
{
<script type="text/javascript">
google.charts
.load('current', { 'packages': ['corechart'], 'language':'no' });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Avstemning', '#Model.Avstemning.Tittel'],
['#Model.Avstemning.Option1', #Model.Avstemning.One],
['#Model.Avstemning.Option2', #Model.Avstemning.Two],
['#Model.Avstemning.Option3', #Model.Avstemning.Three]
]);
var options = {
title: '#Model.Avstemning.Tittel'};
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
}
If I change the data variable to take hard coded options with norwegian letters it works. But that's not exactly ideal. Any ideas on how to solve this? Inject javascript from controller?
I solved the encoding issue by using Html.Raw(). Not recommended if these are later to be stored in db, but works for displaying the data as I intended:
var data = google.visualization.arrayToDataTable([
['Avstemning', '#Html.Raw(Model.Avstemning.Tittel)'],
['#Html.Raw(Model.Avstemning.Option1)', #Model.Avstemning.One],
['#Html.Raw(Model.Avstemning.Option2)', #Model.Avstemning.Two],
['#Html.Raw(Model.Avstemning.Option3)', #Model.Avstemning.Three]
]);
var options = {
title: '#Html.Raw(Model.Avstemning.Tittel)',
};
So I have a working google chart that uses a CSV file, parses the CSV data as a string into an array, and uses the array as the datatable.
I actually asked a question and answered it myself Here.
That link will show you a full chunk of code that I used in my full working website.
I intended to just pull the script from the test file and drop it into my website, but now that I've moved it over and included the scripts I needed, I'm getting an error as:
Type Error: $.csv is undefined
Here is the code where $.csv is being utilized (var arrayData), this is a function for drawing the chart
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.csv.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> // load the visualisation API
google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>
<script type="text/javascript">
function drawVisualization() {
$.get("Thornton.M2.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// CAPACITY - En-route ATFM delay - YY - CHART
var crt_ertdlyYY = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'crt_ertdlyYY',
dataTable: data,
options:{
width: 450, height: 160,
title: 'EU-wide en-route ATFM delays (year to date)',
titleTextStyle : {color: 'grey', fontSize: 11},
}
});
crt_ertdlyYY.draw();
});
}
google.setOnLoadCallback(drawVisualization)
</script>
</head>
<body>
<div id="crt_ertdlyYY"></div>
</body>
This example works fully as you can see from the link I had posted before hand, if you wanted to test it. But now that I pull it into my main site the .csv calls do not recognize. I also have 2 other google charts on this page that still work properly so it's isolated to this issue. I'm very new to google charts and pretty confused here!
Have been trying to follow the guide here to creating a pie chart and from there develop some dashboard features in Google Apps Script. I found out that when you implement the calling of a script function (in the example it would be the drawChart() function), that is considered "Active Content" as seen here.
I have seen other examples that don't use HTML, but those all seem to require the use of the UiApp class, which has been depreciated. So, is the only way to get a dashboard/graphing feature in Google Apps Script to have an HTTPS security certificate? It seems rather limiting if this is the case. I see a post or two mentioning a similar frustration getting only a white screen, and I believe that is due to the HTTPS limitation.
Originally I didn't post code because I felt the issue here was pretty clear. Here is the code I have. I also tried a simple HTML "Hello World" file that didn't have any functions/scripts, and that worked. Here is the script as it relates to my Google Sheet:
function OpenChart(){
var html = HtmlService.createHtmlOutputFromFile('DummyChart');
SpreadsheetApp.getUi().showModalDialog(html, "Statistics");
}
Here is the HTML file it calls:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//Load charts package and visualization API
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(MakeChart);
//Here is the script I think could be causing a problem
function MakeChart()
{
var ss = SpreadsheetApp.getActive();
var s = ss.getSheets();
var s = sheets[1];
var UI = SpreadsheetApp.getUi();
var response = UI.prompt("Please enter the first cell in the category").getResponseText();
var ir = s.getRange(response);
var n= 0;
var stored = [];
stored.push(["Income Category", "Frequency"]);
while (ir.getValue()!= "") {
n = n +1;
ir = ir.offset(1, 0);
}
//Above we just set n, below we use n to fill our array
ir = ir.offset(-n,0)
for(i =0; i<n;i++) {
stored.push([ir.getValue(),ir.offset(n+2,0).getValue()]);
ir = ir.offset(1, 0);
}
var data = google.visualization.arrayToDataTable([
stored[]]);
/*I tried to also load data here directly as is seen on the pie chart example I used. This didn't have any affect*/
var options = { 'chartArea:backgroundColor': "Azure",
'is3D': true,
'title': 'Test Chart'};
//Now instantiate it
var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chartDiv" style="width: 450px; height: 300px;"> </div>
</body>
</html>
Any help appreciated.
Here is a quick example of how this can work. I stuck with the basic example and added the values from the pie chart example to the spreadsheet. The client side will need to call the server side to get the data. The is done with google.script.run. You would modify getData() to suite your needs.
code.gs:
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu("charts").addItem("piechart", "openPieChart").addToUi()
}
function openPieChart(){
var html = HtmlService.createHtmlOutputFromFile("piechart");
var ui = SpreadsheetApp.getUi();
ui.showModalDialog(html, "piechart")
}
function getData(){
return SpreadsheetApp.getActiveSheet().getDataRange().getValues()
}
piechart.html
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){google.script.run.withSuccessHandler(drawChart).getData()});
function drawChart(values) {
var data = google.visualization.arrayToDataTable(values);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Here is my code to create google chart from csv data. ANd also no error. But even chart does not appear.
Here is the documentation for which works: http://economistry.com/2013/07/easy-data-visualization-with-google-charts-and-a-csv/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// grab the CSV
$.get("Chart1-data.csv", function(csvString) {
// transform the CSV string into a 2-dimensional array
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
alert(arrayData);
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(arrayData);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
view.setColumns([0,1]);
// set chart options
var options = {
title: "A Chart from a CSV!",
hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
});
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Chart1-data.csv
Category,
A,34
B,23
C,14
D,57
E,18
Other,5
Do I missing anything in the code?
Good news: Your Code is fine! Your CSV file is the bottleneck.
Column names can't be null, means Category, => Category,''
No additional line breaks between data rows, means
A,34
B,23
=>
A,34
B,23
Result:
Category,''
A,34
B,23
C,14
D,57
E,18
Other,5
That is all! :)
There doesn't seem any kind of problem with this Google chart code snippet.
Though in browser console there are some Uncaught JavaScript errors.
Most importantly there is
" Uncaught null "error which is in reference to blank space after "Category" so Category, ' ' should work fine
I am trying to dynamically draw a chart based off a click on a fusion table layer/map. Whenever a state in Mexico is clicked, I would like the chart to change to reflect the value in columns 2007, 2008, 2009, and 2010. At the moment, this is not working. Firebug is telling me that 'a is undefined' but I don't really know what that means, as I have not declared a variable named 'a' and am assuming it's something in the Google script.
This is the code that I'm using. The click listener grabs the state name from the column named 'column_1' and then passes that to the draw visualization function:
google.maps.event.addListener(shownLayer, 'click',function(e){
stateName = e.row['column_1'].value;
drawVisualization(stateName);
});
function drawVisualization(stateName){
google.visualization.drawChart({
containerID: "textBox",
dataSourceUrl: "http://www.google.com/fusiontables/gvizdata?tq=",
query: "SELECT '2007','2008','2009','2010' " +
"FROM 3943497 WHERE column_1 = '" + stateName + "'",
chartType: "ColumnChart",
options: {
title: stateName,
height: 300,
width: 400
}
});
}
The map website is located here: https://mywebspace.wisc.edu/csterling/web/cartel%20map/index.html
containerID: "textBox",
is mispelled. Should be:
containerId: "textBox",
My suggestion was to get a basic static GVis chart working first before worrying about linking it to Fusion Tables and changing the chart based on a mouse click. I took the relevant parts of your script but could not get it to work. When you post your whole file it's very hard to separate the issues giving you problems from the rest of your code. This is what I extracted to test the basic GViz issue:
<!DOCTYPE html>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type='text/javascript'>
google.load('visualization','1', {packages: ['corechart'] });
window.onload = function () {
drawVisualization('Chiapas');
}
function drawVisualization(stateName){
google.visualization.drawChart({
"chartType": "ColumnChart",
"containerId": "textBox",
"dataSourceUrl": "http://www.google.com/fusiontables/gvizdata?tq=",
"query": "SELECT '2007','2008','2009','2010' " + "FROM 3943497 WHERE column_1 = '" + stateName + "'",
"options": {
title: stateName
}
});
}
</script>
</head>
<body>
<div id="textBox" style="width: 400px; height: 300px;"></div>
<br />
</body>
</html>
This application does not work. I'm getting displayed in the page:
"Bars series with value domain axis is not supported"
I can also see in your app that the stateName value you are using is "Chiapas, Mexico" but that is not the value shown in your Fusion Table column_1, "Chiapas" is a value there.