PDA

View Full Version : Scatter chart with 3rd dimension



sandeepmnit35
16 Nov 2012, 3:05 AM
I have written below code for scatter chat and now I want to add group by filtering as well so I want to know how json will be form for this kind of chart which shows uptimes hours on xAxis, Downtime hours on yAxis and group by SKU. Bubble size is not important right now for me but if I can get any example with bubble size as well, it is very helpful for me 40107



var chart = new Ext.chart.CartesianChart({
animate: true,
store: {
fields: ['DE','DH'],
data: [
{'DE':10, 'DH':15},
{'DE':15, 'DH':20},
{'DE':20, 'DH':25},

]
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['DH'],
title: {
text: 'DH',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'numeric',
position: 'bottom',
fields: ['DE'],
title: {
text: 'DE',
fontSize: 15
},
minimum: 0
}],
series: [{
type: 'scatter',
highlight: {
size: 7,
radius: 7
},
fill: true,
xField: 'DE',
yField: 'DH',
marker: {
type: 'circle',
fillStyle: 'blue',
radius: 10,
lineWidth: 0
}
}]
});
Ext.Viewport.setLayout('fit');
Ext.Viewport.add(chart);


Thanks

mitchellsimoens
19 Nov 2012, 6:47 AM
So you want to add a different series like:


var chart = new Ext.chart.CartesianChart({
animate : true,
store : {
fields : ['DE', 'DH', 'DA'],
data : [
{'DE' : 10, 'DH' : 15, DA : 10},
{'DE' : 15, 'DH' : 20, DA : 15},
{'DE' : 20, 'DH' : 25, DA : 20}
]
},
legend : true,
axes : [
{
type : 'numeric',
position : 'left',
fields : ['DH', 'DA'],
title : {
text : 'DH',
fontSize : 15
},
grid : true,
minimum : 0
},
{
type : 'numeric',
position : 'bottom',
fields : ['DE'],
title : {
text : 'DE',
fontSize : 15
},
minimum : 0
}
],
series : [
{
type : 'scatter',
highlight : {
size : 7,
radius : 7
},
fill : true,
xField : 'DE',
yField : 'DH',
marker : {
type : 'circle',
fillStyle : 'blue',
radius : 10,
lineWidth : 0
}
},
{
type : 'scatter',
highlight : {
size : 7,
radius : 7
},
fill : true,
xField : 'DE',
yField : 'DA',
marker : {
type : 'circle',
fillStyle : 'red',
radius : 10,
lineWidth : 0
}
}
]
});
Ext.Viewport.setLayout('fit');
Ext.Viewport.add(chart);

sandeepmnit35
19 Nov 2012, 11:56 PM
Can you please let me know a json for below chat with dummy data? It should should show 5 bubbles in the chart.
40195

sandeepmnit35
20 Nov 2012, 12:04 AM
I am using below code for chart:




RA.app.newChart[RA.app.currentActivePanelIndex] = new Ext.chart.Chart({
id: 'chart'+RA.app.currentActivePanelIndex,
store: store,
renderTo: Ext.getBody(),
flex: 1,
shadow: true,
autoShow: true,
animate:true,
legend: {
position: 'right',
},
//maxGutter: [30, 30],
axes: [
{
type: 'Numeric',
position: 'left',
fields:['A-Crew',B-Crew','C-crew','D-crew','others'] ,
title: DowntimeEvents,
minimum: 0,
maximum: RA.app.Ymax

},
{
type: 'Numeric',
position: 'bottom',
fields:[DowntimeHours] ,
title:DowntimeHours,
minimum: 0,
maximum: RA.app.Xmax

}
],
series: [
{
type: 'scatter',
//axis: ['left', 'bottom'],
//markerConfig: {},
xField: DowntimeHours,
yField: 'A-crew'
},

{
type: chartType,
//axis: ['left', 'bottom'],
//markerConfig: {},
xField: DowntimeHours,
yField:'B-crew'

},

{
type: 'scatter',
//axis: ['left', 'bottom'],
//markerConfig: {},
xField: DowntimeHours,
yField: 'C-crew'

},

{
type: chartType,
//axis: ['left', 'bottom'],
//markerConfig: {},
xField: DowntimeHours,
yField: 'D-Crew'

},
{
type: chartType,
//axis: ['left', 'bottom'],
//markerConfig: {},
xField: DowntimeHours,
yField: 'others'

}

], //close series