CODEWITHSUNDEEP
formatjqplotaxis
user930514
user930514

Reputation: 927

format y axis ticks/values in jqplot

I found the following thread very useful

http://groups.google.com/group/jqplot-users/browse_thread/thread/1986...

I would like to get all the y axis values or ticks in an array...My intention is to count the number of digits in each of the ticks and find the most frequent number of digits. Based on that im planning to truncate number of digits in the y axis ticks/values. For example : if most of the ticks have 6 digits, truncate to 3 digits and append the word (in Thousands) to the axis label.

How can i achieve this? In the below function i can get the ticks one by one...but i need to get them in advance so that i can decide by what factor to truncate the number.Please ignore the function numberwithCommas.Its just an example.

(function($) {
    $.jqplot.tickNumberFormatter = function (format, val) {
        if (typeof val == 'number') {
            if (!format) {
                format = '%.1f';
            }
            return numberWithCommas($.jqplot.sprintf(format, val));
        }
        else {
            return String(val);
        }
    };

    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
    }

@Boro : Thank you so much for the reply. Could you please let me know what this line does exactly? 

   var ticks = $('.jqplot-' + axisName + '-tick');

The same line isn't working in my code. How can I use it?

Can I use it to push all ticks into an array before the control enters the formatter? In other words, can I get all the ticks before the control enters the following function?

   $.jqplot.tickNumberFormatter = function (format, val) {

The following code works brilliantly in your example. Why doesn't it work in mine :(

                var axisName = 'yaxis';
                var count = 0;
                var ticks = $('.jqplot-' + axisName + '-tick');
                for (count = 0; count <= ticks.length; count++)
                    {

                console.log($(ticks[count]).text());
                    }

Upvotes: 2

Views: 5759

Answers (1)

Boro
Boro

Reputation: 7943

At first I thought it would be as easy as taking the values from the plot itself using a similar approach as here. Thus, I created a sample which on click on any bar loops around the selected axis ticks. The problem with this one is that we are using 'private' variable _ticks as the ticks one is an empty array (since it must be explicitly set). This approach would not work, for example, with xaxis where we set the ticks variable.

Therefore, to get all ticks, independently from them being set by you or not, I would use jQuery and grab them whenever you need them, as presented in this code. Though, thinking about it, if the formatter acts before the plot is finished the HTML elements might not be there yet to grab them, but you can test it yourself. If this approach does not work you can always adapt the first approach to act differently depending on the ticks being set or not.

EDIT in response to OP's EDIT:

Could you please let me know what this line does exactly?

Here I use jQuery to capture ticks for axis specified by its name (axisName). For this before I use it I specify the var axisName = 'yaxis'; variable. You could substitute it with: var ticks = $('.jqplot-yaxis-tick');

As it goes to the rest of your questions it might be the case that I am mentioning towards the end of my first answer, i.e. if the formatter acts before the plot is finished the HTML elements might not be there yet to grab them.

EDIT2:

Check out this sample. It grabs the ticks inside the formatter, as you could observe there sometimes they are zero probably because the formatter is called before the ticks HTML elements are created. Therefore, just apply your algorithm when there are some ticks otherwise apply default formatting, see if this approach will work.

It still might not work as we do not know what is happening, for example, why in the console we have the ticksNoZeroCounter variable equal 20 which represents a number of times the formatter was called and ticks.size() !== 0. Why the variable is not equal to 21 or to some other number divisible by 7 (i.e. the number of ticks)?

Upvotes: 3

Related Questions