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

This topic contains 3 replies, has 4 voices, and was last updated by  Suyash Singh 1 month, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 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 2 years, 3 months ago by  nirmala.
    • This topic was modified 2 years, 3 months ago by  nirmala.
    • This topic was modified 2 years, 3 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

    #15144

    sivasankari
    Member

    Hi ,
    I am facing a issue… I am having an api from which i get list of x and y values.For repeated x values graph is plotted only once. X-axis is actually in hours. Please help me to solve this with detailed example

    #15150

    Suyash Singh
    Moderator

    @sivasankari,

    You can use labels instead of x-values. With date-time labels you can use labelFormatter to format the axisX labels. Here’s an example.

    If this doesn’t suit your requirements, can you please provide us with some pictorial representation or jsfiddle so that we can help you out better?

    ___
    Suyash Singh
    Team CanvasJS

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

You must be logged in to reply to this topic.