vAxis on a Bar Chart
109 views
Skip to first unread message
Ashley
Feb 5, 2012, 6:44:57 PM2/5/12
to Google Visualization API
This will probably be an impossible question to answer but I am trying
to create a bar chart where the vAxis appear as links to different
pages. In example, all the values that will appear in the vAxis are
different assets and I want to be able to create a link to each
asset's specific report html page. Is it possible to create links and
enable them to appear in the chart or would this be completely
impossible given the way google has built the chart tool?
I attempted doing this by trying to physically input the javascript
code to turn the variable printed into a link but all I'm able to see
in the google chart is <a href="http://www.google.com">This</a>. I
wanted the word "This" to be a link directly to the google site. Is
this possible?
Here's an example of what I've done so far:
<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();
var aName = "This";
data.addColumn('string', 'hjk');
data.addColumn('number', 'End of Life');
data.addRows([
[aName.link('http://www.google.com'), 1995],
['Is', 2000],
['An', 1999],
['Application', 2002]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new
google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
to create a bar chart where the vAxis appear as links to different
pages. In example, all the values that will appear in the vAxis are
different assets and I want to be able to create a link to each
asset's specific report html page. Is it possible to create links and
enable them to appear in the chart or would this be completely
impossible given the way google has built the chart tool?
I attempted doing this by trying to physically input the javascript
code to turn the variable printed into a link but all I'm able to see
in the google chart is <a href="http://www.google.com">This</a>. I
wanted the word "This" to be a link directly to the google site. Is
this possible?
Here's an example of what I've done so far:
<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();
var aName = "This";
data.addColumn('string', 'hjk');
data.addColumn('number', 'End of Life');
data.addRows([
[aName.link('http://www.google.com'), 1995],
['Is', 2000],
['An', 1999],
['Application', 2002]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new
google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
EZChart
Feb 6, 2012, 5:26:24 AM2/6/12
to google-visua...@googlegroups.com
No, this is not possible, the charts only know how to display simple text.
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
asgallant
Feb 6, 2012, 10:10:53 AM2/6/12
to google-visua...@googlegroups.com
If you are willing to get your hands dirty and dig into the SVG the chart is based on, you might be able to get this to work (note that IE < 9 do not use SVG, so this might not work for all browsers). You'll need to get the contents of the chart div's inner iframe, and search it for 'text' nodes. You can then assign a 'click' event listener to the nodes, and navigate to different URL's depending on the text node's contents. Something like this (with the help of some jQuery):
http://jsfiddle.net/yW7JM/
I stored the URL in the DataTable object, hid it with a DataView, and fetched it again by filtering the first column on the text node's value. Potential pitfalls are that you could have text nodes with duplicate data that trigger "links" where you don't want them or duplicate axis values that you want linked to different URLs. If you study the CSV closely, you might be able to find other features that discern axis labels from other text nodes and use those to filter the node selection even further, which would help avoid the first pitfall.
Reply all
Reply to author
Forward
0 new messages