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.
Related
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 have a bunch of sheets that I'm using to store the marks of my students for a couple of my classes. On my website, I am using HTML and Google's Query Language to pull info from the sheets (2 columns...the students numbers of each student and their mark). If I've edited the spreadsheet on any given day, the chart shows up properly, but if I have not edited it that day then it shows incorrect values for their marks or old values for their marks. I think it's something to do with the sheets, but I can't be sure.
Here's the HTML code from my site:
<html>
<head>
<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 query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?key=14mPTcYYraMyuBnEFSJW74ZQ3xjWSSOuDqoxB2VrvAvw&tq=select%20D%2C%20E%20where%20D%3C%3E%22Avatar%22%20order%20by%20E%20desc%20label%20E%20%22Experience%20Points%22');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
var options = {'title':'Experience Points',
'width':'927',
'height':'510',
'chartArea': {'left':'50', 'width':'90%'},
legend: { position: 'top', maxLines: 2 },
hAxis: {showTextEvery: 1, slantedText: true, slantedTextAngle: 90, viewWindow:{max:33}},
bar:{groupWidth: '60%'},
isStacked: true};
chart.draw(data, options);
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id='columnchart'></span>
</body>
</html>
Any ideas? By the way, the sheet is set so that anyone on the internet can find and view.
I am working on Google-visualization chart. I would like that when i select particular area of chart i can zoom that particular selected area. I would also like it to do the same with line chart, bar chart, pie chart
<!DOCTYPE html>
<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", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Company1');
data.addColumn('number', 'Company2');
data.addColumn('number', 'Company3');
data.addColumn('number', 'Company4');
data.addColumn('number', 'Company5');
data.addColumn('number', 'Company6');
data.addRows([
['Feb 1, 2012 - Feb 28, 2012', 10, 10, 5, 15, 10, 55]
]);
data.addRows([
['Mar 1, 2012 - Mar 31, 2012', 10, 10, 5, 15, 10, 55]
]);
var options = {
title: 'Total Reviews',
hAxis: {title: '', titleTextStyle: {color: 'blue'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('total'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection()[0];
var label = data.getColumnLabel(selection.column);
// alert(label); //SOMETHING GOES HERE TO MAKE IT ZOOOM
})
}
</script>
</head>
<body>
<div id="total" style="width: 600px; height: 400px;"></div>
</body>
</html>
As far as I know, and looking through the config options, you should be able to use an option called explorer
// before you pass the options to the drawing function
options.explorer = {
actions: ['dragToZoom', 'rightClickToReset']
/* you can add more options */
}
Please take a look at the explorer and other options in the line chart API and read the notes
Note: The explorer only works with continuous axes (such as numbers or dates).
So your example domain column data must be transformed into actual Date objects, and your first column should be defined as
data.addColumn('date','Date');
or my preferred way
data.addColumn({role:'domain', type:'date', label:'Date'});
If you do this you have to use explorer.actions . In Google Area chart
The Google Charts explorer supports three actions
dragToPan: Drag to pan around the chart horizontally and vertically.
To pan only along the horizontal axis, use explorer: { axis: 'horizontal' }. Similarly for the vertical axis.
dragToZoom: The explorer's default behavior is to zoom in and out when the user scrolls. If explorer: { actions: ['dragToZoom', 'rightClickToReset'] } is used, dragging across a rectangular area zooms into that area. Google recommend using rightClickToReset whenever dragToZoom is used. See
explorer.maxZoomIn, explorer.maxZoomOut, and explorer.zoomDelta for zoom customizations.
rightClickToReset: Right clicking on the chart returns it to the original pan and zoom level
More details Google Area Chart Customize
I am using Google Line Chart for my project. I need to manipulate points on the line chart based on the values. For example, if the value is less then 170 then it shows default point on line chart and if it is greater then 170, it should show different point on the line chart. how should i put different color for points in the line chart for one series? Here is my code:
<html>
<head>
<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', 'Record'],
['4/1', 165],
['4/2', 160],
['4/3', 163],
['4/4', 173]
]);
var options = {
title: 'Line Chart', pointSize : 5 };
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>`enter code here`
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Plese help me on this.
You cannot color points individually using the current Google Visualization API. Any coloring must be done with separate series.
In your case, you can achieve the desired result with a workaround. Here is what I presume you want:
This code should give you the result you want:
<html>
<head>
<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 = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Line');
data.addColumn('number', 'Under 170');
data.addColumn('number', 'Over 170');
data.addRows([
['4/1', 165, 165, null],
['4/2', 160, 160, null],
['4/3', 163, 163, null],
['4/4', 173, null, 173]
]);
var options = {
title: 'Line Chart',
pointSize : 5,
series: [{color: 'black', pointSize: 0}, {color: 'red', lineWidth: 0}, {color: 'blue', lineWidth: 0}]
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>`enter code here`
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Basically, what you have to do is:
Create 3 different series
One for the line (no points shown)
One for the points <170 (color 1)
One for the point >=170 (color 2)
Add all data values to series 1 (so there is a solid line)
Add points to series 2 that are <170, with all other values as null
Add points to series 3 that are >=170, with all other values as null
You can then use the series option to format the chart. The first series will determine the line color. The second series will determine the color for points <170. The third series will determine the color for point >=170.
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!