multiple datapoints for the same X-axis bucket has the x-axis values repeating

[nirmala]

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 9 years, 8 months ago by nirmala.
• This topic was modified 9 years, 8 months ago by nirmala.
• This topic was modified 9 years, 8 months ago by nirmala.

[Anjali]

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

[sivasankari]

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

[Suyash Singh]

@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