Display label at beginning and end of x-axis only

[Tim Duffy]

Hello dygraph-users,

I am using dygraphs to display dynamically updating data.  I would like to only display the labels on the x-axis at the far left and far right of the axis.  I have fiddled with a number of the options outlined in the Options Reference ( http://dygraphs.com/options.html ), however no number of combinations appears to resulting in what I am looking for.  Here is my creation code:

var tracelabels = ['Sample Index','Va','Vb','Vc','ILoad','Qd','Qa'];

var tracecolors = ['#FF0000','#00FF00','#0000FF','#00008B','#006400','#800080'];

function newGraph() {

    var g1 = new Dygraph(

        document.getElementById("graph"),

        graphData,

        { 

            drawGrid: false,

            //pixelsPerLabel: 200,

            labelsDivStyles: { 'textAlign': 'right' },

            showRangeSelector: showRangeSelecter,

            valueRange: [1,1000],

            labelsDiv: document.getElementById('legend'),

            labels: tracelabels,

            colors: tracecolors,

            axes: {

                x: {

                   // magic missing here

                } 

            }

            

        });

    return g1;

}

I tried to fiddle with the pixelsPerLabel option, however that does not force the label to the far left and/or right.  Any insight or a 'trick of the trade' would be greatly appreciated.  Thank you very much for your time.

-TD

--

Tim Duffy

585-210-8353

http://timduffy.me/

@arbiterofbits

[Tim Duffy]

For those who may come across this question, this was my solution below.  The answer was using the ticker option and creating an array of just two points (the first and the last).

function pad2(val) {

    var retVal = '' + val;

    if ( val.length == 1 ) {

        retVal = '0' + val;

    }

    return retVal;

}

function pad3(val) {

    var retVal = '' + val;

    if ( val.length == 2 ) {

        retVal = '0' + val;

    }

    else if ( val.length == 1 ) {

        retVal = '00' + val;

    }

    return retVal;

}

function getDateTime(value) {

    var d = new Date( (value / SECOND_CYCLE_COUNT ) * 1000 );

    

    var day = pad2(d.getDate());

    var month = d.getMonth();

    month = pad2(month + 1); // because zero based month count

    var year = pad2(d.getFullYear());

    

    var displayDate = month + "/" + day + "/" + year;

    

    var hour = pad2(d.getHours());

    var min = pad2(d.getMinutes());

    var sec = pad2(d.getSeconds());

    var msec = pad3(d.getMilliseconds());

    

    var displayTime = hour + ":" + min + ":" + sec + "." + msec;

    

    return { 'date': displayDate, 'time': displayTime };

}

function newGraph() {

    g1 = new Dygraph(

        document.getElementById("graph"),

        graphData,

        { 

            drawGrid: false,

            xAxisLabelWidth: 100,

            showRangeSelector: showRangeSelecter,

            valueRange: [1,1000],

            labelsDiv: document.getElementById('legend'),

            labels: tracelabels,

            colors: tracecolors,

            axes: {

                

                x: {

                    

                    ticker: function(a, b, pixels, options_view, dygraph, forced_values) {

                        

                        var dt0 = getDateTime(a);

                        var startLabel = dt0['date'] + "\n" + dt0['time'];

                        

                        var dt1 = getDateTime(b);

                        var endLabel = dt1['date'] + "\n" + dt1['time'];

                        

                        return [ {v: a, label: startLabel}, {v: b, label: endLabel} ];

                    },

                    valueFormatter: function(value) {

                        var dt = getDateTime(value);

                        return dt['date'] + " " + dt['time'];

                    }

                },

                

            }

            

        });

    

    return g1;

}

-TD

[Dan Vanderkam]

Cool, thanks for the code! Glad you got it working.

--
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.