blob42
/
nvd3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Replacing discreteBar chart with a model... getting rid of charts collection

Browse Source
master-patched
Bob Monteverde 12 years ago
parent a013082def
commit b5cabe11d7
4 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File

23
examples/discreteBarChart.html
Unescape Escape View File

@ -13,12 +13,16 @@ text {
font: 12px sans-serif; font: 12px sans-serif;
} }
#chart1 { svg {
display: block;
}
#chart1 svg{
height: 500px; height: 500px;
margin: 10px;
min-width: 100px; min-width: 100px;
min-height: 100px; min-height: 100px;
/* /*
margin: 10px;
Minimum height and width is a good idea to prevent negative SVG dimensions... Minimum height and width is a good idea to prevent negative SVG dimensions...
For example width should be =< margin.left + margin.right + 1, 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 of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
@ -29,6 +33,7 @@ text {
<body> <body>
<div id="chart1"> <div id="chart1">
<svg></svg>
</div> </div>
<script src="../lib/d3.v2.js"></script> <script src="../lib/d3.v2.js"></script>
@ -38,7 +43,7 @@ text {
<script src="../src/models/axis.js"></script> <script src="../src/models/axis.js"></script>
<script src="../src/models/discreteBar.js"></script> <script src="../src/models/discreteBar.js"></script>
<script src="../src/models/discreteBarWithAxes.js"></script> <script src="../src/models/discreteBarWithAxes.js"></script>
<script src="../src/charts/discreteBarChart.js"></script> <script src="../src/models/discreteBarChart.js"></script>
<script> <script>
@ -88,13 +93,17 @@ historicalBarChart = [
nv.charts.discreteBar() var chart = nv.models.discreteBarChart()
.selector('#chart1')
.data(historicalBarChart)
.x(function(d) { return d.label }) .x(function(d) { return d.label })
.y(function(d) { return d.value }) .y(function(d) { return d.value })
.staggerLabels(historicalBarChart[0].values.length > 8) .staggerLabels(historicalBarChart[0].values.length > 8)
.build();
d3.select('#chart1 svg')
.datum(historicalBarChart)
.transition().duration(500)
.call(chart);
</script> </script>

2
examples/lineWithLegendChart.html
Unescape Escape View File

@ -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 // 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() { 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 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')); .tickFormat(d3.format(',r'));

2
src/charts/discreteBarChart.js
Unescape Escape View File

@ -25,7 +25,7 @@ nv.charts.discreteBar = function() {
//setting component defaults //setting component defaults
graph.xAxis.tickFormat(function(d) { return d }); 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 //TODO: consider a method more similar to how the models are built

17
src/models/lineChart.js
Unescape Escape View File

@ -1,5 +1,5 @@
nv.models.lineWithLegend = function() { nv.models.lineChart = function() {
var margin = {top: 30, right: 20, bottom: 50, left: 60}, var margin = {top: 30, right: 20, bottom: 50, left: 60},
color = d3.scale.category20().range(), color = d3.scale.category20().range(),
width = null, width = null,
@ -86,8 +86,7 @@ nv.models.lineWithLegend = function() {
xAxis xAxis
.domain(x.domain()) .scale(x)
.range(x.range())
.ticks( availableWidth / 100 ) .ticks( availableWidth / 100 )
.tickSize(-availableHeight, 0); .tickSize(-availableHeight, 0);
@ -98,8 +97,7 @@ nv.models.lineWithLegend = function() {
yAxis yAxis
.domain(y.domain()) .scale(y)
.range(y.range())
.ticks( availableHeight / 36 ) .ticks( availableHeight / 36 )
.tickSize( -availableWidth, 0); .tickSize( -availableWidth, 0);
@ -137,13 +135,8 @@ nv.models.lineWithLegend = function() {
*/ */
lines.dispatch.on('elementMouseover.tooltip', function(e) { lines.dispatch.on('elementMouseover.tooltip', function(e) {
dispatch.tooltipShow({ e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
point: e.point, dispatch.tooltipShow(e);
series: e.series,
pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
seriesIndex: e.seriesIndex,
pointIndex: e.pointIndex
});
}); });
dispatch.on('tooltipShow', function(e) { showTooltip(e, this) } ); // TODO: maybe merge with above? dispatch.on('tooltipShow', function(e) { showTooltip(e, this) } ); // TODO: maybe merge with above?

Write Preview
Loading…
Cancel
Save