Results 1 to 8 of 8

Thread: Column Chart - how to customize legend text

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    5

    Question Column Chart - how to customize legend text

    Hi,

    I need to customize the legend text in a column chart and could not find the way to do it.
    Tried to add renderer, legendRenderer to the legend but nothing works.

    Any help would be appreciated.

    10x,
    Aviad

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    Currently no way to easily do this.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    12

    Default

    Hi,

    I needed to customize axis title and for that I had to create my own chart theme. I guess you wil have to do the same for legend.

    You will have to create your own file_MyTheme.scss and use the cmd "build-touch-charts.sh/.bat", as described here : http://docs.sencha.com/touch-charts/1-0/#!/guide/touch_charts_styling

    Take a look at that file if you decide to create your theme :
    touch-charts\resources\themes\stylesheets\touch-charts\default\_legend.scss

  4. #4
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    182
    Answers
    10

    Default

    Are you referring to the way Sencha uses the data model field names as labels?
    In our case, we're using SQLite as the data source so it was a simple matter of using field aliases in our SELECT SQL statements to get user friendly display names.
    We also needed to make those names react to the on-the-fly language change system .. which we found we could

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    5

    Default

    Hi,

    Yes, I exactly mean that. I did workaround it by changing the field names.
    How did you make those names react to the 'on-the-fly language change system'? Do you mean you did it by changing the aliases on the SQL?

  6. #6
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Perth, Western Australia
    Posts
    182
    Answers
    10

    Default

    We have built an on-the-fly language changing system, using a JSON array of translations... called by a function called "_ ". We load the array before the models & proxies are loaded.

    This all works well...

    E.g. Model
    PHP Code:
    Ext.regModel('weatherGraphModel', {
        
    fields: [
            {
    name 'TheDate'     type 'datetime'},
            {
    name _('Rainfall')     , type 'float'},
            {
    name _('Evaporation')     , type 'float'},
            {
    name _('MinTemp')     , type 'float'},
            {
    name _('MaxTemp')     , type 'float'},
            {
    name _('MinHumidity')     , type 'float'},
            {
    name _('MaxHumidity')     , type 'float'},
            {
    name _('MaxTempHumidity')     , type 'float'}  
        ],
        
    proxy: {
            
    type"graphProxy"
        
    }
    }); 
    Proxy - SQL

    PHP Code:
                sql 'SELECT TheDate, '+
                
    'Rainfall AS '+_('Rainfall')+
                
    ', Evaporation AS '+_('Evaporation')+
                
    ', MinTemp AS '+_('MinTemp')+
                
    ', MaxTemp AS '+_('MaxTemp')+
                
    ', MinHumidity AS '+_('MinHumidity')+
                
    ', MaxHumidity AS '+_('MaxHumidity')+
                
    ', MaxTempHumidity AS '+_('MaxTempHumidity'); 
    Example of Code in Chart JS

    PHP Code:
        axes: [{
            
    type'Numeric',
            
    minimum0,
            
    position'left',
            
    fields: [_('Rainfall'), _('Evaporation'), _('MinTemp'), _('MaxTemp')], 

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    5

    Default

    Thanks!

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Location
    Chile, Rancagua.
    Posts
    5

    Default Try this

    I found this example for ExtJs4, but works for touch charts.


    series: [{
    yField: ['data1', 'data2'],
    title: ['Title 1', 'Title 2']
    }]

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •