var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);
g.updateOptions({
- xAxisLabelFormatter: function (totalMinutes) {
- var hours = Math.floor( totalMinutes / 60);
- var minutes = Math.floor((totalMinutes - (hours * 60)));
- var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
+ axes : {
+ x : {
+ axisLabelFormatter: function (totalMinutes) {
+ var hours = Math.floor( totalMinutes / 60);
+ var minutes = Math.floor((totalMinutes - (hours * 60)));
+ var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
- if (hours < 10) hours = "0" + hours;
- if (minutes < 10) minutes = "0" + minutes;
- if (seconds < 10) seconds = "0" + seconds;
+ if (hours < 10) hours = "0" + hours;
+ if (minutes < 10) minutes = "0" + minutes;
+ if (seconds < 10) seconds = "0" + seconds;
- return hours + ':' + minutes + ':' + seconds;
+ return hours + ':' + minutes + ':' + seconds;
+ }
+ }
}
});
var opts = {
width: 480,
height: 320,
- xAxisLabelFormatter: function(x, granularity, opts, dg) {
- assertEquals('number', typeof(x));
- assertEquals('number', typeof(granularity));
- assertEquals('function', typeof(opts));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'x' + x;
- },
- yAxisLabelFormatter: function(y, granularity, opts, dg) {
- assertEquals('number', typeof(y));
- assertEquals('number', typeof(granularity));
- assertEquals('function', typeof(opts));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'y' + y;
+ axes : {
+ x : {
+ axisLabelFormatter: function(x, granularity, opts, dg) {
+ assertEquals('number', typeof(x));
+ assertEquals('number', typeof(granularity));
+ assertEquals('function', typeof(opts));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'x' + x;
+ }
+ },
+ y : {
+ axisLabelFormatter: function(y, granularity, opts, dg) {
+ assertEquals('number', typeof(y));
+ assertEquals('number', typeof(granularity));
+ assertEquals('function', typeof(opts));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'y' + y;
+ }
+ }
},
labels: ['x', 'y']
};
var opts = {
width: 480,
height: 320,
- xAxisLabelFormatter: function(x, granularity, opts, dg) {
- assertTrue(Dygraph.isDateLike(x));
- assertEquals('number', typeof(granularity));
- assertEquals('function', typeof(opts));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'x' + Util.formatDate(x);
- },
- yAxisLabelFormatter: function(y, granularity, opts, dg) {
- assertEquals('number', typeof(y));
- assertEquals('number', typeof(granularity));
- assertEquals('function', typeof(opts));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'y' + y;
- },
- axes: {
- x: { pixelsPerLabel: 60 }
+ axes : {
+ x : {
+ axisLabelFormatter: function(x, granularity, opts, dg) {
+ assertTrue(Dygraph.isDateLike(x));
+ assertEquals('number', typeof(granularity));
+ assertEquals('function', typeof(opts));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'x' + Util.formatDate(x);
+ },
+ pixelsPerLabel: 60
+ },
+ y : {
+ axisLabelFormatter: function(y, granularity, opts, dg) {
+ assertEquals('number', typeof(y));
+ assertEquals('number', typeof(granularity));
+ assertEquals('function', typeof(opts));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'y' + y;
+ }
+ }
},
labels: ['x', 'y']
};
var opts = {
width: 480,
height: 320,
- xValueFormatter: function(x, opts, series_name, dg) {
- assertEquals('number', typeof(x));
- assertEquals('function', typeof(opts));
- assertEquals('string', typeof(series_name));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'x' + x;
- },
- yValueFormatter: function(y, opts, series_name, dg) {
- assertEquals('number', typeof(y));
- assertEquals('function', typeof(opts));
- assertEquals('string', typeof(series_name));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'y' + y;
+ axes : {
+ x : {
+ valueFormatter: function(x, opts, series_name, dg) {
+ assertEquals('number', typeof(x));
+ assertEquals('function', typeof(opts));
+ assertEquals('string', typeof(series_name));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'x' + x;
+ }
+ },
+ y : {
+ valueFormatter: function(y, opts, series_name, dg) {
+ assertEquals('number', typeof(y));
+ assertEquals('function', typeof(opts));
+ assertEquals('string', typeof(series_name));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'y' + y;
+ }
+ }
},
labels: ['x', 'y']
};
var opts = {
width: 480,
height: 320,
- xValueFormatter: function(x, opts, series_name, dg) {
- assertEquals('number', typeof(x));
- assertEquals('function', typeof(opts));
- assertEquals('string', typeof(series_name));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'x' + Util.formatDate(x);
+ axes : {
+ x : {
+ valueFormatter: function(x, opts, series_name, dg) {
+ assertEquals('number', typeof(x));
+ assertEquals('function', typeof(opts));
+ assertEquals('string', typeof(series_name));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'x' + Util.formatDate(x);
+ },
+ pixelsPerLabel: 60
+ },
+ y : {
+ valueFormatter: function(y, opts, series_name, dg) {
+ assertEquals('number', typeof(y));
+ assertEquals('function', typeof(opts));
+ assertEquals('string', typeof(series_name));
+ assertEquals('[Dygraph graph]', dg.toString());
+ return 'y' + y;
+ }
+ }
},
- yValueFormatter: function(y, opts, series_name, dg) {
- assertEquals('number', typeof(y));
- assertEquals('function', typeof(opts));
- assertEquals('string', typeof(series_name));
- assertEquals('[Dygraph graph]', dg.toString());
- return 'y' + y;
- },
- axes: { x: { pixelsPerLabel: 60 } },
labels: ['x', 'y']
};
var opts = {
width: 480,
height: 320,
- xValueFormatter: function(x) {
- return 'xvf' + x;
- },
- yValueFormatter: function(y) {
- return 'yvf' + y;
- },
- xAxisLabelFormatter: function(x, granularity) {
- return 'x' + x;
- },
- yAxisLabelFormatter: function(y) {
- return 'y' + y;
+ axes : {
+ x : {
+ valueFormatter: function(x) {
+ return 'xvf' + x;
+ },
+ axisLabelFormatter: function(x, granularity) {
+ return 'x' + x;
+ },
+ },
+ y : {
+ valueFormatter: function(y) {
+ return 'yvf' + y;
+ },
+ axisLabelFormatter: function(y) {
+ return 'y' + y;
+ },
+ }
},
labels: ['x', 'y']
};
var graph = document.getElementById("graph");
var g = new Dygraph(graph, data, opts);
g.updateOptions({
- xValueFormatter: function(x) {
- return 'xvf' + x;
+ axes : {
+ x : {
+ valueFormatter: function(x) {
+ return 'xvf' + x;
+ }
+ }
}
});
g.updateOptions({
- yValueFormatter: function(y) {
- return 'yvf' + y;
+ axes : {
+ y : {
+ valueFormatter: function(y) {
+ return 'yvf' + y;
+ }
+ }
}
});
g.updateOptions({
- xAxisLabelFormatter: function(x, granularity) {
- return 'x' + x;
+ axes : {
+ x : {
+ axisLabelFormatter: function(x) {
+ return 'x' + x;
+ }
+ }
}
});
g.updateOptions({
- yAxisLabelFormatter: function(y) {
- return 'y' + y;
+ axes : {
+ y : {
+ axisLabelFormatter: function(y) {
+ return 'y' + y;
+ }
+ }
}
});
width: 500, height: 350,
customBars: true,
errorBars: true,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
valueRange: [0, 120],
fillAlpha: 0.15,
colors: [ '#00FF00' ]
customBars: true,
errorBars: true,
valueRange: [1, 120],
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
fillAlpha: 1.0,
logscale: true,
colors: [ '#00FF00' ]
var opts = {
width: 480,
height: 320,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
customBars: true,
errorBars: true
};
sigma: 1.0,
fillAlpha: 0.15,
colors: ['#00ff00', '#0000ff'],
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
width: 400,
height: 300,
valueRange: [0, 300],
width : 120,
height : 320,
errorBars : false,
- drawXGrid : false,
- drawXAxis : false,
- drawYAxis : false,
labels : [ "X", "Left", "Right" ],
colors : [ "rgba(0,0,0,0)", "rgba(0,0,0,0)" ],
series : {
}
},
axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
y : {
+ drawAxis : false,
gridLineColor : "#0000ff",
gridLinePattern : [ 10, 10 ]
}
},
axes: {
y: {
- valueRange: [40, 70]
+ valueRange: [40, 70],
+ axisLabelWidth: 60
},
y2: {
// set axis-related properties here
},
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
- yAxisLabelWidth: 60
}
);
assertEquals(["40", "45", "50", "55", "60", "65"], Util.getYLabels("1"));
},
axes: {
y: {
+ axisLabelWidth: 60,
valueRange: [40, 70]
},
y2: {
},
ylabel: 'Primary y-axis',
y2label: 'Secondary y-axis',
- yAxisLabelWidth: 60
}
);
assertEquals(["40", "45", "50", "55", "60", "65"], Util.getYLabels("1"));
};
perAxisTestCase.prototype.testDrawXAxis = function() {
- this.g.updateOptions({ drawXAxis : true });
+ this.g.updateOptions({ axes : { x : { drawAxis: true }} });
assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length > 0);
assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length == 0);
}
perAxisTestCase.prototype.testDrawYAxis = function() {
- this.g.updateOptions({ drawYAxis : true });
+ this.g.updateOptions({ axes : { y : { drawAxis: true }} });
assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length ==0);
assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length > 0);
}
-perAxisTestCase.prototype.testDrawAxisX = function() {
- this.g.updateOptions({ axes : { x : { drawAxis : true }}});
- assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length > 0);
- assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length == 0);
-}
-
-perAxisTestCase.prototype.testDrawAxisY = function() {
- this.g.updateOptions({ axes : { y : { drawAxis : true }}});
- assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length ==0);
- assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length > 0);
-}
perAxisTestCase.prototype.testDrawXGrid = function() {
- this.g.updateOptions({ drawXGrid : true });
- var htx = this.g.hidden_ctx_;
- assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) > 0);
- assertTrue(CanvasAssertions.numLinesDrawn(htx, this.yAxisLineColor) == 0);
-}
-
-perAxisTestCase.prototype.testDrawYGrid = function() {
- this.g.updateOptions({ drawYGrid : true });
- var htx = this.g.hidden_ctx_;
- assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) == 0);
- assertTrue(CanvasAssertions.numLinesDrawn(htx, this.yAxisLineColor) > 0);
-}
-
-perAxisTestCase.prototype.testDrawGridX = function() {
this.g.updateOptions({ axes : { x : { drawGrid : true }}});
var htx = this.g.hidden_ctx_;
assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) > 0);
assertTrue(CanvasAssertions.numLinesDrawn(htx, this.yAxisLineColor) == 0);
}
-perAxisTestCase.prototype.testDrawGridY = function() {
+perAxisTestCase.prototype.testDrawYGrid = function() {
this.g.updateOptions({ axes : { y : { drawGrid : true }}});
var htx = this.g.hidden_ctx_;
assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) == 0);
var opts = {
width: 480,
height: 320,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
series: {
Y: { fillGraph: true },
},
width: 480,
height: 100,
xAxisHeight: 30,
- drawXAxis: false,
+ axes : { x : { drawAxis: false }},
showRangeSelector: true,
rangeSelectorHeight: 30,
labels: ['X', 'Y']
width: 480,
height: 100,
xAxisHeight: 30,
- drawXAxis: false,
+ axes : { x : { drawAxis: false }},
showRangeSelector: true,
rangeSelectorHeight: 30,
rangeSelectorPlotStrokeColor: '#ff0000',
SimpleDrawingTestCase.prototype.testDrawSimpleRangePlusOne = function() {
var opts = {
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
valueRange: [0,51] }
var graph = document.getElementById("graph");
// See http://code.google.com/p/dygraphs/issues/detail?id=185
SimpleDrawingTestCase.prototype.testDrawSimpleRangeZeroToFifty = function() {
var opts = {
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
valueRange: [0,50] }
var graph = document.getElementById("graph");
*/
SimpleDrawingTestCase.prototype.testDrawThickLine = function() {
var opts = {
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
strokeWidth: 15,
colors: ['#ff0000']
};
width: 400,
height: 300,
stackedGraph: true,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
valueRange: [0, 3],
colors: ['#00ff00', '#0000ff'],
fillAlpha: 0.15
var opts = {
width: 480,
height: 320,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
errorBars: false,
labels: ["X", "Idle", "Used"],
series: {
var opts = {
width: 480,
height: 320,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
errorBars: false,
labels: ["X", "Idle", "Used", "NotUsed", "Active"],
series: {
var opts = {
width: 480,
height: 320,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
errorBars: true,
sigma: 1,
labels: ["X", "Data1", "Data2"],
var opts = {
width: 480,
height: 320,
- drawXGrid: false,
- drawYGrid: false,
- drawXAxis: false,
- drawYAxis: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: false,
+ }
+ },
customBars: true,
labels: ["X", "Data1", "Data2"],
series: {
ToDomCoordsTestCase.prototype.testChartWithAxes = function() {
var opts = {
- drawXAxis: true,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: true,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: true,
+ axisLabelWidth: 100
+ }
+ },
xAxisHeight: 50,
- drawYAxis: true,
- yAxisLabelWidth: 100,
axisTickSize: 0,
- drawXGrid: false,
- drawYGrid: false,
rightGap: 0,
valueRange: [0, 100],
dateWindow: [0, 100],
ToDomCoordsTestCase.prototype.testChartWithAxesAndLabels = function() {
var opts = {
- drawXAxis: true,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis: true,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis: true,
+ axisLabelWidth: 100
+ }
+ },
xAxisHeight: 50,
- drawYAxis: true,
- yAxisLabelWidth: 100,
axisTickSize: 0,
- drawXGrid: false,
- drawYGrid: false,
rightGap: 0,
valueRange: [0, 100],
dateWindow: [0, 100],
ToDomCoordsTestCase.prototype.testYAxisLabelWidth = function() {
var opts = {
- yAxisLabelWidth: 100,
+ axes: { y: { axisLabelWidth: 100 } },
axisTickSize: 0,
rightGap: 0,
valueRange: [0, 100],
assertEquals([100, 0], g.toDomCoords(0, 100));
assertEquals([500, 486], g.toDomCoords(100, 0));
- g.updateOptions({ yAxisLabelWidth: 50 });
+ g.updateOptions({
+ axes: { y: { axisLabelWidth: 50 }},
+ });
assertEquals([50, 0], g.toDomCoords(0, 100));
assertEquals([500, 486], g.toDomCoords(100, 0));
}
ToDomCoordsTestCase.prototype.testAxisTickSize = function() {
var opts = {
- yAxisLabelWidth: 100,
+ axes: { y: { axisLabelWidth: 100 } },
axisTickSize: 0,
rightGap: 0,
valueRange: [0, 100],
"1247382000,100,200\n" +
"1247986800,150,201\n",
{
- xValueFormatter: Dygraph.dateString_,
- xValueParser: function(x) { return 1000*parseInt(x); },
- xTicker: Dygraph.dateTicker
+ axis : {
+ x : {
+ valueFormatter: Dygraph.dateString_,
+ valueParser: function(x) { return 1000*parseInt(x); },
+ ticker: Dygraph.dateTicker
+ }
+ }
});
</code>
"type": "boolean",
"description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
},
- "xValueFormatter": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "",
- "description": "Prefer axes: { x: { valueFormatter } }"
- },
"valueFormatter": {
"default": "Depends on the type of your data.",
"labels": ["Legend", "Value display/formatting"],
"type": "function(num or millis, opts, dygraph)",
"description": "Function to provide a custom display format for the values displayed on mouseover. This does not affect the values that appear on tick marks next to the axes. To format those, see axisLabelFormatter. This is usually set on a <a href='per-axis.html'>per-axis</a> basis. For date axes, you can call new Date(millis) to get a Date object. opts is a function you can call to access various options (e.g. opts('labelsKMB'))."
},
- "pixelsPerYLabel": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "integer",
- "description": "Prefer axes: { y: { pixelsPerLabel } }"
- },
"annotationMouseOverHandler": {
"default": "null",
"labels": ["Annotations"],
],
"description": "This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks are an array of (value, label) pairs. The built-in functions go to great lengths to choose good tick marks so, if you set this option, you'll most likely want to call one of them and modify the result. See dygraph-tickers.js for an extensive discussion. This is set on a <a href='per-axis.html'>per-axis</a> basis."
},
- "xAxisLabelWidth": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "integer",
- "description": "Prefer axes: { x: { axisLabelWidth } }"
- },
"xAxisHeight": {
"default": "(null)",
"labels": ["Axis display"],
"type": "string",
"description": "Set to either 'y1' or 'y2' to assign a series to a y-axis (primary or secondary). Must be set per-series."
},
- "pixelsPerXLabel": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "integer",
- "description": "Prefer axes { x: { pixelsPerLabel } }"
- },
"pixelsPerLabel": {
"default": "70 (x-axis) or 30 (y-axes)",
"labels": ["Axis display", "Grid"],
"type": "float (0.0 - 1.0)",
"description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
},
- "yAxisLabelWidth": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "integer",
- "description": "Prefer axes { y: { axisLabelWidth } }"
- },
"hideOverlayOnMouseOut": {
"default": "true",
"labels": ["Interactive Elements", "Legend"],
"type": "boolean",
"description": "Whether to hide the legend when the mouse leaves the chart area."
},
- "yValueFormatter": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "",
- "description": "Prefer axes: { y: { valueFormatter } }"
- },
"legend": {
"default": "onmouseover",
"labels": ["Legend"],
"type": "float",
"description": "If set, add the specified amount of extra space (in pixels) around the Y-axis value range to ensure points at the edges remain visible. If unset, use the traditional Y padding algorithm."
},
- "xAxisLabelFormatter": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "",
- "description": "Prefer axes { x: { axisLabelFormatter } }"
- },
"axisLabelFormatter": {
"default": "Depends on the data type",
"labels": ["Axis display"],
],
"description": "A function to call when the canvas is clicked."
},
- "yAxisLabelFormatter": {
- "default": "",
- "labels": ["Deprecated"],
- "type": "",
- "description": "Prefer axes: { y: { axisLabelFormatter } }"
- },
"labels": {
"default": "[\"X\", \"Y1\", \"Y2\", ...]*",
"labels": ["Legend"],
"type": "boolean",
"description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
},
- "drawXGrid": {
- "default": "true",
- "labels": ["Grid","Deprecated"],
- "type": "boolean",
- "description" : "Use the per-axis option drawGrid instead. Whether to display vertical gridlines under the chart."
- },
- "drawYGrid": {
- "default": "true",
- "labels": ["Grid","Deprecated"],
- "type": "boolean",
- "description" : "Use the per-axis option drawGrid instead. Whether to display horizontal gridlines under the chart."
- },
"drawGrid": {
"default": "true for x and y, false for y2",
"labels": ["Grid"],
"type": "boolean",
"description" : "Only valid for y and y2, has no effect on x: This option defines whether the y axes should align their ticks or if they should be independent. Possible combinations: 1.) y=true, y2=false (default): y is the primary axis and the y2 ticks are aligned to the the ones of y. (only 1 grid) 2.) y=false, y2=true: y2 is the primary axis and the y ticks are aligned to the the ones of y2. (only 1 grid) 3.) y=true, y2=true: Both axis are independent and have their own ticks. (2 grids) 4.) y=false, y2=false: Invalid configuration causes an error."
},
- "drawXAxis": {
- "default": "true",
- "labels": ["Axis display"],
- "type": "boolean",
- "description" : "Deprecated. Use axes : { x : { drawAxis } }."
- },
- "drawYAxis": {
- "default": "true",
- "labels": ["Axis display"],
- "type": "boolean",
- "description" : "Deprecated. Use axes : { y : { drawAxis } }."
- },
"drawAxis": {
"default": "true for x and y, false for y2",
"labels": ["Axis display"],
"default": "0.3",
"labels": ["Grid"],
"type": "float",
- "description" : "Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawXGrid and drawYGrid options. This may be set on a per-axis basis to define each axis' grid separately."
+ "description" : "Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawGrid option. This may be set on a per-axis basis to define each axis' grid separately."
},
"axisLineWidth": {
"default": "0.3",
'drawHighlightPointCallback': true,
'drawPoints': true,
'drawPointCallback': true,
- 'drawXGrid': true,
- 'drawYGrid': true,
+ 'drawGrid': true,
'fillAlpha': true,
'gridLineColor': true,
'gridLineWidth': true,
xLabelHeight: 18,
yLabelWidth: 18,
- drawXAxis: true,
- drawYAxis: true,
axisLineColor: "black",
axisLineWidth: 0.3,
gridLineWidth: 0.3,
axisLabelColor: "black",
axisLabelWidth: 50,
- drawYGrid: true,
- drawXGrid: true,
gridLineColor: "rgb(128,128,128)",
interactionModel: null, // will be set to Dygraph.Interaction.defaultModel
// Support two-argument constructor
if (attrs === null || attrs === undefined) { attrs = {}; }
- attrs = Dygraph.mapLegacyOptions_(attrs);
+ attrs = Dygraph.copyUserAttrs_(attrs);
if (typeof(div) == 'string') {
div = document.getElementById(div);
Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) {
if (typeof(block_redraw) == 'undefined') block_redraw = false;
- // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
+ // copyUserAttrs_ drops the "file" parameter as a convenience to us.
var file = input_attrs.file;
- var attrs = Dygraph.mapLegacyOptions_(input_attrs);
+ var attrs = Dygraph.copyUserAttrs_(input_attrs);
// TODO(danvk): this is a mess. Move these options into attr_.
if ('rollPeriod' in attrs) {
};
/**
- * Returns a copy of the options with deprecated names converted into current
- * names. Also drops the (potentially-large) 'file' attribute. If the caller is
- * interested in that, they should save a copy before calling this.
- * @private
+ * Make a copy of input attributes, removing file as a convenience.
*/
-Dygraph.mapLegacyOptions_ = function(attrs) {
+Dygraph.copyUserAttrs_ = function(attrs) {
var my_attrs = {};
for (var k in attrs) {
if (!attrs.hasOwnProperty(k)) continue;
if (k == 'file') continue;
if (attrs.hasOwnProperty(k)) my_attrs[k] = attrs[k];
}
-
- var set = function(axis, opt, value) {
- if (!my_attrs.axes) my_attrs.axes = {};
- if (!my_attrs.axes[axis]) my_attrs.axes[axis] = {};
- my_attrs.axes[axis][opt] = value;
- };
- var map = function(opt, axis, new_opt) {
- if (typeof(attrs[opt]) != 'undefined') {
- console.warn("Option " + opt + " is deprecated. Use the " +
- new_opt + " option for the " + axis + " axis instead. " +
- "(e.g. { axes : { " + axis + " : { " + new_opt + " : ... } } } " +
- "(see http://dygraphs.com/per-axis.html for more information.");
- set(axis, new_opt, attrs[opt]);
- delete my_attrs[opt];
- }
- };
-
- // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
- map('xValueFormatter', 'x', 'valueFormatter');
- map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
- map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
- map('xTicker', 'x', 'ticker');
- map('yValueFormatter', 'y', 'valueFormatter');
- map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
- map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
- map('yTicker', 'y', 'ticker');
- map('drawXGrid', 'x', 'drawGrid');
- map('drawXAxis', 'x', 'drawAxis');
- map('drawYGrid', 'y', 'drawGrid');
- map('drawYAxis', 'y', 'drawAxis');
- map('xAxisLabelWidth', 'x', 'axisLabelWidth');
- map('yAxisLabelWidth', 'y', 'axisLabelWidth');
return my_attrs;
};
[[0,1],[10,1]],
{
xAxisHeight: 30,
- drawXAxis: false,
+ axes : {
+ x : {
+ drawAxis : false
+ }
+ },
showRangeSelector: true,
rangeSelectorHeight: 30
}
g = new Dygraph(
document.getElementById("div_g"),
data, {
- drawXAxis: show_box,
- drawYAxis: show_box,
- drawXGrid: show_box,
- drawYGrid: show_box
+ axes : {
+ x : {
+ drawGrid: show_box,
+ drawAxis : show_box,
+ },
+ y : {
+ drawGrid: show_box,
+ drawAxis : show_box,
+ }
+ }
}
);
var g2 = new Dygraph(
document.getElementById("div_spark"),
data, {
- drawXAxis: false,
- drawYAxis: false,
- drawXGrid: false,
- drawYGrid: false,
+ axes : {
+ x : {
+ drawGrid: false,
+ drawAxis : false,
+ },
+ y : {
+ drawGrid: false,
+ drawAxis : false,
+ }
+ },
strokeWidth: 1.0,
rollPeriod: 7,
labelsDiv: '',