[#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:
@@ -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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user