Flot line graph - data does not adjust to more than 31 days

41 views
Skip to first unread message

Tomas Katz

unread,
Apr 30, 2015, 11:30:49 AM4/30/15
to flot-...@googlegroups.com

I am using a flot line graph, passing it an array of data.
The problem acurs when the data is bigger than 31 (31 days of a month), when its bigger than 31 the line returns to the beginning of the graph completing another moth and than returnes again and so on....
Can anyone help me find out what are the settings to fit all the days in one graph, with all the days on a single line without making the line restart from the left.

I am adding the code i am using, I am using the graph with angular.js so its the whole directive controller.

controller:function($scope, $element, $attrs,$filter){
$scope.elemId = $attrs.graphId;
$scope.graphTitle = $attrs.graphTitle;
$scope.showGraph = function(settings){
        //==========================================================
//============THE PLOT GRAPH AND ITS SETTINGS===============
        //==========================================================
$("#"+$scope.elemId).length && $.plot(
$("#"+$scope.elemId),
$scope.graphData,
{
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.3
}, {
opacity: 0.3
}]
},
grow: {
active: true,
steps: 50
}
},
points: {
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#f0f0f0",
borderWidth: 0
},
colors: ["#1bb399","#177bbb"],
xaxis: {
ticks: 15,
tickDecimals: 0
},
yaxis: {
ticks: 10,
tickDecimals: 0
},
tooltip: true,
tooltipOpts: {
content: "%s time of %xth is %y minutes",
defaultTheme: false,
shifts: {
x: 0,
y: 20
}
}
}
);
}
$scope.formatData = function(obj){
var ret = [],
date,
i=0;
for(date in obj){
if(obj.hasOwnProperty(date)){
ret.push([$filter('toNormaldate')(date).day,obj[date].number_of_minutes || obj[date].number_of_steps/10] );
}
i++;
}
return ret;
}
},
 

Reply all
Reply to author
Forward
0 new messages