Added another layer of abstraction to take care of all the glue and make the chart api extremely simple. First try, so not entirely complete, but does function.
Bob Monteverde
12 years ago
parent
1880f11775
commit
4e7475da73
@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<link href="../src/d3.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
text {
|
||||
font: 12px sans-serif;
|
||||
}
|
||||
|
||||
#chart1 {
|
||||
height: 500px;
|
||||
margin: 10px;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
/*
|
||||
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
|
||||
*/
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<div id="chart1">
|
||||
</div>
|
||||
|
||||
<script src="../lib/d3.v2.js"></script>
|
||||
<script src="../lib/jquery.min.js"></script>
|
||||
<script src="../nv.d3.js"></script>
|
||||
<script src="../src/nvtooltip.js"></script>
|
||||
<script src="../src/models/legend.js"></script>
|
||||
<script src="../src/models/xaxis.js"></script>
|
||||
<script src="../src/models/yaxis.js"></script>
|
||||
<script src="../src/models/line.js"></script>
|
||||
<script src="../src/models/lineWithLegend.js"></script>
|
||||
<script src="../src/charts/lineChart.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
nv.charts.line()
|
||||
.data(sinAndCos())
|
||||
.selector('#chart1')
|
||||
.yAxisLabel('Voltage (v)')
|
||||
.build();
|
||||
|
||||
|
||||
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,137 @@
|
||||
|
||||
//may make these more specific, like 'time series line with month end data points', etc.
|
||||
// or may make that yet another layer of abstraction.... trying to not get too crazy
|
||||
nv.charts.line = function() {
|
||||
|
||||
var selector = null,
|
||||
data = [],
|
||||
xTickFormat = d3.format(',r'),
|
||||
yTickFormat = d3.format(',.2f'),
|
||||
xAxisLabel = null,
|
||||
yAxisLabel = null,
|
||||
duration = 500;
|
||||
|
||||
var graph = nv.models.lineWithLegend(),
|
||||
showTooltip = function(e) { //TODO: simplify so all the calcualtions don't need to be done by the user.
|
||||
var offset = $(selector).offset(),
|
||||
left = e.pos[0] + offset.left,
|
||||
top = e.pos[1] + offset.top,
|
||||
formatY = graph.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
|
||||
formatX = graph.xAxis.tickFormat();
|
||||
|
||||
// uses the chart's getX and getY, you may customize if x position is not the same as the value you want
|
||||
// ex. daily data without weekends, x is the index, while you want the date
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatY(graph.y()(e.point)) + ' at ' + formatX(graph.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nvtooltip.show([left, top], content);
|
||||
};
|
||||
|
||||
|
||||
function chart() {
|
||||
return chart;
|
||||
}
|
||||
|
||||
|
||||
chart.build = function() {
|
||||
if (!selector || !data.length) return chart; //do nothing if you have nothing to work with
|
||||
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var container = d3.select(selector),
|
||||
width = function() { return parseInt(container.style('width')) },
|
||||
height = function() { return parseInt(container.style('height')) },
|
||||
svg = container.append('svg');
|
||||
|
||||
graph
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
graph.xAxis
|
||||
.tickFormat(xTickFormat);
|
||||
|
||||
graph.yAxis
|
||||
.tickFormat(yTickFormat)
|
||||
.axisLabel(yAxisLabel);
|
||||
|
||||
svg
|
||||
.attr('width', width())
|
||||
.attr('height', height())
|
||||
.datum(data)
|
||||
.transition().duration(duration).call(graph);
|
||||
|
||||
return graph;
|
||||
},
|
||||
callback: function(graph) {
|
||||
graph.dispatch.on('tooltipShow', showTooltip);
|
||||
graph.dispatch.on('tooltipHide', nvtooltip.cleanup);
|
||||
|
||||
$(window).resize(function() {
|
||||
// now that width and height are functions, should be automatic..of course you can always override them
|
||||
d3.select(selector + ' svg')
|
||||
.attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
|
||||
.attr('height', graph.height()())
|
||||
.call(graph);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.update = function() {
|
||||
//TODO: create update code
|
||||
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
chart.data = function(_) {
|
||||
if (!arguments.length) return data;
|
||||
data = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.selector = function(_) {
|
||||
if (!arguments.length) return selector;
|
||||
selector = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.duration = function(_) {
|
||||
if (!arguments.length) return duration;
|
||||
duration = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xTickFormat = function(_) {
|
||||
if (!arguments.length) return xTickFormat;
|
||||
xTickFormat = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yTickFormat = function(_) {
|
||||
if (!arguments.length) return yTickFormat;
|
||||
yTickFormat = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.xAxisLabel = function(_) {
|
||||
if (!arguments.length) return xAxisLabel;
|
||||
xAxisLabel = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
chart.yAxisLabel = function(_) {
|
||||
if (!arguments.length) return yAxisLabel;
|
||||
yAxisLabel = _;
|
||||
return chart;
|
||||
};
|
||||
|
||||
|
||||
return chart;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue