'),
- offset;
-
- ss.tabsContainer = container;
- ss.tabs = { graph : graph, data : data };
-
- D.insert(container, graph);
- D.insert(container, data);
- D.insert(this.el, container);
-
- offset = D.size(data).height + 2;
- this.plotOffset.bottom += offset;
-
- D.setStyles(container, {top: this.canvasHeight-offset+'px'});
-
- this.
- observe(graph, 'click', function(){ss.showTab('graph');}).
- observe(data, 'click', function(){ss.showTab('data');});
- if (this.options.spreadsheet.initialTab !== 'graph'){
- ss.showTab(this.options.spreadsheet.initialTab);
- }
- }
- },
- /**
- * Builds a matrix of the data to make the correspondance between the x values and the y values :
- * X value => Y values from the axes
- * @return {Array} The data grid
- */
- loadDataGrid: function(){
- if (this.seriesData) return this.seriesData;
-
- var s = this.series,
- rows = {};
-
- /* The data grid is a 2 dimensions array. There is a row for each X value.
- * Each row contains the x value and the corresponding y value for each serie ('undefined' if there isn't one)
- **/
- _.each(s, function(serie, i){
- _.each(serie.data, function (v) {
- var x = v[0],
- y = v[1],
- r = rows[x];
- if (r) {
- r[i+1] = y;
- } else {
- var newRow = [];
- newRow[0] = x;
- newRow[i+1] = y;
- rows[x] = newRow;
+
+ function boundX(x, graph) {
+ return Math.min(Math.max(0, x), graph.plotWidth - 1);
}
- });
- });
- // The data grid is sorted by x value
- this.seriesData = _.sortBy(rows, function(row, x){
- return parseInt(x, 10);
- });
- return this.seriesData;
- },
- /**
- * Constructs the data table for the spreadsheet
- * @todo make a spreadsheet manager (Flotr.Spreadsheet)
- * @return {Element} The resulting table element
- */
- constructDataGrid: function(){
- // If the data grid has already been built, nothing to do here
- if (this.spreadsheet.datagrid) return this.spreadsheet.datagrid;
-
- var s = this.series,
- datagrid = this.spreadsheet.loadDataGrid(),
- colgroup = ['
'],
- buttonDownload, buttonSelect, t;
-
- // First row : series' labels
- var html = ['
'];
- html.push('
');
- _.each(s, function(serie,i){
- html.push('
'+(serie.label || String.fromCharCode(65+i))+'
');
- colgroup.push('
');
- });
- html.push('
');
- // Data rows
- _.each(datagrid, function(row){
- html.push('
');
- _.times(s.length+1, function(i){
- var tag = 'td',
- value = row[i],
- // TODO: do we really want to handle problems with floating point
- // precision here?
- content = (!_.isUndefined(value) ? Math.round(value*100000)/100000 : '');
- if (i === 0) {
- tag = 'th';
- var label = getRowLabel.call(this, content);
- if (label) content = label;
+ function boundY(y, graph) {
+ return Math.min(Math.max(0, y), graph.plotHeight);
}
- html.push('<'+tag+(tag=='th'?' scope="row"':'')+'>'+content+'');
- }, this);
- html.push('
');
-
- // Add x axis title
- if (a.x.options.title && a.x.used)
- html.push(
- '
', a.x.options.title, '
'
- );
-
- // Add x2 axis title
- if (a.x2.options.title && a.x2.used)
- html.push(
- '
', a.x2.options.title, '
'
- );
-
- // Add y axis title
- if (a.y.options.title && a.y.used)
- html.push(
- '
', a.y.options.title, '
'
- );
-
- // Add y2 axis title
- if (a.y2.options.title && a.y2.used)
- html.push(
- '
', a.y2.options.title, '
'
- );
-
- html = html.join('');
-
- var div = D.create('div');
- D.setStyles({
- color: options.grid.color
- });
- div.className = 'flotr-titles';
- D.insert(this.el, div);
- D.insert(div, html);
- }
- }
-});
-})();
+ var
+ D = Flotr.DOM,
+ _ = Flotr._;
+
+ Flotr.addPlugin('spreadsheet', {
+ options: {
+ show: false, // => show the data grid using two tabs
+ tabGraphLabel: 'Graph',
+ tabDataLabel: 'Data',
+ toolbarDownload: 'Download CSV', // @todo: add better language support
+ toolbarSelectAll: 'Select all',
+ csvFileSeparator: ',',
+ decimalSeparator: '.',
+ tickFormatter: null,
+ initialTab: 'graph'
+ },
+ /**
+ * Builds the tabs in the DOM
+ */
+ callbacks: {
+ 'flotr:afterconstruct': function() {
+ // @TODO necessary?
+ //this.el.select('.flotr-tabs-group,.flotr-datagrid-container').invoke('remove');
+
+ if (!this.options.spreadsheet.show) return;
+
+ var ss = this.spreadsheet,
+ container = D.node(''),
+ graph = D.node('
' + this.options.spreadsheet.tabGraphLabel + '
'),
+ data = D.node('
' + this.options.spreadsheet.tabDataLabel + '
'),
+ offset;
+
+ ss.tabsContainer = container;
+ ss.tabs = {
+ graph: graph,
+ data: data
+ };
+
+ D.insert(container, graph);
+ D.insert(container, data);
+ D.insert(this.el, container);
+
+ offset = D.size(data).height + 2;
+ this.plotOffset.bottom += offset;
+
+ D.setStyles(container, {
+ top: this.canvasHeight - offset + 'px'
+ });
+
+ this.
+ observe(graph, 'click', function() {
+ ss.showTab('graph');
+ }).
+ observe(data, 'click', function() {
+ ss.showTab('data');
+ });
+ if (this.options.spreadsheet.initialTab !== 'graph') {
+ ss.showTab(this.options.spreadsheet.initialTab);
+ }
+ }
+ },
+ /**
+ * Builds a matrix of the data to make the correspondance between the x values and the y values :
+ * X value => Y values from the axes
+ * @return {Array} The data grid
+ */
+ loadDataGrid: function() {
+ if (this.seriesData) return this.seriesData;
+
+ var s = this.series,
+ rows = {};
+
+ /* The data grid is a 2 dimensions array. There is a row for each X value.
+ * Each row contains the x value and the corresponding y value for each serie ('undefined' if there isn't one)
+ **/
+ _.each(s, function(serie, i) {
+ _.each(serie.data, function(v) {
+ var x = v[0],
+ y = v[1],
+ r = rows[x];
+ if (r) {
+ r[i + 1] = y;
+ } else {
+ var newRow = [];
+ newRow[0] = x;
+ newRow[i + 1] = y;
+ rows[x] = newRow;
+ }
+ });
+ });
+
+ // The data grid is sorted by x value
+ this.seriesData = _.sortBy(rows, function(row, x) {
+ return parseInt(x, 10);
+ });
+ return this.seriesData;
+ },
+ /**
+ * Constructs the data table for the spreadsheet
+ * @todo make a spreadsheet manager (Flotr.Spreadsheet)
+ * @return {Element} The resulting table element
+ */
+ constructDataGrid: function() {
+ // If the data grid has already been built, nothing to do here
+ if (this.spreadsheet.datagrid) return this.spreadsheet.datagrid;
+
+ var s = this.series,
+ datagrid = this.spreadsheet.loadDataGrid(),
+ colgroup = ['
'],
+ buttonDownload, buttonSelect, t;
+
+ // First row : series' labels
+ var html = ['