I'm trying to use google visualization api in jboss seam 2 project.
I have created a simple example which is actually taken from Google Quick Start page.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
When I open it as file in web browser it works nicely. But when I put it to my Jboss Seam 2 project and open in web browser, it generates an error message "b[c] is undefined" on red background.
And here what I see when I open page source in browser:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/MCMS/a4j/g/3_3_3.Final/org/ajax4jsf/framework.pack.js" type="text/javascript"></script>
<script src="/MCMS/a4j/g/3_3_3.Final/org/richfaces/ui.pack.js" type="text/javascript"></script>
<link class="component" href="/MCMS/a4j/s/3_3_3.Final/org/richfaces/skin.xcss/DATB/eAGTKJ8eErp8hjQADcsDKg__" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
As you can see Jboss Seam adds some other script srcs for a4j.
Is it possible that a4j javascript conflicts with google visualization api javascript?
Is there any idea how to resolve this?
Finally found the solution here
Google charts error:Cannot read property 'length' of undefined; Debugging error in Google Charts
and here
http://code.google.com/p/google-visualization-api-issues/issues/detail?id=501 .
Adding the following hack in the beginning of the script:
Array.prototype.reduce = undefined;
or more gracefully:
Array.prototype.reduce=function(fun){var len=this.length>>>0;if(typeof fun!="function")throw new TypeError;if(len==0&&arguments.length==1)throw new TypeError;var i=0;if(arguments.length>=2)var rv=arguments[1];else{do{if(i in this){var rv=this[i++];break}if(++i>=len)throw new TypeError;}while(true)}for(;i<len;i++)if(i in this)rv=fun.call(undefined,rv,this[i],i,this);return rv};
solves the problem!
Related
In this example google charts table is given a date of 1/1/16 and displays 12/31/15. Do I need to use some kind of timezone or something?
<div id="chart"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart', 'table']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'dt');
data.addRows([[new Date("2016-01-01")]]);
var view = new google.visualization.DataView(data);
var table = new google.visualization.Table(document.getElementById('chart'));
table.draw(data);
}
</script>
not related to google-visualization, the real answer is here...
Why does Date.parse give incorrect results?
use format such as '01/01/2016' to get expected results...
I'm using the Google visualization chart in my application for drawing a line chart. It works great except one thing in the hAxis the entered number converts itself to thousands like below. I know this is happening because im trying to display huge numbers but still i would like to know if there is way to get around this?
Code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Degree Level');
data.addColumn('number', 'Graduate or professional degree');
data.addColumn('number', "Bachelor's degree");
data.addColumn('number', "Associate's degree");
data.addColumn('number', "High school or vocational training");
data.addRows([
[2, 39758,93179, 78578,49141],
[3, 100747, 300646, 220982,100456],
[4, 49964, 68022, 21092,6943],
[5, 150370, 124868, 27120,8204]
]);
var options = {
chart: {
title: 'Education Report',
subtitle: 'distributed by experience'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="linechart_material"></div>
</body>
</html>
Output
Can someone let me know how can i make the hAxis to display in number?
There are two solutions to get the format that you want.
Either you use version 1 of the corecharts package :
so load the package like this :
// instead of : google.load('visualization', '1.1', {packages: ['line']});
google.load('visualization', '1', { packages: ['corechart'] });
and call your chart like this :
// instead of : var chart = new google.charts.Line(document.getElementById('linechart_material'));
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
And you'll get what you want.
See a demo jsfiddle here.
Or alternatively,
Use version 1.1 of the package (you already do in your example) like this :
google.load('visualization', '1.1', {packages: ['line']});
and then specify in your chart options the vAxis format like this :
vAxis: { format: '###,###,###' },
and load the chart this way, so that the vAxis settings are taken into account :
chart.draw(data, google.charts.Line.convertOptions(options));
That'll work too.
See a demo jsfiddle here.
The problem here is that the way options are defined has changed from v.1 to v.1.1. So if you want to use the v.1.1 package you have to call google.charts.Line.convertOptions() for your options to be interpreted correctly.
I want to plot a Google Graph to visualize the results of a query.
Can anyone please help me ? I have included my code below. Thanks
models.py
class InventoriesApplication(models.Model):
ROADMAPS = (
('R', 'Retire'),
('SU', 'Sustain'),
('ST', 'Strategic')
)
app_name = models.CharField(max_length=45)
roadmap = models.CharField(max_length=2, choices=ROADMAPS, null = True)
views.py
import json
I used the following code to serialize my query:
def render_chart(request):
total= InventoriesApplication.objects.values("roadmap").annotate(total=Count('id'))
return HttpResponse(json.dumps(list(total), cls=DjangoJSONEncoder),content_type='charts.html')
and now I have the following array:
charts.html
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable({{ total }});
// Set chart options
var options = {'title':'Roadmaps'};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
...
this is my code:
<html>
<title>report</title>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function soso(){
var data_flow = new google.visualization.DataTable();
data_flow.addColumn('string', 'Version');
data_flow.addColumn('number','flow');
data_flow.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options = {width: 2200, height: 540,title: ''};
var chart_flow= new google.visualization.LineChart(document.getElementById('checkin-column'));
chart_flow.draw(data_flow, options);
}
function loveu()
{
var data_flow_1 = new google.visualization.DataTable();
data_flow_1.addColumn('string', 'Version');
data_flow_1.addColumn('number','flow');
data_flow_1.addRows([['20120125',466.0],['20120130',173.0],['20120203',160.0],['20120208',529.0],['20120213',210.0]]);
var options5 = {width: 2200, height: 540,title: ''};
var chart_flow_1= new google.visualization.LineChart(document.getElementById('redemption-table'));
chart_flow_1.draw(data_flow_1, options5);
}
function drawChart() {
soso();
loveu();
}
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<h4>dfs</h4><br>
<br><br>
<div id="checkin-column"></div>
<p></p>
<div id="redemption-table"></div>
</body>
</HTML>
When I delete: "< h4 > dfs < / h4 >" I get the charts working fine in iexplorer, but when I don't delete it, the first chart work fine but the second one the axis of it doesn't appear!! Try it and you will see that (on Internet Explorer).
I need a help in solving this issued, I am facing strange behavior of these charts when there is more than one in the same page
Problem: I have 3 charts on a page but the axis for the 3rd chart are not showing in IE
Resolution: I have the 3 divs as separate rows in a table and all 3 charts are now showing their axis!
Hope this helps.
Cheers
Is it possible to attach an onclick method to the elements within a Google Visualization line chart? For example, if a user clicks on point within the chart I want to send the user to a page with more details. I've gone all through the documentation and can't find an example of how to do this.
I see that there are methods for events (from the documentation) but with no clear example it's not making much sense.
Thanks!
You can do this using a 'select' event, which will be triggered each time a user clicks on a point on the line chart. I've included a working example below, including the redirect with a couple of values. The Google code playground has a nice example of how to use event handlers on a table - the same type of functionality can be used across most of the visualizations.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['barchart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
});
// a click handler which grabs some values then redirects the page
google.visualization.events.addListener(chart, 'select', function() {
// grab a few details before redirecting
var selection = chart.getSelection();
var row = selection[0].row;
var col = selection[0].column;
var year = data.getValue(row, 0);
location.href = 'http://www.google.com?row=' + row + '&col=' + col + '&year=' + year;
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
getSelection().column is not working, it return an "unknown" value. The issue was posted in the Google Visualization API bug reports page.