PDA

View Full Version : Sencha Touch Charts View Refresh(Axis)



vikramiyer
9 Jan 2013, 10:44 PM
Hi,

I have a requirement where a chart is refreshed upon picker selection. Every option selected in the picker makes an Ajax call to fetch new contents which then updates the store and the chart refreshes.

The only thing that doesn't change is the x-axis and the y-axis. As a result the chart either becomes small or goes out of scope since the axis is fixed. The axis is not getting refreshed. How do I refresh my view to modify the axis.

mitchellsimoens
11 Jan 2013, 11:47 AM
First thing is why not just load the store setting a param to be sent in the request?

vikramiyer
15 Jan 2013, 12:50 AM
As far as I see its only the y-axis that doesn't update the x-axis reflects as soon as the store has a change . Below is the code




/**
* @class Namespace.view.Graph
* @extends Ext.tab.Panel
* Description
*/
Ext.define('Namespace.view.Graph', {
extend: 'Ext.Panel',
requires: ['Ext.chart.Chart','Ext.chart.series.Line','Ext.chart.axis.Numeric','Ext.chart.axis.Category','Ext.TitleBar','Ext.picker.Picker'],
xtype: 'graphpanel',


config: {
cls: 'card1',
layout: 'fit',
title: 'Graph',
iconCls: 'time',

items: [
{

xtype: 'chart',
store: 'GraphStore',
series: [{
type: 'line',
xField: 'name',
yField: 'data1',
labelField: 'data1',
style: {
stroke: Namespace.view.ColorPatterns.getBaseColors(1),
fillOpacity: 0.6,
miterLimit: 4,
lineCap: 'miter',
lineWidth: 2
},
marker: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 3
}
},{
type: 'line',
xField: 'name',
yField: 'data2',
labelField: 'data2',
style: {
fill: Namespace.view.ColorPatterns.getBaseColors(0),
stroke: Namespace.view.ColorPatterns.getBaseColors(0),
fillOpacity: 0.5,
miterLimit: 3,
lineCap: 'miter',
lineWidth: 2
},
marker: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 2
}
}],
axes: [{
type: 'numeric',
position: 'left',
fields: ['data1','data2'],
title: {
text: 'Hours',
fontSize: 20
}


},{
type: 'category',
position: 'bottom',
fields: ['name'],
title: {
text:'Date',
fontSize: 20
}


}]
},
{
xtype: 'picker',

id: 'graphPicker',
useTitles: true,
slots: [
{
name: 'graph',
xtype: 'pickerslot',
title: 'Select Date',
store: 'SlotStore'
}
]
}]
},
initialize: function() {
this.callParent(arguments);
}
});

vikramiyer
23 Jan 2013, 5:28 AM
41480Mitchell do you have any pointers based on the code uploaded? I have attached a screenshot of what's happening.... The first time the axis shows just fine... The next time onwards... The axis is fixed and the values are relative.

vikramiyer
23 Jan 2013, 11:21 PM
Here is another observation... The axis loads properly now when the device is rotated but not when the store is synced. However to rotate the device for the graph to refresh its axis is ugly.