Home forums Using CanvasJS column chart

This topic contains 16 replies, has 3 voices, and was last updated by  Indranil Deo 1 month, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #20354

    dbertanjoli
    Member

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

    #20357

    Vishwas R
    Keymaster

    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

    #20361

    dbertanjoli
    Member

    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

    #20362

    Vishwas R
    Keymaster

    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

    #20368

    dbertanjoli
    Member

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

    #20371

    Vishwas R
    Keymaster

    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

    #20380

    dbertanjoli
    Member

    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

    #20386

    Indranil Deo
    Member

    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

    #20388

    dbertanjoli
    Member

    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

    #20391

    Indranil Deo
    Member

    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

    #20401

    dbertanjoli
    Member

    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

    #20416

    Indranil Deo
    Member

    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

    #20420

    dbertanjoli
    Member

    Intdranil, this is perfect, thanks so much.
    Deb

    #20439

    dbertanjoli
    Member

    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

    #20446

    Indranil Deo
    Member

    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

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.