Search code examples
javascriptdygraphs

more than 2 y axis in dygraphs


Looking through the documentation, I haven't been able to determine if Dygraphs can support more than 2 y axis on the graph outputs? I need to graph a lot of curves with many different axis ranges.


Solution

  • It seems to be possible. This example seems to be using it by using axes and some other options ('labelName': { axis: {} } seems to create another Y-axis), altho I haven't found it in the docs.

    But when trying to use more than two Y-axes I saw this message in the log:

    dygraphs: Only two y-axes are supported at this time. (Trying to use 3) (stacktrace.js:31:25)
    

    Code from the example:

    g = new Dygraph(
        document.getElementById("demodiv"),
        data, {
            labels: ['Date', 'Y1', 'Y2', 'Y3', 'Y4'],
            width: 640,
            height: 350,
            'Y3': {
                axis: {}
            },
            'Y4': {
                axis: 'Y3' // use the same y-axis as series Y3
            },
            xAxisLabelWidth: 100,
            yAxisLabelWidth: 100,
            axes: {
                x: {
                    valueFormatter: function(ms) {
                        return 'xvf(' + new Date(ms).strftime('%Y-%m-%d') + ')';
                    },
                    axisLabelFormatter: function(d) {
                        return 'xalf(' + d.strftime('%Y-%m-%d') + ')';
                    },
                    pixelsPerLabel: 100,
                },
                y: {
                    valueFormatter: function(y) {
                        return 'yvf(' + y.toPrecision(2) + ')';
                    },
                    axisLabelFormatter: function(y) {
                        return 'yalf(' + y.toPrecision(2) + ')';
                    }
                },
                y2: {
                    valueFormatter: function(y2) {
                        return 'y2vf(' + y2.toPrecision(2) + ')';
                    },
                    axisLabelFormatter: function(y2) {
                        return 'y2alf(' + y2.toPrecision(2) + ')';
                    }
                }
            }
        }
    );