X axis number formating

55 views
Skip to first unread message

skibool

unread,
Feb 7, 2018, 4:16:08 AM2/7/18
to dygraphs-users
Hello, 

Is it possible to format numbers on X axis. After zooming I get numbers like 3.40000000000004  etc. Please see the attached image. Another question, is it possible to add two additional lines to the dygraphs plot to have it in the rectangular (marked on blue)? 

Regards Grzegorz 
plot.PNG

Bánhidi István

unread,
Feb 7, 2018, 5:30:27 AM2/7/18
to dygraph...@googlegroups.com
Hi skibool,

First question:
Of course yes, you can customize your X axis with your own functions in dygraphs config, like this:
                    axes: {
                        x: {
                            valueFormatter: function (val) {
                                return formatDate_Value(toDateTime(val));
                            },
                            axisLabelFormatter: function (val) {
                                return formatDate_Label(toDateTime(val));
                            }
                        }
                    }

After that you need create your own functions, like these:
            function formatDate_Label(x) {
                var year = x.getFullYear();
                var month = x.getMonth() + 1;
                var day = x.getDate();
                var hour = x.getHours();
                var minute = x.getMinutes();
                var second = x.getSeconds();
                month = (month < 10 ? "0" + month : month);
                day = (day < 10 ? "0" + day : day);
                hour = (hour < 10 ? "0" + hour : hour);
                minute = (minute < 10 ? "0" + minute : minute);
                second = (second < 10 ? "0" + second : second);

                return month + "." + day + " " + hour + ":" + minute;
            }

            function formatDate_Value(x) {
                var year = x.getFullYear();
                var month = x.getMonth() + 1;
                var day = x.getDate();
                var hour = x.getHours();
                var minute = x.getMinutes();
                var second = x.getSeconds();
                month = (month < 10 ? "0" + month : month);
                day = (day < 10 ? "0" + day : day);
                hour = (hour < 10 ? "0" + hour : hour);
                minute = (minute < 10 ? "0" + minute : minute);
                second = (second < 10 ? "0" + second : second);

                return year + "." + month + "." + day + " " + hour + ":" + minute + ":" + second;
            }


Thats all!


Second question:
I don't understand what do you want? Can you explain me, more details please!
Because I saw three blue lines and one red line on top and right side of your picture!

Steve

--
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-users+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

skibool

unread,
Feb 8, 2018, 9:23:40 AM2/8/18
to dygraphs-users
Hi Steve, 

Thank you for answering my question. Sorry for the unclear second question. I've attached another picture with 2 plots - the top one is the desired with two additional lines - on right and top - it was edited in PAINT. The plot on the bottom is standard dygraphs. 

Is it possible to have such plot appearance? 
To unsubscribe from this group and stop receiving emails from it, send an email to dygraphs-user...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages