Skip to content

Commit

Permalink
Merge pull request #188 from lievenjanssen/flotr2
Browse files Browse the repository at this point in the history 
[view/graph][m]: convert to Flotr2 from jquery flot for graph support - thx to @lievenjanssen.
  • Loading branch information
@rufuspollock
rufuspollock committed Jul 18, 2012
2 parents be934c0 + 4978e07 commit 2600a77
Show file tree
Hide file tree
Showing 3 changed files with 7,093 additions and 94 deletions.
18 changes: 18 additions & 0 deletions css/graph.css
View file
Expand Up @@ -17,3 +17,21 @@
margin: auto;
}

.flotr-mouse-value {
background-color: #FEE !important;
color: #000000 !important;
opacity: 0.8 !important;
border: 1px solid #fdd !important;
}

.flotr-legend {
border: none !important;
}

.flotr-legend-bg {
display: none;
}

.flotr-legend-color-box {
padding: 5px;
}
203 changes: 109 additions & 94 deletions src/view.graph.js
View file
Expand Up @@ -25,7 +25,7 @@ my.Graph = Backbone.View.extend({
className: "recline-graph",

template: ' \
<div class="panel graph"> \
<div class="panel graph" style="display: block;"> \
<div class="js-temp-notice alert alert-block"> \
<h3 class="alert-heading">Hey there!</h3> \
<p>There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.</p> \
Expand All @@ -37,6 +37,8 @@ my.Graph = Backbone.View.extend({

initialize: function(options) {
var self = this;
this.graphColors = ["#edc240", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"];

this.el = $(this.el);
_.bindAll(this, 'render', 'redraw');
this.needToRedraw = false;
Expand Down Expand Up @@ -93,14 +95,14 @@ my.Graph = Backbone.View.extend({
this.needToRedraw = true;
return;
}

// check we have something to plot
if (this.state.get('group') && this.state.get('series')) {
// faff around with width because flot draws axes *outside* of the element width which means graph can get push down as it hits element next to it
this.$graph.width(this.el.width() - 20);
var series = this.createSeries();
var options = this.getGraphOptions(this.state.attributes.graphType);
this.plot = $.plot(this.$graph, series, options);
this.setupTooltips();
this.plot = Flotr.draw(this.$graph.get(0), series, options);
}
},

Expand Down Expand Up @@ -130,120 +132,132 @@ my.Graph = Backbone.View.extend({
}
return val;
};

var trackFormatter = function (obj) {
var x = obj.x;
var y = obj.y;
// it's horizontal so we have to flip
if (self.state.attributes.graphType === 'bars') {
var _tmp = x;
x = y;
y = _tmp;
}
// convert back from 'index' value on x-axis (e.g. in cases where non-number values)
//if (self.model.records.models[x]) {
// x = self.model.records.models[x].get(self.state.attributes.group);
//};

// is it time series
var xfield = self.model.fields.get(self.state.attributes.group);
var isDateTime = xfield.get('type') === 'date';
if (isDateTime) {
x = x.toLocaleDateString();
}

var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
group: self.state.attributes.group,
x: x,
series: obj.series.label,
y: y
});

return content;
};

var xaxis = {};
// check for time series on x-axis
if (this.model.fields.get(this.state.get('group')).get('type') === 'date') {
xaxis.mode = 'time';
xaxis.timeformat = '%y-%b';
}
xaxis.autoscale = true;
xaxis.autoscaleMargin = 0.02;
};
var yaxis = {};
yaxis.autoscale = true;
yaxis.autoscaleMargin = 0.02;

var mouse = {};
mouse.track = true;
mouse.relative = true;
mouse.trackFormatter = trackFormatter;

var legend = {};
legend.position = 'ne';

// mouse.lineColor is set in createSeries
var optionsPerGraphType = {
lines: {
series: {
lines: { show: true }
},
xaxis: xaxis
legend: legend,
colors: this.graphColors,
lines: { show: true },
xaxis: xaxis,
yaxis: yaxis,
mouse: mouse
},
points: {
series: {
points: { show: true }
},
legend: legend,
colors: this.graphColors,
points: { show: true, hitRadius: 5 },
xaxis: xaxis,
yaxis: yaxis,
mouse: mouse,
grid: { hoverable: true, clickable: true }
},
'lines-and-points': {
series: {
points: { show: true },
lines: { show: true }
},
legend: legend,
colors: this.graphColors,
points: { show: true, hitRadius: 5 },
lines: { show: true },
xaxis: xaxis,
yaxis: yaxis,
mouse: mouse,
grid: { hoverable: true, clickable: true }
},
bars: {
series: {
lines: {show: false},
bars: {
legend: legend,
colors: this.graphColors,
lines: { show: false },
yaxis: yaxis,
mouse: {
track: true,
relative: true,
trackFormatter: trackFormatter,
fillColor: '#FFFFFF',
fillOpacity: 0.3,
position: 'e'
},
bars: {
show: true,
barWidth: 1,
align: "center",
fill: true,
horizontal: true
}
horizontal: true,
shadowSize: 0,
barWidth: 0.8
},
grid: { hoverable: true, clickable: true },
yaxis: {
tickSize: 1,
tickLength: 1,
tickFormatter: tickFormatter,
min: -0.5,
max: self.model.records.length - 0.5
}
}
},
columns: {
legend: legend,
colors: this.graphColors,
lines: { show: false },
yaxis: yaxis,
mouse: {
track: true,
relative: true,
trackFormatter: trackFormatter,
fillColor: '#FFFFFF',
fillOpacity: 0.3,
position: 'n'
},
bars: {
show: true,
horizontal: false,
shadowSize: 0,
barWidth: 0.8
},
},
grid: { hoverable: true, clickable: true },
};
return optionsPerGraphType[typeId];
},

setupTooltips: function() {
var self = this;
function showTooltip(x, y, contents) {
$('<div id="flot-tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}

var previousPoint = null;
this.$graph.bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;

$("#flot-tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
// it's horizontal so we have to flip
if (self.state.attributes.graphType === 'bars') {
var _tmp = x;
x = y;
y = _tmp;
}
// convert back from 'index' value on x-axis (e.g. in cases where non-number values)
if (self.model.records.models[x]) {
x = self.model.records.models[x].get(self.state.attributes.group);
} else {
x = x.toFixed(2);
}
y = y.toFixed(2);

// is it time series
var xfield = self.model.fields.get(self.state.attributes.group);
var isDateTime = xfield.get('type') === 'date';
if (isDateTime) {
x = new Date(parseInt(x)).toLocaleDateString();
}

var content = _.template('<%= group %> = <%= x %>, <%= series %> = <%= y %>', {
group: self.state.attributes.group,
x: x,
series: item.series.label,
y: y
});
showTooltip(item.pageX, item.pageY, content);
}
}
else {
$("#flot-tooltip").remove();
previousPoint = null;
}
});
},

createSeries: function () {
var self = this;
var series = [];
Expand Down Expand Up @@ -272,7 +286,7 @@ my.Graph = Backbone.View.extend({
points.push([x, y]);
}
});
series.push({data: points, label: field});
series.push({data: points, label: field, mouse:{lineColor: self.graphColors[series.length]}});
});
return series;
}
Expand All @@ -291,6 +305,7 @@ my.GraphControls = Backbone.View.extend({
<option value="lines">Lines</option> \
<option value="points">Points</option> \
<option value="bars">Bars</option> \
<option value="columns">Columns</option> \
</select> \
</div> \
<label>Group Column (x-axis)</label> \
Expand Down

1 comment on commit 2600a77

@lievenjanssen
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pulling! You still need to do a new build. The dist folder is not in line with the changes in the pull request now.

Please sign in to comment.