Re: Custom Axis Labels - Displaying wind direction degree's 0-360 as N\NW\W etc

[asgallant]

Sorry, this is not possible.

On Wednesday, October 17, 2012 11:25:00 AM UTC-4, James Burrow wrote:

Hi,

I would like to have a yaxis labels on my chart of wind direction from my weather station. I can have a custom formatter for the tooltip, but i am unable to figure out a way to show text labels on the Y axis as opposed to the degrees.

Any suggestions on how this can be achieved...

Thanks

[James Burrow]

It is possible with a the help of a little JQuery; I have written a blog post on how to do this http://anonadventure.wordpress.com/2012/10/20/custom-axis-labels-google-charting-work-around/

I have also upload a simple html page that does it.

[James Burrow]

I have applied this solution to my weather station website - You can see the live chart here  [ enable direction ] 

http://isitblowing.appspot.com/

[asgallant]

Clever solution!  Might I make a small suggestion for improvement?  Move the jQuery into a 'ready' event handler for the chart - this will ensure that the chart is done drawing before you try to change the axes.  Also, this code won't work in IE < 9.  Older versions of IE use VML instead of SVG, and they put the chart code in an iframe, so you have to modify your code to account for that.  I don't have access to older versions of IE to test with right now, but this is the basis of what you should try:

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function() {
    // Use JQuery to find all the svg elements which have our marker... then replace the numeric value with our String
    if ($.browser.msie && $.browser.version < 9) {
        // handle older verserions of IE
        $('#chart_div').find('iframe').contents().(/* selector for VML text element */).each(function(label, index) {
            val = $(this).text().replace(MARKER, '')
            $(this).text(toDir[val]);
        });
    }
    else {
        // handle all other browsers
        $("text:contains('" + MARKER + "')").each(function(label, index) {
            val = $(this).text().replace(MARKER, '')
            $(this).text(toDir[val]);
        });
    }
    
});
chart.draw(dataTable, options);

[James Burrow]

Hey - I wasn't aware of that - that's cool.

I will update my code as you suggest.

Thank you

[James Burrow]

Hey - I wasn't aware of that - that's cool.

I will update my code as you suggest.

Thank you

On Saturday, 20 October 2012 19:51:19 UTC+1, asgallant wrote:

[James Burrow]

I have finally got round to uploading a working version on html page - using new google drive webhosting ;)

https://googledrive.com/host/0ByEb-6oBstAeam5IV21xVEhwRXM/GoogleChartingCustomAxisLabels.html