Home forums Using CanvasJS multiple datapoints for the same X-axis bucket has the x-axis values repeating

This topic contains 1 reply, has 2 voices, and was last updated by  Anjali 1 year, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #8489

    nirmala
    Participant

    I am trying to plot a line graph and have 2 issues
    First-> for the date buckets 12/02 – x-axis lable is showing date as 1/02
    Second-> also as multiple values exist for 12/02 shown as 1/02 repeats multiple times on the x-axis.
    Sample chart call with the dataset

    var chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “Battery Chart”
    },
    axisX: {
    title: “”,
    valueFormatString: “MM/DD” ,
    labelAngle: -50,
    minimum: new Date (2014,12,2), // change here
    maximum: new Date (2014,12,3)
    },
    axisY: {
    includeZero: false,
    title: “Battery (mV)”
    },
    data: [ {
    type: “line”,
    dataPoints: [{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,2), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900},{ x:new Date (2014,12,3), y: 3900}]
    }
    ]
    });
    chart.render();

    • This topic was modified 1 year, 8 months ago by  nirmala.
    • This topic was modified 1 year, 8 months ago by  nirmala.
    • This topic was modified 1 year, 8 months ago by  nirmala.
    #8500

    Anjali
    Participant

    nirmala,

    1) In JavaScript months are indexed from 0-11 and not from 1-12. Please refer to this post.

    So, December 2nd should be new Data (2014, 11, 2)

    2) Issue is because the automatically calculated interval is in hours and you have set valueFormatString to show MM/DD. So for every hour it is showing same month and date. Instead you also need to set interval and intervalType property as show in this jsfiddle.

    __
    Anjali

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

You must be logged in to reply to this topic.