Reputation: 11310
I am trying to generate a graph using Flot library.
var d= [ [1293840000000,332],[1293926400000,321],[1294012800000,310],[1294099200000,299],[1294185600000,288],[1294272000000,277],[1294358400000,266],[1294444800000,255],[1294531200000,244],[1294617600000,233],[1294704000000,222],[1294790400000,211],[1294876800000,200],[1294963200000,189],[1295049600000,178],[1295136000000,167],[1295222400000,156],[1295308800000,145],[1295395200000,134],[1295481600000,123],[1295568000000,112],[1295654400000,101],[1295740800000,90],[1295827200000,79],[1295913600000,68],[1296000000000,57],[1296086400000,46],[1296172800000,35],[1296259200000,24],[1296345600000,13]];
$.plot($("#placeholder"), [d], { xaxis: { mode: "time" } });
The above generates the graph. But when I have the data contained in d[]
in a variable and I try using
var d=[formateddata3];
Where formatteddata3 has
[1293840000000,332],[1293926400000,321],[1294012800000,310],[1294099200000,299],
[1294185600000,288],[1294272000000,277],[1294358400000,266],[1294444800000,255],
[1294531200000,244],[1294617600000,233],[1294704000000,222],[1294790400000,211],
[1294876800000,200],[1294963200000,189],[1295049600000,178],[1295136000000,167],
[1295222400000,156],[1295308800000,145],[1295395200000,134],[1295481600000,123],
[1295568000000,112],[1295654400000,101],[1295740800000,90],[1295827200000,79],
[1295913600000,68],[1296000000000,57],[1296086400000,46],[1296172800000,35],
[1296259200000,24],[1296345600000,13]
The issue I'm thinking of is passing the value from the variable into the array.
I am building this formateddata3
using for a loop. Hopefully someone can help me with the right way of doing it
Also when i alert d with with values (ie one without passing the variable) i get
1293840000000,332,1293926400000,321,1294012800000,310,1294099200000,299,
1294185600000,288
whereas when i alert with the vairable passed i get
[1293840000000,332],[1293926400000,310],[1294012800000,288]
The first one generates the graph...
//here is full code as asked
var d1=[{!formateddata1}];
var d2=[{!formateddata2}];
var start = new Date(document.getElementById('Stardate').value);
var end= new Date(document.getElementById('CompleteDate').value);
var noofdays=datediff(start ,end,'days') ;
var hours= document.getElementById('page1:form2:amount').value ;
var totalhours= {!est_project_hours};
var formateddata3='';
var cumhours=0;
for (var i=0;i<noofdays;i++)
{
if (i==0)
{
cumhours=totalhours;
formateddata3='['+start.getTime()+ ','+cumhours+'],[';
alert(formateddata3);
}
else if(i==noofdays-1)
{
start.setDate(start.getDate()+1);
cumhours=cumhours-hours;
formateddata3=formateddata3+start.getTime()+ ','+cumhours+']';
}
else
{
start.setDate(start.getDate()+1);
cumhours=cumhours-hours;
formateddata3=formateddata3+start.getTime()+ ','+cumhours+'],['
}
}
// when i use the d3 with these values the graph works
//var d3=[ [1293840000000,332],[1293926400000,321],[1294012800000,310], [1294099200000,299],[1294185600000,288],[1294272000000,277],[1294358400000,266],[1294444800000,255],[1294531200000,244],[1294617600000,233],[1294704000000,222],[1294790400000,211],[1294876800000,200],[1294963200000,189],[1295049600000,178],[1295136000000,167],[1295222400000,156],[1295308800000,145],[1295395200000,134],[1295481600000,123],[1295568000000,112],[1295654400000,101],[1295740800000,90],[1295827200000,79],[1295913600000,68],[1296000000000,57],[1296086400000,46],[1296172800000,35],[1296259200000,24],[1296345600000,13]];
//alert([formateddata3]);
var d3=[];
var d3=[formateddata3];// but when i use it like this it doesnt work
alert('d3 value is '+d3);
alert('d1 value is '+d1);
alert('d2 value is '+d2);
j$.plot(j$("#placeholder"),[ { label: "Timelog", data:d1 },{ label: "Avg", data:d2 },{ label: "Simulated", data:d3}],
{
series: {
lines: { show: true },
points: { show: true }
},
xaxis:
{ mode: "time",
min: {!startdate},
max: {!enddate}
}
,yaxis: {
min:0, tickSize: 5
}
});
Upvotes: 3
Views: 1870
Reputation: 12214
Updated
It seems you're building your formateddata3 as a string. flot expects a javascript array.
var formateddata3 = new Array();
for (var i=0;i<noofdays;i++)
{
if (i==0)
{
cumhours=totalhours;
}
else if(i==noofdays-1)
{
start.setDate(start.getDate()+1);
cumhours=cumhours-hours;
}
else
{
start.setDate(start.getDate()+1);
cumhours=cumhours-hours;
}
formateddata3.push(new Array(start.getTime(), cumhours));
}
Just pass formateddata3 directly to flot then.
Upvotes: 3