[CLOSED] How to "skip" value in a chart ?

[dtex-lab]

Hi

I have a line chart with 2 series.
In the store I have this situation:



new Ext.data.JsonStore({
fields:['name', 'games', 'music'],
data: [
{name:'Jul 07', games: 245, music:700},
{name:'Aug 07', games: 240, music:550},
{name:'Sep 07', music:615},
{name:'Oct 07', games: 375, music:460},
{name:'Nov 07', games: 490, music:625}
]


As you can see for Sep 07 I haven't the value for games...
But the chart rappresent it as "0" so I can see in the chart that there isn't a "direct" line from Aug 07 to Oct 07 (because the value is missing...) but instead I see Aug 07 / 240 -- Sep 07 / 0 -- Oct 07 / 375

Get a look also to the screenshot maybe to understand better what I ask...
Red Lines are my wish... connecting Aug 07 to Oct 07 to skip Set 07 missing value

There is a way to "skip" missing value ?

this is a full test case



Ext.onReady(function () {
var store = new Ext.data.JsonStore({
fields: ['name', 'games', 'music'],
data: [{
name: 'Jul 07',
games: 245,
music: 700
},
{
name: 'Aug 07',
games: 240,
music: 550
},
{
name: 'Sep 07',
games: 355,
music: 615
},
{
name: 'Oct 07',
games: 375,
music: 460
},
{
name: 'Nov 07',
games: 490,
music: 625
}]
});
var store2 = new Ext.data.JsonStore({
fields: ['name', 'games', 'music'],
data: [{
name: 'Jul 07',
games: 245,
music: 700
},
{
name: 'Aug 07',
games: 240,
music: 550
},
{
name: 'Sep 07',
music: 615
},
{
name: 'Oct 07',
games: 375,
music: 460
},
{
name: 'Nov 07',
games: 490,
music: 625
}]
});
var vChart = new Ext.chart.LineChart({
height: 300,
width: 300,
store: store,
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'games'
}),
series: [{
type: 'line',
displayName: 'Games',
yField: 'games'
},
{
type: 'line',
displayName: 'Cd\'s',
yField: 'music'
}]
});
var vChart2 = new Ext.chart.LineChart({
height: 300,
width: 300,
store: store2,
xField: 'name',
yAxis: new Ext.chart.NumericAxis({
displayName: 'games'
}),
series: [{
type: 'line',
displayName: 'Games',
yField: 'games'
},
{
type: 'line',
displayName: 'Cd\'s',
yField: 'music'
}]
});
// extra extra simple
var vPanel = new Ext.Panel({
region: 'center',
layout: 'form',
items: [vChart, vChart2]
});
var vView = new Ext.Viewport({
layout: 'border',
items: [vPanel]
});
})



ty

[jsakalos]

I think that easiest is to calculate average of Aug and Oct and assign it to Sep.

[dtex-lab]

Ty Saki
But this is not a solution (at least in my case)
The store (data of series) is retrieved on the server side (in my test case of couse I fix it in the code only to replicate the situation....)
If someone (backend or my extjs client-side) must calculate the average between missing value... is a little bit hard and heavy..
why.... because loops on store are needed....I believe it should be more easy if the extjs component simply skip missing value.... all data are just sorted in the propertly way... otherwise this kind of work must be done twice...

Another "visual" solution should be to "break" the line.. so instead to make a line between Aug 07 and Oct 07 directly... don't do it.. so having a "hole"
Any other idea ?
Ty

[jsakalos]

I suppose the visualization is done by the underlying flash so I cannot tell what/how it could be done. Therefore, I'm moving this thread to Bugs for the devel team to comment.

[evant]

Why is this a bug? If anything it's a feature request.

FYI we used the underlying YUI charts, so we're essentially limited to what they have implemented until 4.x (when we hope to have our own native charting).

[jsakalos]

Thank you for the explanation Evan. Hope "our native charting" will be canvas based.

[Jamie Avins]

SVG is superior to Canvas. On the desktop it will be SVG -> VML -> Canvas in that order of preference.

[jsakalos]

Even better! Thanks for the info.