Results 1 to 10 of 39

Thread: KPI Gauge

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277
    Vote Rating
    10
      3  

    Default KPI Gauge

    ***Update***
    Added support for new ExtJs 4.2.0
    Series - KPIGauge
    - Updated to be capatible with ExtJs 4.2.0
    - Updated needle configuration to allow as optional
    - Apply onAnimate method to the needle, needlePivot, and value sprites to correctly redraw location on animated resize of chart.
    Axis - KPIGauge
    - Update "drawAxis" method to allow for axis to inherit the applied chart theme, which by default is "Base"
    - Update "drawLabel" method to allow for user customized/theme styling of labels. Default library method hard codes color, font.
    - set "position: 'left'" in order to allow the axis to inherit the applied chart theme. Defaults to the "Base" theme.
    - if you define "position: 'gauge'" then it will use default colors and font as defined in Ext.draw.Surface



    Heres a small proof of concept extension I created for the Chart's Gauge series. It allows you to specify the different slice ranges with start, end, and color. Also contains the ability to specify the needle width, color and pivot point attributes as well.

    screenshot.png

    Example in the attached can just be dropped in the libraryr examples directory
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath('Ext.ux', 'ux');
    Ext.Loader.setConfig('disableCaching', false);
    Ext.require([
        'Ext.chart.*', 
        'Ext.ux.chart.series.KPIGauge', 
        'Ext.ux.chart.axis.KPIGauge',
        'Ext.chart.axis.Gauge', '
        'Ext.chart.series.*', 
        'Ext.Window'
    ]);
    Ext.onReady(function () {
        Ext.create('Ext.Window', {
            width: 800,
            height: 400,
            minWidth: 650,
            minHeight: 225,
            title: 'Gauge Charts',
            tbar: [{
                text: 'Reload Data',
                handler: function () {
                    // Add a short delay to prevent fast sequential clicks
                    window.loadTask.delay(100, function () {
                        store1.loadData(generateData(1));
                        store3.loadData(generateData(1));
                        store4.loadData(generateData(1));
                    });
                }
            }],
            layout: {
                type: 'hbox',
                align: 'stretch',
                padding: 5
            },
            items: [{
                xtype: 'chart',
                style: 'background:#000',
                animate: {
                    easing: 'elasticIn',
                    duration: 1000
                },
                store: store1,
                insetPadding: 50,
                flex: 1,
                gradients: [{
                    id: 'gradientRed',
                    angle: 15,
                    stops: {
                        0: {
                            color: '#750000'
                        },
                        100: {
                            color: '#FF0000'
                        }
                    }
                }, {
                    id: 'gradientYellow',
                    angle: 30,
                    stops: {
                        0: {
                            color: '#9D8D00'
                        },
                        100: {
                            color: '#FFFF00'
                        }
                    }
                }, {
                    id: 'gradientGreen',
                    angle: 45,
                    stops: {
                        0: {
                            color: '#1C5910'
                        },
                        100: {
                            color: '#00ff00'
                        }
                    }
                }],
                axes: [{
                    type: 'kpigauge',
                    position: 'left',
                    minimum: 0,
                    maximum: 100,
                    steps: 10,
                    margin: 0,
                    label: {
                        fill: '#fff',
                        font: '12px Heveltica, sans-serif'
                    }
                }],
                series: [{
                    type: 'kpigauge',
                    field: 'data1',
                    needle: {
                        width: 2,
                        pivotFill: '#fff',
                        pivotRadius: 5
                    },
                    ranges: [{
                        from: 0,
                        to: 70,
                        color: 'url(#gradientRed)'
                    }, {
                        from: 70,
                        to: 90,
                        color: 'url(#gradientYellow)'
                    }, {
                        from: 90,
                        to: 100,
                        color: 'url(#gradientGreen)'
                    }],
                    donut: 70
                }]
            }, {
                xtype: 'chart',
                style: 'background:#fff',
                animate: {
                    easing: 'elasticIn',
                    duration: 1000
                },
                store: store1,
                insetPadding: 50,
                flex: 1,
                axes: [{
                    type: 'kpigauge',
                    position: 'left',
                    minimum: 0,
                    maximum: 100,
                    steps: 10,
                    margin: 0,
                    label: {
                        fill: '#333',
                        font: '12px Heveltica, sans-serif'
                    }
                }],
                series: [{
                    type: 'kpigauge',
                    field: 'data1',
                    needle: {
                        width: 2,
                        pivotFill: '#000',
                        pivotRadius: 5
                    },
                    ranges: [{
                        from: 0,
                        to: 70,
                        color: '#FF0000'
                    }, {
                        from: 70,
                        to: 90,
                        color: '#FFFF00'
                    }, {
                        from: 90,
                        to: 100,
                        color: '#00FF00'
                    }],
                    donut: 70
                }]
            }]
        }).show();
    });
    KPIGauge.zip
    Last edited by troseberry; 27 Mar 2013 at 10:47 AM. Reason: Update for 4.2.0

Posting Permissions

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