Live Data with timestamp in axisX, bug overlapping label

[oijkn]

Hi,

I’m using your great canvasjs chart in my actual project and all works good except when I leave run the chart too long.
All label are overlapping !

I followed your example from this page : Live Chart with dataPoints from External JSON and I adapted it for my needs.

In my case the value x is in timestamp and y is numeric (x: 1520500115000, y: 18)

Here is my jsfiddle

Thank you in advance for your help and support.

BR

[Vishwas R]

@oijkn,

Labels are overlapping as you are setting interval to 1 and intervalType to ‘second’, which means labels should be shown at every 1 second interval. Removing that should work fine in your case. Please take a look at this updated jsfiddle. Also you seem to be using v1.7.0, please update to the latest version 2.0.1, which has more chart-types and features. You can download the latest version from download-page and let us know your feedback.

—
Vishwas R
Team CanvasJS

[oijkn]

@vishwas,

Thank you for your fast reply. sorry for using an old version, I will update it in my code.

I set interval to 1 and intervaltype to ‘second’ because when i use the feature zoomenabled to ‘true’ I have a problem (see capture below), the time is repeated between each steps (1 second).

Do you know how to manage it ? To just show one time between each tick.

Thank you for you help.

BR.

[Vishwas R]

@oijkn,

You can change the intervalType manually based on zoom-level with the help of rangeChanging event handler. Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[oijkn]

@vishwas,

Well i tried your rangeChanging method but it looks like it doesn’t work, look at this jsfiddle and zomm at the maximum. Maybe it’s me who uses the method badly…

Thank you for your help and support.

BR.

[oijkn]

I suppose you are very busy but if you can help me with this problem I will very appreciate it.

Thank you in advance for your help.

BR.

[Vishwas R]

@oijkn,

You can update intervalType and interval based on the zoomed-range. Please take a look at this updated jsfiddle. You can further customize it according to your requirements and the zoomed-range.

—
Vishwas R
Team CanvasJS

[oijkn]

@vishwas,

Thank you for the help ! I will try to play with the jsfiddle and adapt it for my needs.

Have a good day, regards.