Gauge chart with needle

[Syntona]

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

[mitchellsimoens]

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+

[Syntona]

 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.

[rohit.advani]

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

[mcgary]

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.