[#58,view/flot-graph][s]: tooltips for bar chart and, for bar charts, label x-axis with x values rather than numbers.

This commit is contained in:
Rufus Pollock
2012-03-16 00:22:41 +00:00
parent dc0dc0b76e
commit ded2360328

View File

@@ -149,11 +149,9 @@ my.FlotGraph = Backbone.View.extend({
return return
} }
var series = this.createSeries(); var series = this.createSeries();
var options = this.graphOptions[this.chartConfig.graphType]; var options = this.getGraphOptions(this.chartConfig.graphType);
this.plot = $.plot(this.$graph, series, options); this.plot = $.plot(this.$graph, series, options);
if (this.chartConfig.graphType in { 'points': '', 'lines-and-points': '' }) { this.setupTooltips();
this.setupTooltips();
}
// create this.plot and cache it // create this.plot and cache it
// if (!this.plot) { // if (!this.plot) {
// this.plot = $.plot(this.$graph, series, options); // this.plot = $.plot(this.$graph, series, options);
@@ -166,40 +164,63 @@ my.FlotGraph = Backbone.View.extend({
// } // }
}, },
graphOptions: { // needs to be function as can depend on state
lines: { getGraphOptions: function(typeId) {
series: { var self = this;
lines: { show: true } var tickFormatter = function (val) {
} if (self.model.currentDocuments.models[val]) {
} var out = self.model.currentDocuments.models[val].get(self.chartConfig.group);
, points: { // if the x-axis value was in fact a number we want that not the
series: { if (typeof(out) == 'number') {
points: { show: true } return val;
}, } else {
grid: { hoverable: true, clickable: true } return out;
} }
, 'lines-and-points': { }
series: { return val;
points: { show: true }, }
lines: { show: true } // TODO: we should really use tickFormatter and 1 interval ticks if (and
}, // only if) x-axis values are non-numeric
grid: { hoverable: true, clickable: true } // However, that is non-trivial to work out from a dataset (datasets may
} // have no field type info). Thus at present we only do this for bars.
, bars: { var options = {
series: { lines: {
lines: {show: false}, series: {
bars: { lines: { show: true }
show: true, }
barWidth: 1, }
align: "left", , points: {
fill: true series: {
points: { show: true }
},
grid: { hoverable: true, clickable: true }
}
, 'lines-and-points': {
series: {
points: { show: true },
lines: { show: true }
},
grid: { hoverable: true, clickable: true },
}
, bars: {
series: {
lines: {show: false},
bars: {
show: true,
barWidth: 1,
align: "center",
fill: true
}
},
grid: { hoverable: true, clickable: true },
xaxis: {
tickSize: 1,
tickLength: 1,
tickFormatter: tickFormatter
} }
},
xaxis: {
tickSize: 1,
tickLength: 1,
} }
} }
return options[typeId];
}, },
setupTooltips: function() { setupTooltips: function() {