diff --git a/README.md b/README.md index ae3fd66d..d9e1d58f 100755 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ For larger changes: * [Max Ogden](http://maxogden.com/) * [John Glover](https://github.com/johnglover) * [James Casbon](http://casbon.me/) -* [Adria Mercader](http://amercader.net/) +* [AdriĆ  Mercader](http://amercader.net/) * [Dominik Moritz](https://github.com/domoritz) * [Friedrich Lindenberg](http://pudo.org/) * And [many more](https://github.com/okfn/recline/graphs/contributors) diff --git a/src/view.flot.js b/src/view.flot.js index 3a07f98c..d810b723 100644 --- a/src/view.flot.js +++ b/src/view.flot.js @@ -12,10 +12,11 @@ this.recline.View = this.recline.View || {}; // * model: recline.Model.Dataset // * state: (optional) configuration hash of form: // -// { +// { // group: {column name for x-axis}, // series: [{column name for series A}, {column name series B}, ... ], -// graphType: 'line' +// graphType: 'line', +// graphOptions: {custom [flot options]} // } // // NB: should *not* provide an el argument to the view but must let the view @@ -80,7 +81,7 @@ my.Flot = Backbone.View.extend({ // There are issues generating a Flot graph if either: // * The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with // Uncaught Invalid dimensions for plot, width = 0, height = 0 - // * There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value' + // * There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value' var areWeVisible = !jQuery.expr.filters.hidden(this.el[0]); if ((!areWeVisible || this.model.records.length === 0)) { this.needToRedraw = true; @@ -191,7 +192,7 @@ my.Flot = Backbone.View.extend({ return label; }; - + var xaxis = {}; xaxis.tickFormatter = tickFormatter; @@ -222,7 +223,7 @@ my.Flot = Backbone.View.extend({ var yaxis = {}; yaxis.autoscale = true; yaxis.autoscaleMargin = 0.02; - + var legend = {}; legend.position = 'ne'; @@ -231,8 +232,8 @@ my.Flot = Backbone.View.extend({ grid.clickable = true; grid.borderColor = "#aaaaaa"; grid.borderWidth = 1; - - var optionsPerGraphType = { + + var optionsPerGraphType = { lines: { legend: legend, colors: this.graphColors, @@ -259,22 +260,43 @@ my.Flot = Backbone.View.extend({ grid: grid }, bars: { + legend: legend, + colors: this.graphColors, + lines: { show: false }, + xaxis: yaxis, + yaxis: xaxis, + grid: grid, + bars: { + show: true, + horizontal: true, + shadowSize: 0, + align: 'center', + barWidth: 0.8 + } + }, + columns: { legend: legend, colors: this.graphColors, lines: { show: false }, xaxis: xaxis, yaxis: yaxis, + grid: grid, bars: { show: true, horizontal: false, shadowSize: 0, align: 'center', barWidth: 0.8 - }, - grid: grid + } } }; - return optionsPerGraphType[typeId]; + + if (self.state.get('graphOptions')) { + return _.extend(optionsPerGraphType[typeId], + self.state.get('graphOptions')); + } else { + return optionsPerGraphType[typeId]; + } }, createSeries: function() { @@ -289,22 +311,29 @@ my.Flot = Backbone.View.extend({ // time series var xtype = xfield.get('type'); var isDateTime = (xtype === 'date' || xtype === 'date-time' || xtype === 'time'); - + if (isDateTime) { - // datetime - if (self.state.attributes.graphType != 'bars') { + if (self.state.attributes.graphType != 'bars' && + self.state.attributes.graphType != 'columns') { x = new Date(x).getTime(); } else { x = index; } } else if (typeof x === 'string') { - x = index; + x = parseFloat(x); + if (isNaN(x)) { + x = index; + } } var yfield = self.model.fields.get(field); var y = doc.getFieldValue(yfield); - - points.push([x, y]); + + if (self.state.attributes.graphType == 'bars') { + points.push([y, x]); + } else { + points.push([x, y]); + } }); series.push({ data: points, @@ -329,9 +358,10 @@ my.FlotControls = Backbone.View.extend({ \ \ \ + \ \ \ - \ + \
\ \
\ - \ + \
\