Home forums Using CanvasJS Graph Overlapping occurs when used on a different machins

This topic contains 5 replies, has 2 voices, and was last updated by  chandresh.sharma 3 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #4666

    chandresh.sharma
    Participant

    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

    #4685

    Sunil Urs
    Keymaster

    Chandresh,

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

    #4694

    chandresh.sharma
    Participant

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

    screenshot

    #4695

    chandresh.sharma
    Participant

    screenshot

    #4696

    Sunil Urs
    Keymaster

    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 3 years, 6 months ago by  Sunil Urs.
    #4713

    chandresh.sharma
    Participant

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

    Regards,
    Chandresh

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.