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

      0  

    Default


    I fixed the issue with reload of data and uploaded changes

  2. #22
    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 relatively new to ExtJS framework and currently using version 4.1. My requirement is exactly same what is shown in the screenshot in the first comment in this thread by troseberry.

    But when I try to render this sample code, I don't see anything on the browser. On debugging, it gives me problem saying "Failed to load resource: the server responded with a status of 404 (Not Found) -
    http://localhost:8080/testJs/ux/chart/axis/KPIGauge.js" and same error I'm getting for KPIGauge.js file in Series folder.

    Basically, what I have done, I have created one .js file (GaugeChart.js) which contains the same code as mentioned by trosberry in this thread and from this file, we are importing (Ext.Require) KPIGauge.js file and I'm getting the above mentioned problem probably because I'm not inheriting it in right way.

    Can someone in this thread please assist me with right approach ?

    Regards,
    Rohit

  3. #23
    Sencha User
    Join Date
    Feb 2014
    Posts
    22
    Vote Rating
    0
    dillu5c5 is on a distinguished road

      0  

    Default Need to display the legend for gauge chart

    Need to display the legend for gauge chart


    Hi all.
    Please suggest me a way to show up the legend in the gauge chart. I've used the plugin which you gave but I need to show 3 legends in the box but couldn't make it out using showInLengend: true with field config under series.

    Expecting a reply

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

      0  

    Default


    The legends have never worked with the KPI Gauge. I believe it has to do with the range config which is different than the way the normal gauge value is set. I will see if I can adjust the getLegendColor method.

  5. #25
    Sencha User
    Join Date
    Feb 2014
    Posts
    22
    Vote Rating
    0
    dillu5c5 is on a distinguished road

      0  

    Default animation for the gauge..

    animation for the gauge..


    Hi troseberry,
    Thanks for the reply I also need some help with respect to animation for the gauge chart. Right now the animation is applied only for the first range, is there a way to animate all segments of the gauge?

  6. #26
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277
    Vote Rating
    9
    troseberry will become famous soon enough

      0  

    Default


    can you give me an example of what data your wanting to show in the legend?

  7. #27
    Sencha User
    Join Date
    Feb 2014
    Posts
    22
    Vote Rating
    0
    dillu5c5 is on a distinguished road

      0  

    Default Legends for the KPI gauge

    Legends for the KPI gauge


    Hi Trooseberry,
    Please post some sample where I could have the legend to be displayed. I tried to get the legends but its coming undefined. Also the animations were coming for the first range of values. The code I'm using is

    var gaugeChart = Ext4.create('Ext.chart.Chart', {
    renderTo:renderToId,
    anchor:'100%',
    width: chartWidth,
    height: chartHeight,
    xtype: 'chart',
    store: chartStore,
    legend: {
    position: 'right',
    boxStroke: 0,
    labelFont: '10px Arial'
    },
    animate: Ext.isIE ? false : {
    easing: 'easeInOut',
    duration: 1000
    },
    axes: [{
    type: 'kpigauge',
    position: 'left',
    title:titleName,
    minimum: 0,
    maximum: 100,
    steps: 10,
    margin:-5,
    label: {
    fill: '#000',
    font: 'bold 12px Arial'
    }

    }],
    series: [{
    type: 'kpigauge',
    showInLegend: true,
    store: chartStore,
    needle: {
    width: 2,
    pivotFill: '#000',
    pivotRadius: 5,
    animate:true
    },
    rangesetRange,
    highlight: true,
    highlight: {
    segment: {
    margin: 20
    }
    },
    field:xCol,
    yField: xCol,
    donut: 60

    }]
    });
    My data will be of the form

    {Abcd,Vendor 1,Jun-2011,50.0,80,90}
    where 50.0 is the xCol {value plotted}, 80 and 90 are the ranges. PFA the screenshots
    gauge.jpganim fail_gauge.jpg

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

      1  

    Default


    There are a few problems with a legend on the Gauge. The first is there is no more than one series to show in the legend so there is no way to show multiple entries unless the Legend class itself is overridden. The second issues is that the "getLegendColors" method of the series.Gauge class needs to be overridden to include the proper color ranges(colorSet) used from the KPIGauge series's ranges config. But you still run into issue #1. By default it will use the default chart series theme to pick the color but the label is coded to pull directly from the field "name".

    You could use a label config on the series to specify the correct field to display as the first and only series legend item's label

    Code:
    series: [{
    	type: 'kpigauge',
    	field: 'data1',
    	label: {
    		field: 'MyTitleField'
    	},
    	showInLegend: true,
    	needle: {
    		width: 2,
    		pivotFill: '#000',
    		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
    }]
    In all honesty, I am not sure you will be able to accomplish what you want by modifying the KPIGauge extension because of the way the legend is created and that there is only one series.

  9. #29
    Sencha User
    Join Date
    Feb 2014
    Posts
    22
    Vote Rating
    0
    dillu5c5 is on a distinguished road

      0  

    Default Need help on animation

    Need help on animation


    Hi troseberry,
    First of all thanks a ton for the excellent and elaborate answer.
    I got the concept will try to include one series legend.

    Now I need help on animation. The animation is being applied to the first segment alone. Any idea on that??

  10. #30
    Sencha User
    Join Date
    May 2014
    Posts
    1
    Vote Rating
    0
    prabha_86 is on a distinguished road

      0  

    Default using KPIGauge in sencha architect 3

    using KPIGauge in sencha architect 3


    Hi ,
    I'm a newbie and can anyone of you please let me know in steps how to make use of KPIGauge in sencha architect 3 EXT JS to show multi colors variants.Thanks in advance

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi