CODEWITHSUNDEEP
chartsextjs4
Sabrina
Sabrina

Reputation: 171

ExtJs Charts with time axis, update problem

I'm using Ext4 js to create charts. My charts are line charts showing evolution of events during time, so my bottom axes is a time axes:

    {
    type: 'Time',
    position: 'bottom',
    grid: grid,
    fields: 'name',
    title: false,
    dateFormat: 'd/m/y',
    groupBy: 'year,month,day',

    aggregateOp: 'sum',
    label: {
        orientation: 'horizontal',
        rotate: {
            degrees: label_rotation
        }
    }

I have links to change the scale. Clicking on one of those link should change dateformat and groupby options. Here the code:

scaleGroups = {
    'DAY': {
    dateFormat: 'd/m/y',
        groupBy: 'year,month,day' 
    },
    'MONTH' :{
            dateFormat: 'M Y',
            groupBy: 'year,month'
    },
    'YEAR' :{
            dateFormat: 'Y',
            groupBy: 'year'
    }
};


function changeChartScale(chart_id, scale) {
    var chart = Ext.getCmp(chart_id);
    var axis = chart.axes.get(1);
    selectedGroup = scaleGroups[scale];
    axis.dateFormat = selectedGroup.dateFormat;
    axis.groupBy = selectedGroup.groupBy;

    chart.redraw();
}

The problem is that changing from a scale to another, for example from days to months, previous labels remain. So the line is correct, but I see both day labels and month labels.

Does anyone know why?

Thanks in advance, Sabrina

UPDATE 07/06/2011: The same code on a sample html page, importing only this javascript library, works.

Maybe it's a problem of compatibility with other javascript libraries I use (Jquery, googlempas...). Did anyone experience the same problem?

Upvotes: 5

Views: 7172

Answers (3)

Josh
Josh

Reputation: 461

I found a workaround since the chart.redraw() method doesn't automatically redraw the axis scale/values.

Set a new maximum for the axes, then use the axis.drawAxis() method prior to redrawing the chart...

My chart redraws when the user sorts a column on a bound grid.

    chart.axes.items[0].fields = [column.dataIndex];
    chart.series.items[0].yField = [column.dataIndex];


    var s = Ext.data.StoreManager.lookup('myStore');
    var max = s.max(column.dataIndex);


    chart.axes.items[0].maximum = max;
    chart.axes.items[0].drawAxis();


    chart.redraw();

Upvotes: 5

Jon
Jon

Reputation: 21

This is a Sencha bug!

This is still unanswered on their forum: http://www.sencha.com/forum/showthread.php?145433-ExtJS-4-chart-store-update-issue

Upvotes: 2

Maurizio
Maurizio

Reputation: 11

I think I found a fix! Just set minimum and maximum property in axes to a reasonable values (ie: per days set 31, per months set 12). It works for me!

Upvotes: 1

Related Questions