diff --git a/examples/lineChart.html b/examples/lineChart.html index 9ff1f40..2db3713 100644 --- a/examples/lineChart.html +++ b/examples/lineChart.html @@ -34,6 +34,7 @@ text { + @@ -46,8 +47,9 @@ text { nv.charts.line() - .data(sinAndCos()) .selector('#chart1') + .data(sinAndCos()) + .y(function(d) { return d.voltage }) .yAxisLabel('Voltage (v)') .build(); @@ -59,8 +61,8 @@ function sinAndCos() { 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)}); + sin.push({x: i, voltage: Math.sin(i/10)}); + cos.push({x: i, voltage: .5 * Math.cos(i/10)}); } return [ diff --git a/nv.d3.js b/nv.d3.js index 6bb1906..6b9d5af 100644 --- a/nv.d3.js +++ b/nv.d3.js @@ -87,7 +87,11 @@ })(jQuery); (function(){ -var nv = {version: "0.0.1"}; +var nv = { + version: '0.0.1', + dev: true //set false when in production +}; + window.nv = nv; @@ -96,15 +100,15 @@ nv.charts = {}; //stores all the ready to use charts nv.graphs = []; //stores all the graphs currently on the page nv.log = {}; //stores some statistics and potential error messages -nv.dispatch = d3.dispatch("render_start", "render_end"); +nv.dispatch = d3.dispatch('render_start', 'render_end'); // ******************************************** // Public Helper functions, not part of NV window.log = function(obj) { - if ((typeof(window.console) === "object") - && (typeof(window.console.log) === "function")) + if ((typeof(window.console) === 'object') + && (typeof(window.console.log) === 'function')) console.log.apply(console, arguments); return obj; @@ -116,24 +120,22 @@ window.log = function(obj) { // ******************************************** // Public Core NV functions -nv.dispatch.on("render_start", function(e) { +nv.dispatch.on('render_start', function(e) { nv.log.startTime = +new Date; - //log('start', nv.log.startTime); }); -nv.dispatch.on("render_end", function(e) { +nv.dispatch.on('render_end', function(e) { nv.log.endTime = +new Date; nv.log.totalTime = nv.log.endTime - nv.log.startTime; - //log('end', nv.log.endTime); - log('total', nv.log.totalTime); //used for development, to keep track of graph generation times + if (nv.dev) log('total', nv.log.totalTime); //used for development, to keep track of graph generation times }); // ******************************************** // Public Core NV functions -nv.render = function render(stepSize) { - var step = stepSize || 1; // number of graphs to generate in each timout loop +nv.render = function render(step) { + step = step || 1; // number of graphs to generate in each timout loop render.active = true; nv.dispatch.render_start(); @@ -149,7 +151,7 @@ nv.render = function render(stepSize) { render.queue.splice(0, i); - if (render.queue.length > 0) setTimeout(arguments.callee, 0); + if (render.queue.length) setTimeout(arguments.callee, 0); else { nv.render.active = false; nv.dispatch.render_end(); @@ -160,7 +162,7 @@ nv.render.queue = []; nv.addGraph = function(obj) { - if (typeof arguments[0] === "function") + if (typeof arguments[0] === 'function') obj = {generate: arguments[0], callback: arguments[1]}; nv.render.queue.push(obj); @@ -169,6 +171,10 @@ nv.addGraph = function(obj) { }; + +nv.identity = function(d) { return d }; + + nv.strip = function(s) { return s.replace(/(\s|&)/g,''); } @@ -1377,6 +1383,9 @@ nv.models.lineWithLegend = function() { } chart.dispatch = dispatch; + chart.legend = legend; + chart.xAxis = xAxis; + chart.yAxis = yAxis; chart.x = function(_) { if (!arguments.length) return getX; @@ -1418,17 +1427,6 @@ nv.models.lineWithLegend = function() { }; - // Expose the x-axis' tickFormat method. - //chart.xAxis = {}; - //d3.rebind(chart.xAxis, xAxis, 'tickFormat'); - chart.xAxis = xAxis; - - // Expose the y-axis' tickFormat method. - //chart.yAxis = {}; - //d3.rebind(chart.yAxis, yAxis, 'tickFormat'); - chart.yAxis = yAxis; - - return chart; } diff --git a/nv.d3.min.js b/nv.d3.min.js index 903b0f8..79c2ef8 100644 --- a/nv.d3.min.js +++ b/nv.d3.min.js @@ -1,4 +1,4 @@ /***** * A no frills tooltip implementation. - *****/(function(a){var b=window.nvtooltip={};b.show=function(b,c,d,e){var f=a('
' + y + ' at ' + x + '
' + }; + var graph = nv.models.lineWithLegend(), - showTooltip = function(e) { //TODO: simplify so all the calcualtions don't need to be done by the user. + showTooltip = function(e) { 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 = '' + - formatY(graph.y()(e.point)) + ' at ' + formatX(graph.x()(e.point)) + - '
'; + formatX = graph.xAxis.tickFormat(), + formatY = graph.yAxis.tickFormat(), + x = formatX(graph.x()(e.point)), + y = formatY(graph.y()(e.point)), + content = tooltip(e.series.key, x, y, e, graph); nvtooltip.show([left, top], content); }; + //setting component defaults + graph.xAxis.tickFormat(d3.format(',r')); + graph.yAxis.tickFormat(d3.format(',.2f')); + + //TODO: consider a method more similar to how the models are built function chart() { + if (!selector || !data.length) return chart; //do nothing if you have nothing to work with + + d3.select(selector).select('svg') + .datum(data) + .transition().duration(duration).call(graph); //consider using transition chaining like in the models + return chart; } + // This should always only be called once, then update should be used after, + // in which case should consider the 'd3 way' and merge this with update, + // but simply do this on enter... should try anoter example that way chart.build = function() { if (!selector || !data.length) return chart; //do nothing if you have nothing to work with @@ -49,13 +61,6 @@ nv.charts.line = function() { .width(width) .height(height); - graph.xAxis - .tickFormat(xTickFormat); - - graph.yAxis - .tickFormat(yTickFormat) - .axisLabel(yAxisLabel); - svg .attr('width', width()) .attr('height', height()) @@ -68,6 +73,7 @@ nv.charts.line = function() { graph.dispatch.on('tooltipShow', showTooltip); graph.dispatch.on('tooltipHide', nvtooltip.cleanup); + //TODO: create resize queue and have nv core handle resize instead of binding all to window resize $(window).resize(function() { // now that width and height are functions, should be automatic..of course you can always override them d3.select(selector + ' svg') @@ -82,12 +88,18 @@ nv.charts.line = function() { }; + /* + // moved to chart() chart.update = function() { - //TODO: create update code + if (!selector || !data.length) return chart; //do nothing if you have nothing to work with + + d3.select(selector).select('svg') + .datum(data) + .transition().duration(duration).call(graph); return chart; }; - + */ chart.data = function(_) { if (!arguments.length) return data; @@ -107,31 +119,40 @@ nv.charts.line = function() { return chart; }; + chart.tooltip = function(_) { + if (!arguments.length) return tooltip; + tooltip = _; + return chart; + }; + chart.xTickFormat = function(_) { - if (!arguments.length) return xTickFormat; - xTickFormat = _; + if (!arguments.length) return graph.xAxis.tickFormat(); + graph.xAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_)); return chart; }; chart.yTickFormat = function(_) { - if (!arguments.length) return yTickFormat; - yTickFormat = _; + if (!arguments.length) return graph.yAxis.tickFormat(); + graph.yAxis.tickFormat(typeof _ === 'function' ? _ : d3.format(_)); return chart; }; chart.xAxisLabel = function(_) { - if (!arguments.length) return xAxisLabel; - xAxisLabel = _; + if (!arguments.length) return graph.xAxis.axisLabel(); + graph.xAxis.axisLabel(_); return chart; }; chart.yAxisLabel = function(_) { - if (!arguments.length) return yAxisLabel; - yAxisLabel = _; + if (!arguments.length) return graph.yAxis.axisLabel(); + graph.yAxis.axisLabel(_); return chart; }; + d3.rebind(chart, graph, 'x', 'y'); + + chart.graph = graph; // Give direct access for getter/setters, and dispatchers return chart; -} +}; diff --git a/src/core.js b/src/core.js index 74495a9..8fcb5eb 100644 --- a/src/core.js +++ b/src/core.js @@ -1,4 +1,8 @@ -var nv = {version: "0.0.1"}; +var nv = { + version: '0.0.1', + dev: true //set false when in production +}; + window.nv = nv; @@ -7,15 +11,15 @@ nv.charts = {}; //stores all the ready to use charts nv.graphs = []; //stores all the graphs currently on the page nv.log = {}; //stores some statistics and potential error messages -nv.dispatch = d3.dispatch("render_start", "render_end"); +nv.dispatch = d3.dispatch('render_start', 'render_end'); // ******************************************** // Public Helper functions, not part of NV window.log = function(obj) { - if ((typeof(window.console) === "object") - && (typeof(window.console.log) === "function")) + if ((typeof(window.console) === 'object') + && (typeof(window.console.log) === 'function')) console.log.apply(console, arguments); return obj; @@ -27,24 +31,22 @@ window.log = function(obj) { // ******************************************** // Public Core NV functions -nv.dispatch.on("render_start", function(e) { +nv.dispatch.on('render_start', function(e) { nv.log.startTime = +new Date; - //log('start', nv.log.startTime); }); -nv.dispatch.on("render_end", function(e) { +nv.dispatch.on('render_end', function(e) { nv.log.endTime = +new Date; nv.log.totalTime = nv.log.endTime - nv.log.startTime; - //log('end', nv.log.endTime); - log('total', nv.log.totalTime); //used for development, to keep track of graph generation times + if (nv.dev) log('total', nv.log.totalTime); //used for development, to keep track of graph generation times }); // ******************************************** // Public Core NV functions -nv.render = function render(stepSize) { - var step = stepSize || 1; // number of graphs to generate in each timout loop +nv.render = function render(step) { + step = step || 1; // number of graphs to generate in each timout loop render.active = true; nv.dispatch.render_start(); @@ -60,7 +62,7 @@ nv.render = function render(stepSize) { render.queue.splice(0, i); - if (render.queue.length > 0) setTimeout(arguments.callee, 0); + if (render.queue.length) setTimeout(arguments.callee, 0); else { nv.render.active = false; nv.dispatch.render_end(); @@ -71,7 +73,7 @@ nv.render.queue = []; nv.addGraph = function(obj) { - if (typeof arguments[0] === "function") + if (typeof arguments[0] === 'function') obj = {generate: arguments[0], callback: arguments[1]}; nv.render.queue.push(obj); @@ -80,6 +82,10 @@ nv.addGraph = function(obj) { }; + +nv.identity = function(d) { return d }; + + nv.strip = function(s) { return s.replace(/(\s|&)/g,''); } diff --git a/src/models/lineWithLegend.js b/src/models/lineWithLegend.js index 3cf6a5d..a5480b8 100644 --- a/src/models/lineWithLegend.js +++ b/src/models/lineWithLegend.js @@ -135,6 +135,9 @@ nv.models.lineWithLegend = function() { } chart.dispatch = dispatch; + chart.legend = legend; + chart.xAxis = xAxis; + chart.yAxis = yAxis; chart.x = function(_) { if (!arguments.length) return getX; @@ -176,16 +179,5 @@ nv.models.lineWithLegend = function() { }; - // Expose the x-axis' tickFormat method. - //chart.xAxis = {}; - //d3.rebind(chart.xAxis, xAxis, 'tickFormat'); - chart.xAxis = xAxis; - - // Expose the y-axis' tickFormat method. - //chart.yAxis = {}; - //d3.rebind(chart.yAxis, yAxis, 'tickFormat'); - chart.yAxis = yAxis; - - return chart; }