axisLabelFormatter formatting

[TravisStude]

Hi,

I am attempting to put a time series into a dygraph. I have dates on the x axis.  I would like the dates in month/day/year format.  I have been able to do that with the following code, please see my code on jsFiddle HERE.  However I am running into a few problems.  First, the dates do not display fully, they are cut off.  Second, I cannot control the granularity.  Using Dygraph.getDateAxis(a, b, Dygraph.MONTHLY, opts, dygraph), I can control the granularity, but I cannot figure out how to control the format.  Can you point me to how to control both the granularity (ie i would like to display tickers for each month) and how to use built in functionality to work with date formatting.

Thank you for your help,

TJ

[Dan Vanderkam]

You can avoid the issue of labels being cut off by increasing the "xAxisLabelWidth" option (http://dygraphs.com/options.html#xAxisLabelWidth)

By default, dygraphs will choose an appropriate tick granularity for you based on the size of the chart and the size of the visible range. If you want to control the granularity of the ticks yourself, you can pass in your own ticker function. This is an advanced customization which is not particularly well documented. But you can check out http://dygraphs.com/options.html#ticker to get started.

Hope this helps,

  - Dan

[TravisStude]

Thank you the xAxisLabelWidth worked perfectly.  The ticker does modify the granularity, but I still see a format that is not month/day/year unless I custom code that.  I have done the following.   I may be fine with the second option in the end though, the main issue was the label width.

Thanks again,

TJ

//For the granularity of the ticker (does not show correct format)

axes: {

                                x: {

                                    ticker: function (a, b, pixels, opts, dygraph, vals) {

                                        return Dygraph.getDateAxis(a, b, Dygraph.MONTHLY, opts, dygraph);

                                    }

                                }

                            }

//For the format (does not show correct granularity)  

axes: {

                                x: {

                                    valueFormatter: function (val, opts, series_name, dygraph) {

                                        var x = toDateTime(val);

                                        return formatDate(x);

                                    },

                                    axisLabelFormatter: function (val, granularity, opts, dygraph) {

                                        return formatDate(toDateTime(val));

                                    }

                                }

                            }

[Dan Vanderkam]

You could combine both options (set ticker, valueFormatter and axisLabelFormatter). Would that do what you'd like?

  - dan

[TravisStude]

When I try that I see one date locally (looks like annual), and no dates on jsFiddle (LINK).  There is less data  I have tried Dygraph.MONTHLY, Dygraph.WEEKLY, and Dygraph.DAILY for the granularity.

Thank you for your help, it is very appreciated.

-TJ

[TravisStude]

Scratch that last post, I copied old code.  The ticker was in the wrong place.  Let me test a few minutes.

ticker: function (a, b, pixels, opts, dygraph, vals) {

                             return Dygraph.getDateAxis(a, b, Dygraph.MONTHLY, opts, dygraph);

                         },

                         x: {

                             valueFormatter: function (val, opts, series_name, dygraph) {

                                 return formatDate(toDateTime(val));

                             },

                             axisLabelFormatter: function (val, granularity, opts, dygraph) {

                                 return formatDate(toDateTime(val));

                             }

                         }

Thanks,

TJ

[TravisStude]

I think I see what is going on.  In my code I have the seconds from epoch, dygraph.tickers.js getDateAxis is using milliseconds

t = Dygraph.dateStrToMillis(date_str);

                if (t < start_time || t > end_time) continue;

                ticks.push({ v: t,

                    label: formatter(new Date(t), granularity, opts, dg)

                });

Therefore when my time is compared to the milliseconds it never gets to the ticks.push.  I will modify my code to work with milliseconds.  Not sure why I did seconds in the first place lol.

Thanks,

TJ

[TravisStude]

Gotta love those mundane decimal point details ;).  It's all working now label width, granularity, and format.  Here is the final code for anyone else that might run into similar issues.  

Thank you again Dan,

-TJ

<script type="text/javascript">

    $(document).ready(function () {

        $.get('/Home/GetTsStringData', {}, function (data) {

            var g4 = new Dygraph(

                        document.getElementById("graphdiv"),

                        data[1],

                        {

                            xAxisLabelWidth: 80,

                            axes: {

                                x: {

                                    ticker: function (a, b, pixels, opts, dygraph, vals) {

                                        return Dygraph.getDateAxis(a, b, Dygraph.DECADAL, opts, dygraph);

                                    },

                                    valueFormatter: function (val, opts, series_name, dygraph) {

                                        debugger;

                                        return formatDate(toDateTime(val));

                                    },

                                    axisLabelFormatter: function (val, granularity, opts, dygraph) {

                                        debugger;

                                        return formatDate(toDateTime(val));

                                    }

                                }

                            }

                        }

                    );

        });

    });

    function toDateTime(millisecs) {

        var t = new Date(millisecs);

        return t;

    }

    function formatDate(x) {

        var month = x.getMonth() + 1;

        var day = x.getDate();

        var year = x.getFullYear();

        return month + "/" + day + "/" + year;

    }

</script>

On Wednesday, August 15, 2012 12:05:59 PM UTC-6, TravisStude wrote:

[Dan Vanderkam]

Glad you got it working!

  - Dan

[Abigail-Joy Low]

Hi Dan,

This solution worked perfectly for me to choose the tickers for my Dygraph. I choose my tickers to appear every month, however, when I change the dateRange to be displayed, the xlabels become too crowded and I would prefer if only a few of them showed up. Here is my code:

getMonth <- 'function(d){

            var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

            var day = d.getUTCDate();

            var month = d.getMonth();

            var year = d.getYear()-100;

            return monthNames[d.getMonth()] + year;

             }'  

getMonthDay <- 'function(d) {

              var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

              date = new Date(d);

              return monthNames[date.getMonth()] + " " +date.getFullYear(); }'

tickMonth<- 'function (a, b, pixels, opts, dygraph, vals) {

  return Dygraph.getDateAxis(a, b, Dygraph.MONTHLY, opts, dygraph);

}'

dygraph(shopping, main="Monthly", xlab="Date", ylab="Index") %>% dyAxis("x", valueFormatter=JS(getMonthDay), axisLabelFormatter=JS(getMonth), ticker=JS(tickMonth), pixelsPerLabel=50, rangePad=20, drawGrid = FALSE) %>% dyAxis("y", valueRange = c((min(selecteddates$Index)-3), (max(selecteddates$Index)+3))) %>% dyLegend(show="onmouseover", width=200) %>% dyOptions(axisLabelFontSize=10) 

It seems like once I choose the tickers, pixelsPerLabel is ignored fully.

[Dan Vanderkam]

Yep, that's correct. Once you write your own ticker, choosing an appropriate number of labels is your responsibility.

--
You received this message because you are subscribed to the Google Groups "dygraphs-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dygraphs-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.