1. #1
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    264
    Vote Rating
    8
    troseberry will become famous soon enough

      3  

    Default KPI Gauge

    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

  2. #2
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    372
    Vote Rating
    4
    wemerson.januario is on a distinguished road

      0  

    Default


    nice work, thanks!
    Wemerson Januario
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 84101145 - Goiânia-GO- Brazil
    Consulting and Training Ext JS
    Projects: (Nubes ERP)

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Location
    Lahore, Pakistan
    Posts
    7
    Vote Rating
    0
    Muhammad Hamid is on a distinguished road

      0  

    Default Gauge.html files

    Gauge.html files


    Can you give me files which you include in your Gauge.html
    ext-all.css
    example.css
    bootstrap.js
    example-data.js

    I need these files because gauges are not shown to me due to missing of these files
    thank you

  4. #4
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    264
    Vote Rating
    8
    troseberry will become famous soon enough

      0  

    Default


    You need to download the latest ExtJs Library and just drop the files in the chart example folder and then open the gauge.html file

  5. #5
    Sencha User
    Join Date
    Sep 2011
    Location
    Lahore, Pakistan
    Posts
    7
    Vote Rating
    0
    Muhammad Hamid is on a distinguished road

      0  

    Default Gauge View

    Gauge View


    Thanks dear

    but there is issue needle view is not showing properly as in your sacreenshot and colours are not diplayed only one colour is displayed on whole gauge

  6. #6
    Sencha User
    Join Date
    Feb 2008
    Posts
    107
    Vote Rating
    0
    JDevloper is on a distinguished road

      0  

    Default


    Hi Troseberry,

    I am using your KPI gauge,But my panel has and expand/collapse capability ,show when i expand

    the panel pivot is moving some where,please give me a solution....

  7. #7
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    264
    Vote Rating
    8
    troseberry will become famous soon enough

      0  

    Default


    Can you please post a copy of the code that your using. I have tried to duplicate any issues using a collapsible panel and it seems to be working for me with no issues.

  8. #8
    Sencha User
    Join Date
    Sep 2011
    Location
    St. Paul, MN
    Posts
    13
    Vote Rating
    0
    mikegriffinn@gmail.com is on a distinguished road

      0  

    Default


    Have you done any more work on this? We're building an awesome dashboard app with an easy user UI to map grids that we create by importing spreadsheets to the widget code. It looks like your code will be a great basis for adding gauge widget. You can get and idea of what we are doing at http://www.otusanalytics.com/. We offer a free 3 dashboard instance so you can signup and check it out to get an idea of what we are doing. Thanks for posting this code!!

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    Singapore
    Posts
    22
    Vote Rating
    0
    Aranair is on a distinguished road

      0  

    Default modification?

    modification?


    Just a quick modification/bug fix:

    at about line 162, probably should set the pivot sprite's attributes again inside "if (animate)"
    Code:
    
    me.needlePivotSprite.setAttributes({
        type: 'circle',
    fill: me.needle.pivotFill || '#222',
    radius: me.needle.pivotRadius || 7,
    x: centerX,
    y: centerY
    });
    Otherwise, the pivotSprite will just remain where it is at~


    I am still figuring out why sometimes the step marks just warp out of position or disappear. Anyone figured this out?

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    1
    Vote Rating
    0
    bhupalskanwal is on a distinguished road

      0  

    Default Awesome control

    Awesome control


    Many Thanks

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar