diff --git a/examples/discreteBarChart.html b/examples/discreteBarChart.html index 38a3e74..eebfa48 100644 --- a/examples/discreteBarChart.html +++ b/examples/discreteBarChart.html @@ -13,12 +13,16 @@ text { font: 12px sans-serif; } -#chart1 { +svg { + display: block; +} + +#chart1 svg{ height: 500px; - margin: 10px; min-width: 100px; min-height: 100px; /* + margin: 10px; Minimum height and width is a good idea to prevent negative SVG dimensions... For example width should be =< margin.left + margin.right + 1, of course 1 pixel for the entire chart would not be very useful, BUT should not have errors @@ -29,6 +33,7 @@ text {
+
@@ -38,7 +43,7 @@ text { - + diff --git a/examples/lineWithLegendChart.html b/examples/lineWithLegendChart.html index be115f4..07dfba0 100644 --- a/examples/lineWithLegendChart.html +++ b/examples/lineWithLegendChart.html @@ -50,7 +50,7 @@ svg { // Wrapping in nv.addGraph allows for '0 timeout render', stors rendered charts in nv.graphs, and may do more in the future... it's NOT required nv.addGraph(function() { - chart = nv.models.lineWithLegend(); + chart = nv.models.lineChart(); chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the partent chart, so need to chain separately .tickFormat(d3.format(',r')); diff --git a/src/charts/discreteBarChart.js b/src/charts/discreteBarChart.js index a3e4e4e..db22ca3 100644 --- a/src/charts/discreteBarChart.js +++ b/src/charts/discreteBarChart.js @@ -25,7 +25,7 @@ nv.charts.discreteBar = function() { //setting component defaults graph.xAxis.tickFormat(function(d) { return d }); - graph.yAxis.tickFormat(d3.format(',.2f')); + graph.yAxis.tickFormat(d3.format(',.f')); //TODO: consider a method more similar to how the models are built diff --git a/src/models/lineChart.js b/src/models/lineChart.js index 1f72d6e..2efc8bd 100644 --- a/src/models/lineChart.js +++ b/src/models/lineChart.js @@ -1,5 +1,5 @@ -nv.models.lineWithLegend = function() { +nv.models.lineChart = function() { var margin = {top: 30, right: 20, bottom: 50, left: 60}, color = d3.scale.category20().range(), width = null, @@ -86,8 +86,7 @@ nv.models.lineWithLegend = function() { xAxis - .domain(x.domain()) - .range(x.range()) + .scale(x) .ticks( availableWidth / 100 ) .tickSize(-availableHeight, 0); @@ -98,8 +97,7 @@ nv.models.lineWithLegend = function() { yAxis - .domain(y.domain()) - .range(y.range()) + .scale(y) .ticks( availableHeight / 36 ) .tickSize( -availableWidth, 0); @@ -137,13 +135,8 @@ nv.models.lineWithLegend = function() { */ lines.dispatch.on('elementMouseover.tooltip', function(e) { - dispatch.tooltipShow({ - point: e.point, - series: e.series, - pos: [e.pos[0] + margin.left, e.pos[1] + margin.top], - seriesIndex: e.seriesIndex, - pointIndex: e.pointIndex - }); + e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top]; + dispatch.tooltipShow(e); }); dispatch.on('tooltipShow', function(e) { showTooltip(e, this) } ); // TODO: maybe merge with above?