PDA

View Full Version : [FIXED] [EXT 4.1(B1-3)] Style for chart line series not applied



Dev.init
1 Mar 2012, 7:00 AM
Ext version tested:


Ext 4.1 Beta 1
Ext 4.1 Beta 2
Ext 4.1 Beta 3
Ext 4.07 (no problem)

Browser versions tested against:

FF10
IE8

Description:

I set style parameters to my chart series (type line) and it isn't apply to my chart. The problem is new with EXT JS 4.1 (all Beta versions) - with 4.0.7 it works okay. Also it seems that only the line type is broken - the "column" type works well.

Test Case:
series: [{
type: 'line',
axis: ['left'],
xField: 'bla',
yField: 'foo',
fill: true,
style: {
stroke: '#FF0000',
'stroke-width': 1,
fill: '#FF9999'
}
}

Screenshot or Video:
See attachment - same style config with different output
http://www.sencha.com/forum/image/png;base64,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

See this URL for live test case: http:// Debugging already done:

none

Possible fix:

not provided

mitchellsimoens
1 Mar 2012, 2:58 PM
Thanks for the report.

marcelofarias
28 Mar 2012, 10:20 PM
Can you provide a complete test case?

RFman
13 May 2012, 9:30 PM
Hello
Faced the same problem.
I noticed that when receiving data via AJAX, the lines are not colored.


Ext.define('BlackFrog', {
extend: 'Ext.data.Model',
fields: ['name', 'data1','data2','data3']
});
store = Ext.create('Ext.data.JsonStore', {
model: 'BlackFrog',
proxy: {
type: 'ajax',
url: './engine/getData.php',
actionMethods: 'POST',
reader: {
type: 'json',
root: 'contents'
}
}
});
store.load();
If you use a random generator of data from the instruction, the lines are painted.
P.S. but I'm using ExtJS 4.1.0

matiou
24 May 2012, 3:18 AM
Hello,

I'm facing the same problem too. Is there a workaround or do we have to wait for the fix ?

Thank in advance

jjerome
25 May 2012, 11:04 AM
I have a client waiting for this fix. Is there any update on this bug fix?

vasily_87
30 May 2012, 2:36 AM
I've got the same bug. Is there information about the next release?

ynov
9 Jun 2012, 3:51 PM
I came across this bug and had to fix it because I can't wait for the next release. The fix is pretty simple and works for me (tested with inline and ajax data stores). It may be a dirty hack, but it can be useful for somebody until the official bugfix is released. I pasted below the changed fragment of the drawSeries function in Line.js:


drawSeries: function() {
var me = this,
chart = me.chart,
chartAxes = chart.axes,
store = chart.getChartStore(),
data = store.data.items,
record,
storeCount = store.getCount(),
surface = me.chart.surface,
bbox = {},
group = me.group,
showMarkers = me.showMarkers,
markerGroup = me.markerGroup,
enableShadows = chart.shadow,
shadowGroups = me.shadowGroups,
shadowAttributes = me.shadowAttributes,
smooth = me.smooth,
lnsh = shadowGroups.length,
dummyPath = ["M"],
path = ["M"],
renderPath = ["M"],
smoothPath = ["M"],
markerIndex = chart.markerIndex,
axes = [].concat(me.axis),
shadowBarAttr,
xValues = [],
xValueMap = {},
yValues = [],
yValueMap = {},
onbreak = false,
storeIndices = [],
markerStyle = me.markerStyle,
seriesStyle = me.seriesStyle; <----- remove this line
colorArrayStyle = me.colorArrayStyle,
colorArrayLength = colorArrayStyle && colorArrayStyle.length || 0,
isNumber = Ext.isNumber,
seriesIdx = me.seriesIdx,
boundAxes = me.getAxesForXAndYFields(),
boundXAxis = boundAxes.xAxis,
boundYAxis = boundAxes.yAxis,
shadows, shadow, shindex, fromPath, fill, fillPath, rendererAttributes,
x, y, prevX, prevY, firstX, firstY, markerCount, i, j, ln, axis, ends, marker, markerAux, item, xValue,
yValue, coords, xScale, yScale, minX, maxX, minY, maxY, line, animation, endMarkerStyle,
endLineStyle, type, count, opacity, lineOpacity, fillOpacity, fillDefaultValue;
if (me.style == null) { <----- add this block
seriesStyle = me.seriesStyle;
} else {
seriesStyle = me.style;
}
if (me.fireEvent('beforedraw', me) === false) {
return;
}

pierresas
5 Oct 2012, 4:30 PM
Five users (Dev.init, RFman, matiou, vasily_87, ynov) have not provided a complete test case and the issue could not be reproduced, so there is nothing we can do for them. The fix proposed by user 'ynov' is incorrect and should be avoided.


One user (jjerome) has provided a test case (attached to a Premium User ticket) and issues have been found in the test case itself and in the WebKit SVG implementation:
- Under each chart series, the 'fill' config must be set to true otherwise the 'fill' style is ignored.
- The 'stroke-dasharray' SVG property should be avoided. In this particular test case, it takes almost a minute to draw the chart and it causes Safari to use all the available RAM.

london_lawyer
5 Oct 2012, 4:55 PM
I've encountered this issue using Ext.chart.series.Line as well. I've been able to use the setStyle method of the sprite parameter passed to a custom renderer as a workaround for this issue. I haven't tried it on every style config, though.

An example:


renderer: function (sprite, record, attributes, index, store) {
sprite.setStyle('stroke', '#ff0000');
return attributes;
}

As for the bug itself, it seems like the style config isn't being applied to the seriesStyle object belonging to Ext.chart.series.Line, or is being overwritten with the original seriesStyle. Changing the line ynov removed as follows also fixes the issue.


seriesStyle = Ext.applyIf(me.seriesStyle, me.style)

Obviously, I agree that changing the source code should be avoided.

london_lawyer
6 Oct 2012, 1:57 AM
I see this has been marked as fixed. Thanks!

I'm sure you looked into this yourselves, but in the screenshot below is where, I believe, seriesStyle is (/has been) being overwritten. The initializeSeries method of Ext.chart.Chart is being fired through the stack seen in the screenshot after loading records.

39198

A few lines below what's visible in the screenshot, the "config" object properties are applied, no matter what, to any object of type Ext.chart.series.Series:


if (series instanceof Ext.chart.series.Series) { Ext.apply(series, config);
} else {
Ext.applyIf(config, series);
series = me.series.replace(Ext.createByAlias('series.' + series.type.toLowerCase(), config));
}

I've noticed the series styles show up as configured if I preload data, but then are overwritten (as above, I believe) once I load records. Is that because the first time initializeSeries is run, the object isn't yet of type Ext.chart.series.Series?

In any event, changing Ext.apply(series, config); to Ext.applyIf(series, config); in initializeSeries also seems to solve this problem. I'll leave it to you experts to figure out if this is the right place to make the change, if you haven't already. Forgive me if I'm rambling uselessly!

london_lawyer
6 Oct 2012, 2:14 AM
One issue with the change above: it seems like this causes some downstream problems with end markers, since the markerStyle already contained in the series may not have an explicit type (if default markers are used, I guess), and drawSeries() in Ext.chart.series.Line relies on type being defined. Something to watch out for if you think this is the right place to make a change.

pierresas
8 Oct 2012, 12:04 PM
@london_lawyer: The bug was marked "fixed" because the only functional test case was incorrect and has been fixed. Five other users in addition to yourself have reported an issue but they did not provide a test case in spite of our requests so there isn't much we can do for them (nor for you) at the moment. We absolutely need a test case before we can start working on this.

jjerome
11 Oct 2012, 6:31 AM
Thanks for finally addressing this premium support issue from July. The code worked without fill set to true before 4.1. I guess 4.1 fixed that (or broke that depending on your viewpoint).

Also, is there an alternative to the Stroke-dasharray SVG property since it should no longer be used?



Five users (Dev.init, RFman, matiou, vasily_87, ynov) have not provided a complete test case and the issue could not be reproduced, so there is nothing we can do for them. The fix proposed by user 'ynov' is incorrect and should be avoided.


One user (jjerome) has provided a test case (attached to a Premium User ticket) and issues have been found in the test case itself and in the WebKit SVG implementation:
- Under each chart series, the 'fill' config must be set to true otherwise the 'fill' style is ignored.
- The 'stroke-dasharray' SVG property should be avoided. In this particular test case, it takes almost a minute to draw the chart and it causes Safari to use all the available RAM.

pierresas
11 Oct 2012, 6:41 PM
@jjerome The 'fill' config was always required. You can verify it by downloading 4.0.7 from http://www.sencha.com/products/extjs/download/ext-js-4.0.7 and opening examples/charts/Mixed.html: if you comment out "fill: true" in Mixed.js, the area below the line is not painted.


Regarding 'stroke-dasharray', there is no alternative. It works correctly in Firefox, Chrome and IE but it causes Safari to crash (on mobile) or use up the entire memory and slow down to a crawl until the chart is eventually displayed (on desktop). The bug is probably in the SVG module of WebKit so you might have to wait until Safari picks up a more recent version of WebKit before you can start using this property (or in the meanwhile check 'Ext.isSafari' before using it).