PDA

View Full Version : Area chart not redrawing itself with zoom in using a slider.



sarabjeetd
15 Jun 2012, 9:55 AM
I have a Area chart which works fine with a Time x-axis and Numeric Y axis. When I try to zoom into the chart by setting the fromDate and toDate attributes on the x-axis and redraw the chart, the x-axis redraws itself with the new date range(with a call to chart.redraw(true)) but the chart itself does not change.


Other type of charts like "column" work fine with the same codebase.
Any ideas on what I can try out would be greatly appreciated.

I am using Ext JS 4.1.0.

scottmartin
15 Jun 2012, 6:16 PM
Have you tried the latest release to see if this is still present?
http://www.sencha.com/forum/showthread.php?219836-Ext-JS-4.1.1-RC2-Now-Available

If you can still duplicate this, please post a bug report in the bugs forum using this template:
http://www.sencha.com/forum/showthread.php?138165-How-to-report-a-bug

Regards,
Scott.

sarabjeetd
16 Jun 2012, 11:27 PM
I posted a bug report in the bugs forum. I am not able to attach war files to the report. Any idea why is that so? The attachment form shows that it is uploading the file but the file never shows up in the form .

scottmartin
18 Jun 2012, 4:42 AM
Can you provide a self contained example using static data (array/json) that does not require any external files to run?

Scott.

sarabjeetd
18 Jun 2012, 11:18 AM
Ext.Loader.setConfig({enabled:true});
Ext.require(['*']);
Ext.onReady(function(){


/**
* @class extjs4core.view.Test3
*
* One stacked bar chart Test with time data
*
*/
Ext.define('Test3', {
extend:'Ext.container.Container',
alias:"widget.test3",
padding:'0 0 0 0',
autoScroll:true,
layout:{type:'vbox', align:'stretch'},

initComponent:function () {
Ext.define('TestTime', {
extend:'Ext.data.Model',
fields:[
{name:'time', type:'date', dateFormat:'d-m-Y H:i:s'},
'value',
'value1'
]
});
var testTimeStore1 = Ext.create('Ext.data.Store', {
model:'TestTime',
data:[
{time:"08-04-2012 08:00:00", value:2, value1:12},
{time:"08-04-2012 09:00:00", value:1, value1:6},
{time:"08-04-2012 10:00:00", value:7, value1:5},
{time:"08-04-2012 11:00:00", value:6, value1:6},
{time:"08-04-2012 12:00:00", value:1, value1:1},
{time:"08-04-2012 13:00:00", value:6, value1:4},
{time:"08-04-2012 14:00:00", value:1, value1:1},
{time:"08-04-2012 15:00:00", value:5, value1:1},
{time:"08-04-2012 16:00:00", value:12, value1:2},
{time:"08-04-2012 17:00:00", value:1, value1:12}
]
});

var chart1 = Ext.create("widget.e4chart", {
slider: {
master: true
},
id:"chart1",
flex:1,
height:500,
shadow:true,
store:testTimeStore1,
legend:{
position:'right'
},
animate:false,
mask:'horizontal',
axes:[
{
type:'Numeric',
minimum:0,
maximum:12,
position:'left',
fields:['value', 'value1'],
title:'Y something'
},
{
type:'Time',
position:'bottom',
fields:['time'],
title:'X something',
dateFormat:"H:i:s",
step:[Ext.Date.HOUR, 1]
}
],
series:[
{
//fake series which just shows the fill..
type:'area',
stacked: true,
axis:['left', 'bottom'],
fill:true,
xField:'time',
yField:['value', 'value1']
}
]
});
Ext.apply(this, {
items:[
{
xtype:'container',
layout:{type:'hbox', align:'stretch'},
items:[
chart1
]
},
{
xtype:'e4chartmslider',
margin:'10 20 10 20',
charts:[
chart1
],
rangeStyle:{
fill:undefined,
radius:4,
opacity:1
}
}
]
});
this.callParent(arguments);
}
});

/**
* @class extjs4core.components.chart.MultiSlider
* Multi-Slider component, enables zooming over a given Charts(e4chart) components.
*
* @cfg {Array} charts
* Set the charts references to be attached to the Slider.
*
* @cfg {String} dateFormat
* Set the dateFormat (in case the chart axis is of 'Time' format)
*
* @cfg {Number} [increment=1]
* Set the slider increment value
*
* @cfg {Object} [rangeStyle={type:'rect', radius:2, fill:'#c1c1c1', stroke:'#c0c0c0', 'stroke-width':1, opacity:.5}]
* Set the Range Sprite style
*
* @cfg [ticksPos={x: 3, y: 20}]
* The offset of the range ticks labels.
*
* @cfg {Number} [stepTickLabel=1]
* Set the steps for the labels display
*
*/
Ext.define("MultiSlider", {
extend:'Ext.slider.Multi',
alias:'widget.e4chartmslider',
require:["Utils"],
layout:{type:'auto'},
height:50,
width:"100%",
initComponent:function () {
var me = this;
_init();
if (me.rangeStyle) {
me._rangeStyle = Ext.merge(me._rangeStyle, me.rangeStyle);
}
me._destroy = false;
me._charts = me.charts;
me._draw = false;
me._dateFormat = (me.dateFormat || undefined);
me._increment = (me.increment || 1);
me._stepTickLabel = (me.stepTickLabel || 1);
me._ticksPos = ( me.ticksPos || (me._dateFormat ? {
x:18,
y:21
} : undefined) );
me.on("afterrender", me.afterRenderSlider);
// Call super;
this.callParent(arguments);
if (me._charts) {
if (!me.hasMasterChart()) {
console.log('Warning: No master chart was found, the slider is set to be invisible. Declare one chart as a "master" chart');
me.setVisible(false);
}
}
function _init() {
// Axis/Chart Type Enum
me._typeEnum = {
TIME:"Time",
NUMERIC:"Numeric"
};
// Default Style for the Range Slider Sprite
me._rangeStyle = {
type:'rect',
radius:2,
fill:'#c1c1c1',
stroke:'#c0c0c0',
'stroke-width':1,
opacity:.5
};
// Default configuration for the Range Slider
me._rangConf = {
height:26
};
// Offset factor for the Range Slider dimensions
me._rangeWidthFactor = 10;
// Flag to indicate that new data was loaded
me._onbeforerefresh = false;
}
},
/**
* Pass the tip text to the slider's thumbs tip
*
* @param thumb The passed thumb
*/
tipText:function (thumb) {
var owner = thumb.ownerCt, labels = (owner ? owner._labels : undefined);
return (labels ? labels[thumb.value] : "");
},
/**
* Draws the slider range data
*
* @param sliderArg
*/
drawSlider:function (sliderArg) {
var me = sliderArg,
sliderId = sliderArg.getId();
me.minValue = 0;
me.maxValue = me._labels.length - 1;
if (me.thumbs.length === 1) {
// initial load, add a thumb
me.addThumb(me._labels[this.maxValue]);
} else {
// on dynamic data load, remove the thumb
me.thumbs[1].destroy();
me.thumbs[1].el.remove();
me.thumbs.splice(1,1);
// add a new thumb
me.addThumb(me._labels[this.maxValue]);
me.setValue(0, me._minVal, true);
}
me._rangeComp = Ext.create('widget.e4chartrange', {
id:("range-" + sliderId + "-innerEl"),
ticksPos:me._ticksPos,
increment:me._increment,
stepTickLabel:me._stepTickLabel,
labels:me._labels,
height:me._rangConf.height,
width:"100%",
padding:'0, 10, 0, 0',
layout:'fit',
renderTo:Ext.get(sliderId + "-innerEl"),
dateFormat:me._dateFormat,
rangeStyle:me._rangeStyle
});
},
/**
* Clean the range data from the slider
*/
cleanSlider:function () {
var me = this;
me._draw = false;
me._rangeComp.el.remove();
},
/**
* Sync the chart according to the slider thumbs values
*
*/
changeSlider:function () {
var me = this,
rangeComp = me._rangeComp,
rangeSpriteComp = rangeComp._sprite,
sliderLowValue = me.getValue(0),
sliderHighValue = me.getValue(1),
ticksHandle = rangeComp._ticks,
tickHighPos = ticksHandle.getTickPos(sliderHighValue),
tickLowPos = ticksHandle.getTickPos(sliderLowValue),
tickPosRange = tickHighPos - tickLowPos;
rangeSpriteComp.setAttributes({
width:tickPosRange,
height:me._rangConf.height,
translate:{
x:(tickLowPos),
y:4
}
}, true);
var charts = me._charts,
chartsSize = (charts ? charts.length : 0),
chartIdx = 0, chartItem, chartAxis,
maxVal, minVal, chartAxisType, isAxisReset = false;
for (; chartIdx < chartsSize; chartIdx++) {
chartItem = charts[chartIdx];
if (chartItem) {
chartAxis = Utils.getAxisByPosition(chartItem, chartItem.getSliderAxis());
if (chartAxis) {
minVal = chartItem._minVal;
chartAxisType = chartAxis.type;
maxVal = chartItem._maxVal;
isAxisReset = me.setChartAxis(chartAxis, chartItem._minVal, chartItem._maxVal, {
chartItem:chartItem,
"Time":{key1:"toDate", key2:"fromDate" },
"Numeric":{key1:"maximum", key2:"minimum" }
});
if (isAxisReset) {
chartItem.redraw(true);
isAxisReset = false;
}
me.setChartAxis(chartAxis, sliderLowValue, sliderHighValue);
chartItem.redraw(true);
}
}
}
},
/**
* Resize the slider's range data
*
*/
resizeSlider:function () {
var me = this,
rangeComp = (me ? me._rangeComp : undefined),
adjWidth = me.getWidth(),
adjHeight = me.getHeight(),
ticks = (rangeComp ? rangeComp._ticks : undefined);
if (me && ticks) {
rangeComp.setSize(adjWidth, adjHeight);
ticks.resize(rangeComp.surface, {x:0, y:0, width:adjWidth - me._rangeWidthFactor, height:adjHeight});
me.changeSlider();
}
},
/**
* Verify that there's at least one master chart.
*/
hasMasterChart:function () {
var me = this,
chartsSize,
chartItem;
if (me._charts) {
chartsSize = me._charts.length;
while (chartsSize--) {
chartItem = me._charts[chartsSize];
if (chartItem && chartItem.isSliderMaster()) {
return true;
}
}
}
return false;
},
/**
* After the slider was rendered, setup the slider.
*
* @param sliderArg
*/
afterRenderSlider:function (sliderArg) {
var me = sliderArg,
sliderAxis, chartItem, chartItems, chartsSize;
if (me._charts) {
chartItems = me._charts;
chartsSize = chartItems.length;
while (chartsSize--) {
chartItem = chartItems[chartsSize];
if (chartItem) {
sliderAxis = chartItem.getSliderAxis();
if (!sliderAxis) {
Ext.log(" Missing slider's axis declaration. (e.g. 'bottom') ");
}
chartItemListener(chartItem, sliderAxis);
function chartItemListener(chartItem, sliderAxis) {
chartItem.on("beforerefresh", function () {
var sliderLowValue,
sliderHighValue,
chartValues;
// In case of reloading the master chart data, redraw the slider.
if (chartItem.isSliderMaster()) {
me._onbeforerefresh = true;
me.cleanSlider();
var chartAxis = Utils.getAxisByPosition(chartItem, sliderAxis);
if (chartAxis) {
delete chartAxis.maximum;
delete chartAxis.minimum;
delete chartAxis.fromDate;
delete chartAxis.toDate;
// Get the original data from the store. For some unknown reason the chart has issue to be updated with the new data.
chartValues = getChartMinMaxValues(chartItem, chartAxis);
if (chartValues) {
sliderLowValue = chartValues.min;
sliderHighValue = chartValues.max;
}
me.setChartAxis(chartAxis, sliderLowValue, sliderHighValue, {});
me.removeSliderListeners();
}
}
function getChartMinMaxValues(chartItem, chartAxis) {
var chartStore,
chartItems,
chartMinData,
chartMaxData,
fieldName;
if (chartItem && chartAxis) {
chartStore = chartItem.store;
fieldName = chartAxis.fields[0];
if (chartStore) {
chartItems = chartStore.data.items;
if (chartItems) {
chartMinData = chartItems[0].data;
chartMaxData = chartItems[chartItems.length - 1].data;
if (chartMaxData && chartMinData) {
return {
max:chartMaxData[fieldName],
min:chartMinData[fieldName]
}
}
}
}
}
return null;
}
});
chartItem.on("redraw", function (bool, chartArg) {
var chartAxisType,
chartAxis,
chartItemLabels,
isAxisLoaded = false;
if (me._onbeforerefresh) {
isAxisLoaded = Utils.isAxisLoaded(chartItem, sliderAxis);
me._onbeforerefresh = false;
} else {
isAxisLoaded = true;
}
chartAxis = Utils.getAxisByPosition(chartArg, sliderAxis);
if (chartAxis && !me._draw && isAxisLoaded) {
_defauls();
chartItemLabels = chartAxis.labels;
if (chartItemLabels) {
chartItem._minVal = chartItemLabels[0];
chartItem._maxVal = chartItemLabels[chartItemLabels.length - 1];
me.values=[me._minVal, me._maxVal];
me._chartMasterAxis = chartAxis;
me._labels = me._chartMasterAxis.labels;
}
if (chartItem.isSliderMaster()) {
me._chartMaster = chartItem;
me._chartMasterAxis = chartAxis;
chartAxisType = me._chartMasterAxis.type;
if (chartAxisType && chartAxisType == me._typeEnum.TIME) {
me._dateFormat = me._chartMasterAxis.dateFormat;
}
me._labels = me._chartMasterAxis.labels;
me.drawSlider(me);
me._draw = true;
me.addSliderListeners();
me.fireEvent("resize");
}
}
function _defauls() {
chartAxis.constrain = true;
}

});
}
}
}
}
},
addSliderListeners: function() {
var me = this;
me.on("change", me.changeSlider);
me.on("resize", me.resizeSlider);
},
removeSliderListeners: function() {
var me = this;
me.un("change", me.changeSlider);
me.un("resize", me.resizeSlider);
},
/**
* Update the chart axis minimum and maximum range values.
*
* @param chartAxis The chart axis object
* @param sliderLowValue The slider low value relatively to its labels
* @param sliderHighValue The slider high value relatively to its labels
*/
setChartAxis:function (chartAxis, sliderLowValue, sliderHighValue, isAxisReset) {
var me = this,
chartAxisType = chartAxis.type,
bool = false,
timeData, numericData;
if (chartAxisType == me._typeEnum.TIME) {
if (isAxisReset) {
timeData = isAxisReset[me._typeEnum.TIME];
if (timeData) {
bool = (chartAxis[timeData.key1] <= isAxisReset.chartItem._maxVal || chartAxis[timeData.key2] >= isAxisReset.chartItem._minVal);
}
}
chartAxis.fromDate = (isAxisReset ? sliderLowValue : chartAxis.labels[sliderLowValue]);
chartAxis.toDate = (isAxisReset ? sliderHighValue : chartAxis.labels[sliderHighValue]);
} else if (chartAxisType == me._typeEnum.NUMERIC) {
if (isAxisReset) {
numericData = isAxisReset[me._typeEnum.NUMERIC];
if (numericData) {
bool = (chartAxis[numericData.key1] <= isAxisReset.chartItem._maxVal || chartAxis[numericData.key2] >= isAxisReset.chartItem._minVal);
}
}
chartAxis.minimum = (isAxisReset ? sliderLowValue : chartAxis.labels[sliderLowValue]);
chartAxis.maximum = (isAxisReset ? sliderHighValue : chartAxis.labels[sliderHighValue]);
}
return bool;
}
});

/**
* @class extjs4core.components.chart.Chart
* Chart component with slider range support for data zooming in and out.
*
* @cfg {object} [slider={master:false, axis:'bottom'}]
* Set the chart as a master chart [true/false] and its axis range position ['left'/'bottom']
*
*/
Ext.define("Chart", {
extend:'Ext.chart.Chart',
alias: 'widget.e4chart',
require:["Utils"],
layout:{type:'auto'},
initComponent: function() {
var me = this;
me.addEvents(
/**
* @event redraw
* Fires when the chart is being redraw.
* (The axis are being redraw as well)
*/
'redraw',
/**
* @event beforeredraw
* Fires before the chart is being redraw.
*/
'beforeredraw'
);
/**
* Function that verifies if this chart was set as a master chart
*
* @return true if this chart set as a master or else false
*/
me.isSliderMaster = function(){
var slider = me.slider;
if (slider) {
return slider.master;
}
return false;
};
/**
* Function for getting the chart's axis position to be used by the slider.
* [Default set to 'bottom']
*
* @return axis position
*/
me.getSliderAxis = function(){
var ret = 'bottom',
slider = me.slider;
if (slider && slider.axis) {
ret = slider.axis;
}
return ret;
};
// call super;
this.callParent(arguments);
}
});
Chart.override({
redraw: function(bool) {
this.fireEvent('beforeredraw', bool, this);
var instance = this.callOverridden();
this.fireEvent('redraw', bool, this);
return instance;
}
});

/**
* @class extjs4core.components.chart.Container
* Container helper, it auto align a given Slider(e4chartmslider) and charts(e4chart).
*
* @cfg items
* Set the items to be add to the container.
* The items should contain one slider(e4multislider) and at least one chart(e4chart).
*/
Ext.define("Container", {
extend:'Ext.container.Container',
alias: 'widget.e4chartcontainer',
layout:{type:'vbox', align:'stretch'},
initComponent: function() {
var me = this, chartItems=[], sliderItems = [], cItems=[], chartContainer={},
meItems = me.items,
size = meItems.length;
// collect chart and slider items
collect(meItems, size, chartItems, sliderItems);
// setup the chart container
initChartContainer(chartContainer, chartItems);
// package the slider and charts components
cItems.push(chartContainer);
cItems.push(sliderItems[0]);
Ext.apply(this, {
items:[].concat((cItems || []))
});
// call super;
this.callParent(arguments);

function collect(meItems, size, chartItems, sliderItems) {
var idx=0, item;
// collect charts components
for (; idx<size; idx++) {
item = meItems[idx];
if (item){
if (item.xtype === 'e4chart') {
chartItems.push(item);
} else if (item.xtype === 'e4chartmslider') {
if (sliderItems.length < 1) {
sliderItems.push(item);
} else {
Ext.log(" Chart component accept only one slider component, other will be ignored. ");
}
}
}
}
if (chartItems.length == 0) {
Ext.error(" No Chart component added ");
}
}
function initChartContainer(chartContainer, chartItems) {
chartContainer.layout = { type: "hbox", align:"stretch"};
chartContainer.xtype = "container";
chartContainer.items = [].concat(chartItems);
}
}
});



/**
* @private
*
* @class extjs4core.components.chart.Range
* Range class, responsible for creating the range area and the ticks with its labels.
*
* @cfg rangeStyle
* Set the range sprite style
*
* @cfg {Object} [rangeStyle={type:'rect', radius:2, fill:'#c1c1c1', stroke:'#c0c0c0', 'stroke-width':1, opacity:.5}]
* Set the Range Sprite style
*
* @cfg [ticksPos={x: 3, y: 20}]
* The offset of the range ticks labels.
*
* @cfg {Number} [stepTickLabel=1]
* Set the steps for the labels display
*
* @cfg style
* Set the ticks sprite style
*
*/
Ext.define("Range", {
extend:'Ext.draw.Component',
alias:'widget.e4chartrange',
require:["Ticks"],
padding:0,
width:"100%",
layout:{type:'auto'},
initComponent:function () {
var me = this;
me._rangeStyle = me.rangeStyle;
me._dateFormat = me.dateFormat;
me._sprite = me.createSprite();
me._stepTickLabel = me.stepTickLabel;
me._increment = me.increment;
me._style = me.style;
me._ticksPos = me.ticksPos;
if (!this.surface) {
this.on({
afterrender:function (compArg) {
compArg.drawRange(compArg);
}
});
}
},
/**
* Create the range sprite
*/
createSprite:function () {
var me = this;
return Ext.create('Ext.draw.Sprite', me._rangeStyle);
},
/**
* Draw the range slider labels and ticks.
*
* @param compArg
*/
drawRange:function (compArg) {
var me = compArg,
idx = 0, labelItem,
labels, dateFormat = me._dateFormat;
if (!me._bbox) {
me._bbox = me.getBox();
}
labels = me.labels;
// add range sprite
me.surface.add(me._sprite).show(true);
// draw ticks
me._ticks = new Ticks({bbox: me._bbox,
fromVal:(me._min || 0),
toVal: (me._max || (labels.length-1)),
style: me._style,
increment: me._increment,
ticksPos: me._ticksPos,
stepTickLabel: me._stepTickLabel
});
if (labels) {
for (idx = 0; idx < labels.length; idx++) {
if (labels[idx]) {
labelItem = labels[idx];
if (dateFormat) {
labelItem = new Date(labelItem || undefined);
labels[idx] = Ext.Date.format(labelItem, dateFormat);
}
}
}
me._ticks.setLabels(labels);
}
me._ticks.generateTicks();
me._ticks.attach(me.surface);

}
});


Ext.namespace("Ticks");
/**
* @private
* @class extjs4core.components.chart.Ticks
* Ticks class is responsible for drawing the data ticks and labels over the Slider.
*
* @param config (accept configuration properties: {bbox, fromVal, toVal, style, increment, ticksPos, stepTickLabel}
*
* @cfg {Object} bbox
* The bounding box of the draw area
*
* @cfg {Object} fromVal
* Set the high range value
* @cfg {Object} toVal
* Set the low range value
*
* @cfg {Number} increment
* Set Slider increment factor.
*
* @cfg [ticksPos={x: 3, y: 20}]
* The offset of the range ticks labels.
*
* @cfg {Number} [stepTickLabel=1]
* Set the steps for the labels display
*
* @cfg {Object} style
* Set the ticks sprite style (TBD, not fully supported)
*
*/
Ticks = function (config) {

this._style = config.style;
this._bbox = config.bbox;
this._ticks = [];
this._displayText = [];
this._labels = null;
this._from = config.fromVal;
this._to = config.toVal;
this._increment = config.increment;
this._ticksPos = config.ticksPos;
this._stepTickLabel = config.stepTickLabel;
this._bboxEndPointsFactor = 0;
this._bboxLabelEndPointsFactor = -30;
this._bboxLabelStartPointsFactor = 5;
if (!this._ticksPos) {
this._ticksPos = {};
this._ticksPos.x = 0;
this._ticksPos.y = 20;
}
};
/**
* Resize the ticks according the given bounding box its was drawn in.
*
* @param surface The surface that holds the ticks
* @param bbox The bounding box the ticks was drawn in.
*/
Ticks.prototype.resize = function (surface, bbox) {
var idx=0;
this._bbox = bbox;
for (; idx < (this._ticks.length); idx++) {
if (this._ticks[idx].remove) {
this._ticks[idx].remove();
}
if (this._displayText[idx].remove) {
this._displayText[idx].remove();
}
}
this._ticks = [];
this._displayText = [];
this.generateTicks();
this.attach(surface);
};
/**
* Draw the ticks and labels
*
*/
Ticks.prototype.generateTicks = function () {
var spriteTickVar = null;
var spriteTextVar = null;
var idx = 1;
var range = (this._to - this._from);
var textLabelIdx = this._from;
var strokeStyle = "#121212", minorStrokeStyle = "#656565", strokeWidthStyle = 2;
// TODO Use merge utils
if (this._style) {
if (this._style.stroke) {
strokeStyle = this._style.stroke;
}
if (this._style["stroke-width"]) {
strokeWidthStyle = this._style["stroke-width"];
}
}

// Generate Range Ticks
if (idx < (range + 1)) {
for (; idx < (range + 1); idx++) {
_generate(this, idx, textLabelIdx);
textLabelIdx++;
}
}
_generate(this, -1, this._to);
// Generate End Points Ticks
_generate(this, -2, this._from);

function _generate(thiz, idx, textLabelIdx) {
var stepTickLabel = thiz._stepTickLabel, stepTickLabelVar = ((textLabelIdx % stepTickLabel) === 0),
xPos = Math.abs(Math.round(thiz.translateValue((thiz._bbox.width ), idx)));
if (idx === -1) {
xPos = (thiz._bbox.width-thiz._bboxEndPointsFactor);
} else if (idx === -2) {
xPos = thiz._bboxEndPointsFactor;
}
spriteTickVar = Ext.create('Ext.draw.Sprite', {
path:Utils.generatePath(xPos, 5, xPos, 10),
x:0,
y:0,
type:'path',
opacity:0.6,
'stroke':(stepTickLabelVar ? strokeStyle : minorStrokeStyle),
'stroke-width':strokeWidthStyle});
spriteTickVar.pos = xPos;
thiz._ticks.push(spriteTickVar);
if (idx === -1) {
xPos += thiz._bboxLabelEndPointsFactor;
} else if (idx === -2) {
xPos = thiz._bboxLabelStartPointsFactor;
}
var labelOrg = (thiz._labels != null ? thiz._labels[textLabelIdx] : textLabelIdx);
var labelVar = (stepTickLabelVar ? labelOrg : "");
spriteTextVar = Ext.create('Ext.draw.Sprite', {
text:labelVar,
x:(xPos - thiz._ticksPos.x),
y:thiz._ticksPos.y,
width:10,
height:10,
type:'text'});
thiz._displayText.push(spriteTextVar);
}
};
/**
* Get a specific tick by an index
*
* @param index The tick's index
*/
Ticks.prototype.getTick = function (index) {
index = Math.abs((this._to - this._from) - (this._to - index));
return this._ticks[index];
};
/**
* Get the tick position by an index
*
* @param index The tick's index
*/
Ticks.prototype.getTickPos = function (index) {
var tick = this.getTick(index);
var edge = (index > 0 ? this._bbox.width : 0);
return (tick ? tick.pos : edge);
};
/**
* Attach the ticks to a given surface
*
* @param surface The surface t be attach the ticks to
*/
Ticks.prototype.attach = function (surface) {
if (surface) {
var size = this._ticks.length;
if (size <= 0) {
console.log({msg:'No Sprite components available. Attach process ignore ', level:'warn'});
} else {
while (--size) {
surface.add(this._ticks[size]).show(true);
surface.add(this._displayText[size]).show(true);
}
}
}
};
/**
* Set the labels array to be displayed on the slider.
* (If not passed incremental numbers will be generated
*
* @param labelsArr - array of labels to be displayed
*/
Ticks.prototype.setLabels = function (labelsArr) {
this._labels = labelsArr;
};

Ticks.prototype.getRatio = function (width) {
var v = this._to - this._from;
return (v === 0 ? width - 7 : ((width - 7) / v));
};
Ticks.prototype.translateValue = function (widthArg, value) {
var ratio = this.getRatio(widthArg);
return (value * ratio) - ratio;
};


/**
* @class extjs4core.components.chart.Utils
*
* General Utilities
*
*/
Ext.namespace("Utils");
Utils = function () {
return {
/**
* Generate a line path string to be used by a Sprite object.
*
* @param ax The first x line position
* @param ay The first y line position
* @param ax1 The second x line position
* @param ay1 The second y line position
*/
generatePath:function (ax, ay, ax1, ay1) {
return "M" + ax + ' ' + ay + 'L' + ax1 + ' ' + ay1 + ' Z';
},
/**
* Get an Axis object from a given chart by its index
*
* @param chartArg The chart reference
* @param idx The Axis index
*/
getAxis:function (chartArg, idx) {
var axes, items;
if (chartArg) {
axes = chartArg.axes;
if (axes) {
items = axes.items;
if (items && items.length > 0) {
return items[idx];
}
}
}
return null;
},
/**
* Get an Axis object from a given chart by its position.
*
* @param chartArg The chart reference
* @param position The Axis position
*/
getAxisByPosition:function (chartArg, position) {
var axes, items, ii;
if (chartArg) {
axes = chartArg.axes;
if (axes) {
items = axes.items;
for (ii = 0; ii < items.length; ii++) {
if (items[ii].position == position) {
return items[ii];
}
}
}
}
return null;
},
/**
* Verify if an Axis object was loaded after calling 'loadData' or 'bindStore' functionality
*
* @param chartItem The chart reference
* @param axisPosition The axis position
*/
isAxisLoaded:function (chartItem, axisPosition) {
var chartAxis,
chartAxisLength,
chartItemsLength,
chartItems;
if (chartItem && axisPosition) {
chartAxis = this.getAxisByPosition(chartItem, axisPosition);
chartItems = (chartItem.store ? chartItem.store.data.items : undefined);
if (chartAxis && chartItems) {
chartAxisLength = (chartAxis.labels ? chartAxis.labels.length : 0);
chartItemsLength = chartItems.length;
if (chartAxisLength >= chartItemsLength) {
return true;
}
}
}
return false;
}
};
}();

Ext.application({
name:'',
appFolder:'',
autoCreateViewport:false,

launch:function () {
var me = this,
viewport = Ext.create('Ext.container.Viewport'),
mainContainer = Ext.create("Ext.Container", {
layout:{type:'fit', align:'stretch'}
}),
mainView = Ext.create("Ext.Container", {
layout:{type:'vbox', align:'stretch'},
items:[
{
//flex:1,
xtype:"panel",
layout:'fit',
title:"Tests",
items:[
{ xtype: 'test3' }

]
} ]
});
mainContainer.add(mainView);
viewport.add(mainContainer);
viewport.show();
},
getBtnTests:function (arr) {
function getBtnConf(idx) {
return {
xtype:'button',
margin:10,
text:'Run Test ' + idx,
handler:function () {
var me = this, view = this.getTestView({testName:idx}),
container = Ext.getCmp("workspaceId");
if (container) {
container.removeAll();
container.add(view);
}
}
}
}
var me = this,
ret = [],
idx = 1,
size = arr.length
for (; idx <= size; idx++) {
ret.push(Ext.merge({}, getBtnConf(idx)));
}
return ret;
},

getTestView:function (data) {
this.view = Ext.create('Test'+ data.testName);
var me=this;

return this.view;
}
});

});

scottmartin
19 Jun 2012, 2:49 PM
Please upgrade to 4.1.1 RC2 to correct this issue. Both sliders did resize the chart series.

Scott.

sarabjeetd
19 Jun 2012, 3:05 PM
Did you use one your tests to validate this issue? If you did, can you post the test?

Thanks
-Sarab

scottmartin
19 Jun 2012, 3:06 PM
I used your example an it failed on 4.1 and worked on 4.1.1RC2

Scott.

sarabjeetd
20 Jun 2012, 8:15 AM
I tried it using 4.1 RC2 but it behaves the same way as it did with 4.1.
So, for my own understanding, when you ran it with 4.1 RC2, the colored portion of the area chart moved with the slider change and not just the x axis?

scottmartin
20 Jun 2012, 8:26 AM
Please see the following video:
http://screencast.com/t/7HNIRrqNew

Regards,
Scott.

sarabjeetd
20 Jun 2012, 10:02 AM
My browser had cached the old Extjs and my new 4.1.1 RC2 ext js was not loaded. With all that fixed, I can see that it is working with 4.1.1 RC2.

Can we get a patch for ExtJS 4.1 for this issue?
We are near a release and will not be able to move to 4.1.1. RC2.

scottmartin
20 Jun 2012, 10:43 AM
I do not see a ticket where this was addressed directly, but it was most likely fixed in relation to several issues.

With the release of 4.1.1 GA on the horizon, and the fact that it has already been fixed in 4.1.1, a request for a locating and implementing a patch for 4.1 would be placed on hold.

I would recommend waiting for 4.1.1 GA at this point, as it would be quickest solution.

Regards,
Scott.

sarabjeetd
20 Jun 2012, 10:48 AM
Can I expect the 4.1.1 GA in June/July timeframe?

scottmartin
20 Jun 2012, 11:06 AM
4.1.1 GA is schedule to be released very soon if all goes as planned.
That is the best answer I can provide at this time.

Scott.