The axis labels do not support HTML tags. You can register an event
handler for the "click" event on the chart and parse the event details to
determine if an axis label was clicked, and then perform whatever actions
are required as a result of clicking the label. Here's an example:
google.visualization.events.addListener(chart, 'click', function (e) {
// match the targetID of the clicked element to an hAxis label
// and capture the index of the label if matched
var match = e.targetID.match(/hAxis#\d+#label#(\d+)/);
if (match) {
var rowIndex = parseInt(match[1]);
var axisLabel = data.getValue(rowIndex, 0);
// do something with the rowIndex and/or axisLabel
}
});
see it working here: http://jsfiddle.net/asgallant/fwGmS/
On Thursday, October 10, 2013 9:20:07 AM UTC-4, Colm McLaughlin wrote:
>
> I'm using google charts in a website and want to make the column names
> into links rather than strings.
> But when I put the <a href etc> tags into the chart it displays them as
> strings.
> I have set {allowHtml:true} but still no luck displays the column name as
> <a href="http://www.w3schools.com";>Visit W3Schools</a>' rather than Visit
> W3Schools and is a string not a link.
> The code I am using is as follows:
>
> <script type="text/javascript">
> function drawVisualization() {
> // Create and populate the data table.
>
> var data = google.visualization.arrayToDataTable([
> ['Job State', 'Job Numbers'],
> ['<a href="http://www.w3schools.com";>Visit
> W3Schools</a>', @Model.jobCount],
> ['<a href="http://www.w3schools.com";>Visit
> W3Schools</a>', @Model.liveJobCount],
> ['<a href="http://www.w3schools.com";>Visit
> W3Schools</a>', @Model.draftJobCount],
> ['<a href="http://www.w3schools.com";>Visit
> W3Schools</a>', @Model.closedJobCount]
> ]);
>
> // Create and draw the visualization.
> new
> google.visualization.ColumnChart(document.getElementById('visualization')).
> draw(data,{allowHtml:true},
> {title:"Current Jobs Statuses",
> width:600, height:400,
> hAxis: {title: "Job Type"}}
> );
>
> }
>
>
> google.setOnLoadCallback(drawVisualization);
> </script>
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
