Results 1 to 5 of 5

Thread: Radar chart repeats value on the concentric circles when the max value<10

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
      0  

    Default Radar chart repeats value on the concentric circles when the max value<10

    Hi,

    I am facing 2 problems with radar chart:

    1. When I want to display data, such that the maximum data value is less than 10, the values are repeated on the concentric circles. How do I manipulate this so that 2 concentric circles don't show the same value? I believe this is an error. I have tried 'steps' and 'maximum' but this still changes nothing. I have attached a file with this post for better explanation - as can be seen 1,4 and 6 are repeated. How to avoid this repetition?

    2. Is there a way to start the value with 0, instead of 1?

    Thanks
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
      0  

    Default

    I saw that the variable 'steps' is set to 10 by default in this thread:
    http://www.sencha.com/forum/showthread.php?238139-Problems-with-Radar-Chart-when-data-is-JSON

    How can I change this value?

  3. #3

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
      0  

    Default

    Thank you for the answer. That resolved my first doubt. However, when I try to start with '0', the mapping is not done correctly. I use the following code:

    Code:
    Ext.define('Override.chart.axis.Radial', {
            override: 'Ext.chart.axis.Radial',
    
    
    
    
            drawLabel: function() {
                var me = this,
                    maxValue = me.maximum || 0,
                    steps = me.steps;
              
    
    
                me.callParent(arguments);
                
                if(me.labelArray && me.label.display != 'categories'){
                    for (var i = 0; i < steps; i++) {
                        me.labelArray[i].setAttributes({
                            text: (i) / steps * maxValue
                        }, true);
                    }
                }
            }
        });
    For the axes, the code is:

    Code:
    axes: [{
    								type: 'Radial',
    								position: 'radial',
    								label: {
    									display: true
    								},
    							minimum: 1,
    					        maximum: 5,
    					        steps: 10
    							}],
    This displays '0' as the starting point alright but the mapping wrong. How do I resolve this error?

    Thanks.....

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
      0  

    Default

    This is the test code:

    Code:
    /*global Ext:false */
    Ext.onReady(function () {
        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3'],
            data: [{
                'name': 'metric one',
                'data1': 1,
                'data2': 0,
                'data3': 0
            }, {
                'name': 'metric two',
                'data1': 0,
                'data2': 5,
                'data3': 3
            }, {
                'name': 'metric three',
                'data1': 2,
                'data2': 0,
                'data3': 4
            }, {
                'name': 'metric four',
                'data1': 0,
                'data2': 0,
                'data3': 0
            }, {
                'name': 'metric five',
                'data1': 0,
                'data2': 3,
                'data3': 1
            }]
        });
      
      Ext.define('Override.chart.axis.Radial', {
            override: 'Ext.chart.axis.Radial',
    
    
    
    
            drawLabel: function() {
                var me = this,
                    maxValue = me.maximum || 0,
                    steps = me.steps;
    
    
    
    
                me.callParent(arguments);
                if(me.labelArray && me.label.display != 'categories'){
                    for (var i = 0; i < steps; i++) {
                        me.labelArray[i].setAttributes({
                            text: (i + 1) / steps * maxValue
                        }, true);
                    }
                }
            }
        });
    
    
        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            theme: 'Category2',
            store: store,
            axes: [{
                type: 'Radial',
                position: 'radial',
                label: {
                    display: true
                },
              minimum: 1,
                    maximum: 5,
                    steps: 5
            }],
            series: [{
                type: 'radar',
                xField: 'name',
                yField: 'data1',
                showInLegend: true,
                showMarkers: true,
      
                style: {
                    'stroke-width': 2,
                   // fill: 'none'
                  opacity: 0.4
                }
            }, {
                type: 'radar',
                xField: 'name',
                yField: 'data2',
                showMarkers: true,
                showInLegend: true,
               
                style: {
                    'stroke-width': 2,
                   // fill: 'none'
                  opacity: 0.4
                }
            }, {
                type: 'radar',
                xField: 'name',
                yField: 'data3',
                showMarkers: true,
                showInLegend: true,
                
                style: {
                    'stroke-width': 2,
                   // fill: 'none'
                  opacity:0.4
                }
            }]
        });
    });
    My question is how do I get the plotting to start from '0'? Even if the 'text' is '0', the values are plotted as though the value was 1 to 5.

Tags for this Thread

Posting Permissions

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