1. #1
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    41
    Answers
    1
    Vote Rating
    -1
    dvaidhya is an unknown quantity at this point

      -1  

    Default Answered: Changing a chart yField during run time when an event is triggered.

    Answered: Changing a chart yField during run time when an event is triggered.


    hi i am a new bie to extjs. I have been trying to create a Column series and i need to change the yField dynamically/during run time when the user checks a checkbox. I could not find a method which would do this.

    Can anyone please help me?

    Thanks!

  2. Thanks you soo much skirtle it worked. I found one surprising thing when i checked the series API to understand the method description and usage for the first() method i could not find it.

    Under which Classdoes the first method belong to..

    Thanks for your help you made my day. I was breaking my head for a day for this simple thiung.

    Cheers
    dvaidhya

    Quote Originally Posted by skirtle View Post
    Please use CODE tags when posting code (# button on the editor toolbar).

    Setting the values in the records should work fine. Alternatively, if you want to change which field is used to draw the chart then something like this should work:

    Code:
    var series = chart.series.first();
    series.yField = 'data2';
    series.drawSeries();
    Bit hacky though.

    If you still can't get it to work could you post an example of something you've tried that didn't work? May help us to understand better what you're trying to do.

  3. #2
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    41
    Answers
    1
    Vote Rating
    -1
    dvaidhya is an unknown quantity at this point

      0  

    Default


    ok here are more details about the problem just incase it might help you to understand my porblem.

    I am creating a series column chart. Initially the yfield for the chart is a single attribute so it represents only a bar chart. When a user clicks on a checkbox the check box value needs to get appended to the yfield attribute of the series and then the column series for both the attributes needs to get generated and the bar chart is reloaded for the next set of yfields.

    I tried many options to redraw the chart and also to edit the yfiled value dynamically but was not successful. In other words i want something dynamic like what happens when we click on the legend links for seeing the items in the chart. Based on the click on the legend the chart decides which data to show.

    below is the same code of my bar_chart the check_string is the variable which has the yfields getting appended dynamically.

    Ext.create('Ext.chart.Chart', {
    flex: 1,
    shadow: true,
    height: 250,
    width: 798,
    insetPadding: 20,
    style: 'background:#fff',
    animate: true,
    store: storeCampByMonth,
    legend: {
    position: 'right'
    },
    xField: 'month',
    yField: [check_string],//['extension', 'acceptance'],
    axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['extension', 'acceptance'],
    minimum: 0,
    label: {
    renderer: Ext.util.Format.numberRenderer('0,0')
    },
    grid: true,
    title: 'Extensions&Acceptances'
    },
    {
    type: 'Category',
    position: 'bottom',
    fields: ['month'],
    title: '2005'
    } ],
    series: [{
    type: 'column',
    axis: 'left',
    xField: 'month',
    yField: [check_string],//['extension', 'acceptance'],
    listeners : {
    'itemmouseup': function(item) {
    barChart.series.get(0).highlight = true;
    barChart.series.get(0).unHighlightItem();
    barChart.series.get(0).cleanHighlights();

    barChart.series.get(0).highlightItem(item);
    ds.loadData(campaignsInMonth(allData, item.storeItem.data.monthIdx));
    }
    }
    } ]});

    please help me to solve this problem i would really appreciate it.

    dvaidhya

  4. #3
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Please use CODE tags when posting code (# button on the editor toolbar).

    Setting the values in the records should work fine. Alternatively, if you want to change which field is used to draw the chart then something like this should work:

    Code:
    var series = chart.series.first();
    series.yField = 'data2';
    series.drawSeries();
    Bit hacky though.

    If you still can't get it to work could you post an example of something you've tried that didn't work? May help us to understand better what you're trying to do.

  5. #4
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    41
    Answers
    1
    Vote Rating
    -1
    dvaidhya is an unknown quantity at this point

      0  

    Default


    Thanks you soo much skirtle it worked. I found one surprising thing when i checked the series API to understand the method description and usage for the first() method i could not find it.

    Under which Classdoes the first method belong to..

    Thanks for your help you made my day. I was breaking my head for a day for this simple thiung.

    Cheers
    dvaidhya

    Quote Originally Posted by skirtle View Post
    Please use CODE tags when posting code (# button on the editor toolbar).

    Setting the values in the records should work fine. Alternatively, if you want to change which field is used to draw the chart then something like this should work:

    Code:
    var series = chart.series.first();
    series.yField = 'data2';
    series.drawSeries();
    Bit hacky though.

    If you still can't get it to work could you post an example of something you've tried that didn't work? May help us to understand better what you're trying to do.

  6. #5
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    chart.series isn't documented but it's a MixedCollection:

    http://docs.sencha.com/ext-js/4-0/#!...n-method-first

  7. #6
    Sencha User
    Join Date
    Sep 2011
    Location
    Bologna, Italy
    Posts
    12
    Vote Rating
    0
    jeppo is on a distinguished road

      0  

    Default


    Thank you.
    Changing the series seems to work. But now the problem seems to be that the y axe values does not reflect the new series ones. The value on the axe is stuck on the old min and max of the old series.
    Is there a way to refresh also the axes?

    Thanks in advance

  8. #7
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    41
    Answers
    1
    Vote Rating
    -1
    dvaidhya is an unknown quantity at this point

      0  

    Default


    Not sure if this would help i used the below code in addition to the one which Skirtle replied

    Code:
    check_string=['acceptance','extension'];                                                    
                     var series = barChart1.series.first();
                     series.yField = check_string;
              series.drawSeries();
              barChart1.redraw(true);
    
    In my barChart1 code i have also changed the axes to point to check_string. hence when i issue redraw the barchart takes the new axes. let me know if this works for you

    Code:
    axes: [{
                type: 'Numeric',
                position: 'left',
                fields: [check_string],
                minimum: 0,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                grid: true,
                title: 'Extensions&Acceptances'
            },
            {
                type: 'Category',
                position: 'bottom',
                fields: ['month'],
                title: '2005'
            } ]

  9. #8
    Sencha User
    Join Date
    Sep 2011
    Location
    Bologna, Italy
    Posts
    12
    Vote Rating
    0
    jeppo is on a distinguished road

      0  

    Default


    Thanks but it does not work as I want, because if in the old series I have, for example, values from 0 to 10, y axis automatically draws itself correctly with values from 0 to 10. When I change the series at runtime, and the new series has values from 100 to 150, the values on the axes does not change and the series draw itself outside the chart screen.

    I have to do some sort of axis reset or initializing with the correct values of the field from the store.

  10. #9
    Sencha User
    Join Date
    Apr 2010
    Posts
    48
    Vote Rating
    0
    whippersnapper is on a distinguished road

      0  

    Default


    Anyone successfully removed an axis from chart before? I have three axis (left, bottom, right). I need to dynamically at run time remove the right axis, if user clicks on some config option. The problem is the axis line still remains...

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