1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    3
    Vote Rating
    0
    nusrath.sulthana is on a distinguished road

      0  

    Default Answered: Bar Chart in Sencha touch2

    Answered: Bar Chart in Sencha touch2


    Hi Team,
    i'm new to sencha touch, right now i'm working with touch chart especially line, bar and area charts more. My requiremnt are 2
    1) to display label outside bar - tried with the chart example even though piece of code to display label is added but the graph doesn't show the label. Please let me know if the problem with API if not let me know the workaround to show the label in the bar. i working with example in touch-2.3.2\examples\charts\

    2) if at all above is not an issue, Is there any possibility to show two field value in bar label for example
    from store i'll get name, data1 and data2 . Graph will be plotted with name and data1 but the fact while display data1 as label in bar want data2 also to be displayed. not that data2 is only for display purpose and nothing to do with graph plotting.

    Thanks in advance
    Attached Images

  2. OK I modified the fiddle to show how to do this when the chart is horizontal. Is this what you had in mind?

  3. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    Answers
    335
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    You can use the series label config.
    Code:
    series: [{
                 type: 'bar',
                 xField: 'name',
                 yField: 'data1',
                 label: {
                     display: 'outside',
                     field: 'data1',
                 }
     ............
    https://fiddle.sencha.com/#fiddle/99o
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  4. #3
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    Answers
    335
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    You can use the series label config.
    Code:
    series: [{
                 type: 'bar',
                 xField: 'name',
                 yField: 'data1',
                 label: {
                     display: 'outside',
                     field: 'data1',
                 }
     ............
    https://fiddle.sencha.com/#fiddle/99o
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  5. #4
    Sencha User
    Join Date
    Aug 2014
    Posts
    3
    Vote Rating
    0
    nusrath.sulthana is on a distinguished road

      0  

    Default


    Thank you, there is no issue in column chart, but lable is not displayed in bar chart(i.e) bar in horizontal way as shown in attachment.

  6. #5
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    Answers
    335
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    OK I modified the fiddle to show how to do this when the chart is horizontal. Is this what you had in mind?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

Thread Participants: 1

Tags for this Thread