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
.
