PDA

View Full Version : Problem with line charts when setting the fill property



usavahe
20 Mar 2014, 11:25 AM
Hi, I am having an issue with line chart when I have gaps in between and are setting fill property to true. The behavior I expect is to have my graph filled only under the lines (no fill for gaps because the value there is false).

Anyone knows how to fix this issue. Or which function can be overridden in what way, so that I can specifically tell it to fill the graph on exp. 0 to 10, 20 to 50 and 60 till the end

Seems like it is trying to find a common end (point) between 10 and 20 and it chooses the first value??? Same issue appears with area/stack graphs :-?


The result should be like in my picture called result.jpg.

Thanks

scottmartin
20 Mar 2014, 1:11 PM
An example of your chart with data would be needed. Please use our fiddle to create the example:
https://fiddle.sencha.com/#home

Also, what is the expected result?

usavahe
20 Mar 2014, 1:21 PM
I added the code


var data = [];
for (var i = 0; i < 50; i++)
{
data.push(
{
'name' : i,
'data' : (i > 10 && i < 20) ? false : Math.floor((Math.random()*100)+1)
});
};

var store = Ext.create('Ext.data.JsonStore',
{
fields: ['name', 'data'],
data: data
});

Ext.create('Ext.chart.Chart',
{
width: 800,
height: 400,
animate: true,
store: store,
render: Ext.getBody(),
axes:
[
{
type: 'Numeric',
position: 'left',
fields: ['data'],
title: 'Data',
minimum: 0
},
{
type: 'Numeric',
position: 'bottom',
fields: ['name'],
title: 'Value',
grid: true
}
],
series:
[
{
type: 'line',
fill: true,
axis: 'left',
xField: 'name',
yField: 'data'
}
]
});

scottmartin
20 Mar 2014, 1:48 PM
Try the following code to in fiddle to see if this is better .. replaced false with undefined or try null?



Ext.application({
name: 'Fiddle',

launch: function() {
var data = [];
for (var i = 0; i < 50; i++) {
data.push({
'name': i,
'data': (i > 10 && i < 20) ? undefined : Math.floor((Math.random() * 100) + 1)
});
};

var store = Ext.create('Ext.data.Store', {
fields: ['name', 'data'],
data: data
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
title: 'Left Axis',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Bottom Axis'
}],
series: [{
type: 'line',
fill: true,
axis: 'left',
xField: 'name',
yField: 'data',

markerConfig: {
size: 3,
radius: 3,
'stroke-width': 0
}
}]
});
}
});

usavahe
20 Mar 2014, 2:10 PM
If i do null, it adds points.
If i do undefind, i still show one fiiled up graph
If i do false, graphs messes up

You can easily see this in fiddle

scottmartin
20 Mar 2014, 2:18 PM
So if you set it to zero and remove the points and no line on the axis, is that what you want?

usavahe
20 Mar 2014, 2:28 PM
Almost.

But lets say I have data: [{1, 10},{2, 13},{3, 0},{4, 0},{5, 0},{6, 33},{7, 11}] ---- (first is x, second is y)

In this case from x = 2 to 3 and from 5 to 6 connection will be drawn, that will show that i have an area there. Whereas i need to have my fillings cut on x = 3 and noting (no area) untill x = 6.

This is what I am talking about (although this graph has different data):
48386

scottmartin
20 Mar 2014, 4:19 PM
The following will remove the markers in the gap, but I believe that you will need to override Ext.chart.series.Line :: drawSeries to alter the stroke on the path / line segments. (me.line)

I will let you muck around, but there is a record = data[i] that will allow you access to your values.



Ext.application({
name: 'Fiddle',

launch: function() {
var data = [];
for (var i = 0; i < 50; i++) {
data.push({
'name': i,
'data': (i > 10 && i < 20) ? 0 : Math.floor((Math.random() * 100) + 1)
});
};

var store = Ext.create('Ext.data.Store', {
fields: ['name', 'data'],
data: data
});

Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
//animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
title: 'Left Axis',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Bottom Axis',
minimum: 0

}],
series: [{
type: 'line',
fill: true,
axis: 'left',
xField: 'name',
yField: 'data',

markerConfig: {
size: 3,
radius: 3,
'stroke-width': 0
},

style: {
stroke: '#ff0000',
fill: '#ff0000'
},

renderer: function(sprite, record, attributes, index, store) {
// hide markers
attributes.hidden = (record && record.get('data') <= 0);
return attributes;
}

}]
});
}
});


48387

scottmartin
20 Mar 2014, 4:44 PM
If you want a cutoff at the last > 0 value with no line like you see on the outside edges ..

You would need to alter the data to have to xValue same if yValue = 0 and then you definitely would need to alter the drawSeries to not draw a line to any point with a zero yValue.

usavahe
20 Mar 2014, 4:59 PM
Wow this seemingly simple task turned out to be not that simple after all. Why Sencha would not add this to their library. I think what I am asking is logical and common.

Why something like this has to be achieved be using 2 separate line series instead of one
48388

usavahe
21 Mar 2014, 8:17 AM
Thanks scottmartin for the hint about removing data point from the line whenever I have gaps in those areas. The only hard part was to be able to show no filled area between the gaps.

The easiest way without hacking into draw Series, I found, is to assign first false/0 value's axes to be equal to the previous one, and the last false/0 values's x coordinate to the next data point's x coordinate.

In this way I have to re-format my data based on false/0 values without trying to modify Sencha API.
If there is another way someone knows, I am open to accept their answers ))))