Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Vote Rating
    0
    Syntona is on a distinguished road

      0  

    Default Unanswered: Gauge chart with needle

    Unanswered: Gauge chart with needle


    Hi,

    I am trying to create Gauge chart with needle.
    I have used config parameter "needle:true",
    However I can see the needle but the chart is in one color only (only 1 slice is added).

    Gauge with needle.jpg
    Is it by design or some bug in it.

    Attached image is 2 gauge chart with and without needle.


    Thanks in advance

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can I get a test case for this? Development has ceased on Touch Chart beta so bugs will not be fixed. We are only developing ST2 charts in ST 2.1.0+
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

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

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

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

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Vote Rating
    0
    Syntona is on a distinguished road

      0  

    Default Code to reproduce

    Code to reproduce


    Code:
     var GaugeChartPnl = Ext.create('Ext.Panel', {
            id: 'GaugeChartPnl',
            flex:1,
             layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                         insetPadding: 25
                      },
            items: [
                 {                   
                    xtype: 'chart',
                    id: 'gaugeChart',
                    flex: 1,
                    animate: {
                        easing: 'bounceOut',
                        duration: 500
                    },
                    store: store_gauge,
                    axes: [
                        {
                            type: 'gauge',
                            position: 'gauge',
                            minimum: 0,
                            maximum: 100,
                            steps: 10,
                            margin: 7
                        }
                    ],
                    series: [
                        {  
                            type: 'gauge',
                            field: 'sales_percentage',
                            needle: 'true',
                            donut: 50,
                            colorSet: ['#55B42F', '#ddd']
                        }
                    ]
                },
                {   
                    xtype: 'titlebar',
                    docked: 'bottom',
                    title: 'KPI',
                }
            ]
        });
    I hope it will help.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Location
    New Delhi
    Posts
    9
    Vote Rating
    0
    rohit.advani is on a distinguished road

      0  

    Default


    Hi,

    I'm working on Ext JS version 4.1 and same thing is happening with me as well.
    When I don't make use of needle attribute, I get 2 slices in a Gauge chart in 2 different colors but when I specify needle attribute, entire Gauge chart gets changed to only one color.

    Please see attached image.

    Any assistance here please.

    Sample code is mentioned as below:Ext.require(['Ext.chart.*', 'Ext.chart.axis.Gauge', 'Ext.chart.series.*', 'Ext.Window','Ext.chart.Label','Ext.draw.Color','Ext.draw.*']);
    var myStore = Ext.create('Ext.data.ArrayStore', {
    fields: [
    {name: 'chapters', type: 'int'}
    ],
    data: [['20'],['34']]
    });
    Ext.onReady(function () {
    Ext.create('Ext.Window', {
    width: 500,
    height: 500,
    minWidth: 500,
    minHeight: 500,
    title: 'Gauge Charts',
    layout: {
    type: 'hbox',
    align: 'stretch'
    },
    items: [{
    xtype: 'chart',
    style: 'background:blue',
    store: myStore,
    insetPadding: 25,
    flex: 1,
    axes: [{
    type: 'gauge',
    position: 'gauge',
    minimum: 0,
    maximum: 100,
    steps: 10,
    margin: -10
    }],
    series: [{
    type: 'gauge',
    field: 'chapters'
    //donut: 30,
    //needle: true,
    //colorSet: ['yellow', '#ddd']
    }],
    series: [{
    type: 'gauge',
    field: 'chapters'
    //donut: 30,
    //needle: true,
    //colorSet: ['green', '#ddd']
    }]
    }]
    }).show();
    });

    Regards,
    Rohit
    Attached Images

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2013
    Location
    Texas
    Posts
    2
    Vote Rating
    0
    mcgary is on a distinguished road

      0  

    Default Needle is first element in colorset when turned on

    Needle is first element in colorset when turned on


    I believe you just need to add a color to the colorset like so:
    ['black', 'yellow', '#ddd']
    Now the needle will be black and the yellow and grey will be used for the gauge sectors.