Google Visualisation Bar Chart enabling html tags

[Colm McLaughlin]

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>

[asgallant]

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/