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;
}
},