column chart

[dbertanjoli]

Hello, I want to show my data (from datapoint) as axisY as well. Please let me know how is it done?
Many thanks,
Debbie

[Vishwas R]

Debbie,

Can you please share a pictorial representation or jsfiddle with your requirements so that we can understand it better and help you out?

—
Vishwas R
Team CanvasJS

[dbertanjoli]

Hi Vishwas, this is my annual report from last year http://file.pathology.ubc.ca/PathologyAtAGlance2017.html. Set the first chart faculty by rank, I want to be able to place data inside the column (data needs to be visible not only through tooltip). what do you think?
many thanks,
Debbie

[Vishwas R]

Debbie,

You can use indexLabels to show y-values as shown in the link shared. Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[dbertanjoli]

Thank you Vishwas, but why does it show everysecond label?
Deb

[Vishwas R]

Debbie,

Labels will be rendered at every interval, which is auto-calculated based on width of the chart and the range of x-values. You can set interval to 1, to show labels at every dataPoint in this case. Please take a look at this updated jsfiddle.

—
Vishwas R
Team CanvasJS

[dbertanjoli]

Thank you very much, I just have one more last question. My annual report will have several charts and I was wondering how to trigger animation of each when they come into the screen (when they come into view)?
Deb

[Indranil]

Debbie,

You can use animation property to set animation while rendering the Chart(same can be done for multiple charts). Please take a look at this jsfiddle.

___________
Indranil Deo,
Team CanvasJS

[dbertanjoli]

Hi Indranil, I think you misunderstood me, animation should be happening while the chart is in view. In this jsfiddle, when I scroll to the second line these two charts are already done with animation? What I would like to see when a chart comes into the view animation starts and if possible can be repeated whenever they are in view. What do you think?
Many thanks,
Deb

[Indranil]

Debbie,

Rendering the chart when you scroll down to the next view should work fine in your case. If it doesn’t suit your requirement can you please create a sample project with your sample code and share it over (google drive / one drive) so that we can understand your requirement better and help you out.

___________
Indranil Deo,
Team CanvasJS

[dbertanjoli]

Hi Indranil, please see this test page: http://file.pathology.ubc.ca/test/examples/01-overview/Test.html . All charts are animated but when you scroll to the bottom of the page you see only static charts as animation was triggered on page load (I guess). It should be triggered when they come in view. Can this be done? Also, I noticed animation is not working properly in IE but it is not important for my users…

Deb

[Indranil]

Debbie,

You can use scroll() to trigger a function that would get the position of an individual chart and then render the chart when it comes to the view. Please take a look at this updated code.

___________
Indranil Deo,
Team CanvasJS

[dbertanjoli]

Intdranil, this is perfect, thanks so much.
Deb

[dbertanjoli]

Hi Indranil, I still have some issue mostly with animation and rendering please see file.pathology.ubc.ca/test/indexTest.html

There are two scripts: one to control tab content and the second to render the chart as it comes into the view (please see above your code). However, tab content shows blank, can these two scripts co-exist? I will have at least 10 charts in this report and all of them should be render as they come into the view (same with tab content so animation should be trigger when tab is selected). Please take a look and let me know what do you think?
Many thanks,
Deb

[Indranil]

Debbie,

After going through your code it seems like you have not instantiated the chart Object. Instantiating the chart Object before rendering it should work fine in your case. Please take a look at this documentation page for further information.

___________
Indranil Deo,
Team CanvasJS