Graph Overlapping occurs when used on a different machins

[chandresh.sharma]

Hi, I am using your package for creating a line graph, this line graph gets the data from a api in json object, I then process that data and push the same in the desired json (i.e. x,y) format, and then plot the graphs using the same new json object to render the line chart.

below is the JS method for the same.
*****************************************************************
var plotGraph = function(obj_res){
if(obj_res !=false)
{
var arrayLength = 0;
var isArray = false;
$.each(obj_res.ROOT.FIRSTL, function(key, value) {
if(!isNaN(key)){
isArray = true;
}
arrayLength++;
});

var data =””;

if(isArray){

var daysxval1 = new Array();
var daysxval2 = new Array();
var daysxval3 = new Array();
var daysxval4 = new Array();
var daysxval5 = new Array();
var daysxval6 = new Array();
var daysyval = new Array();
var jsonObj = [];

for(count =arrayLength-1; count>=0;count–){

var daysxvalrep = obj_res.ROOT.FIRSTL[count].Date;

daysxval1[count] = parseInt(daysxvalrep.split(” “)[0].split(“-“)[0]);
daysxval2[count] = parseInt(daysxvalrep.split(” “)[0].split(“-“)[1]);
daysxval3[count] = parseInt(daysxvalrep.split(” “)[0].split(“-“)[2]);
daysxval4[count] = parseInt(daysxvalrep.split(” “)[1].split(“:”)[0]);
daysxval5[count] = parseInt(daysxvalrep.split(” “)[1].split(“:”)[1]);
daysxval6[count] = parseInt(daysxvalrep.split(” “)[1].split(“:”)[2]);
console.log(daysxval1[count]+” :: “+daysxval2[count]+” :: “+daysxval3[count]+” :: “+daysxval4[count]+” :: “+daysxval5[count]+” :: “+daysxval6[count]);

daysyval[count] = (obj_res.ROOT.FIRSTL[count].value)/10000;
// alert(” :: “+daysyval[count]);
var dateTimeLocal = new Date(daysxval1[count],daysxval2[count]-1,daysxval3[count],daysxval4[count],daysxval5[count],daysxval6[count]);
jsonObj.push({ x:dateTimeLocal, y:parseFloat(daysyval[count])});
}

if(arrayLength>0){
console.log(JSON.stringify(jsonObj));
var nedat1= “1” ;

var chart = new CanvasJS.Chart(“chartContainer1”,
{

title:{
text: “CPU Occupancy(%)”,
},
axisX: {
title:”Time”,
labelAngle: 60,
},
axisY: {
title:”CPU used”,
},
toolTip:{
enabled: false,
},

legend :{
horizontalAlign: ‘center’,
verticalAlign: ‘bottom’
},
data: [
{
markerType: “none”,
type: “line”,
xValueType: “dateTime”,
color:”#014D65″,
dataPoints: jsonObj
},
]
});

chart.render();

// firstgraph(findCount,daysxval,daysyval);

}else {alert(“No Match Found”);}

//alert(“data”+data);
} else {
//document.getElementById(“chartContainer1″).innerHTML=”<div style=’background-color:#f2f2f2 ;height: 75px; padding-top:80px; padding-left:150px; width: 200px;’>No Data found</div>”
// alert(“errorDescription”);
// alert(obj_res.businessOutput.myProfile.errorDescription);

}

}

}
****************************************************

Below is the chart container in html:::

<div id=”chartContainer1″ style=”height:170px; width: 100%;background-image:url(images/loadingimage.gif); background-position:center; background-repeat:no-repeat; “></div>

*****************************************************
the occurence of this issue is very random in nature, and it visualized on chrome and firefox both.

Regards,
Chandresh

[Sunil Urs]

Chandresh,

Can you please add some screenshots with browser version & OS details.

[chandresh.sharma]

Hi Sunil, Thanks for your reply, Below is the screenshot of the issue on Firefox 20.0 for Ubuntu

\Users\chandresh\Desktop\Screenshot from 2013-06-10 17%3A13%3A15.png

[chandresh.sharma]

[Sunil Urs]

Chandresh,

From the chart it looks like provided data is not in order.. Please verify

1. That the x(date) values is in order
2. Month values being passed to the Date constructor follow zero based index – in javascript month values range from 0-11 (instead of 1-12). See this post

In case there is no issue as mentioned above, please provide the jsonObj values. That is the best way to figure out the problem.

—
Sunil Urs

• This reply was modified 10 years, 9 months ago by Sunil Urs.

[chandresh.sharma]

Thanks Sunil, My issue seems to be resolved when changing the date and time values to timestamp.

Regards,
Chandresh