Home › forums › Using CanvasJS › column chart
This topic contains 16 replies, has 3 voices, and was last updated by Indranil Deo 6 months ago.
Hello, I want to show my data (from datapoint) as axisY as well. Please let me know how is it done?
Can you please share a pictorial representation or jsfiddle with your requirements so that we can understand it better and help you out?
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?
You can use indexLabels to show y-values as shown in the link shared. Please take a look at this jsfiddle.
Thank you Vishwas, but why does it show everysecond label?
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.
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)?
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.
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?
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.
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…
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.
Intdranil, this is perfect, thanks so much.
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?
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.
You must be logged in to reply to this topic.