PDA

View Full Version : what is the best way to draw chart area with range and line?



yohayg
9 Apr 2013, 8:14 AM
43026

I'm using the following code, is there a better way?
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4'],
data: [
{ 'name': 'metric 1', 'data1':8, 'data2':8, 'data3':12, 'data4':8},//sum the baseline data to 20(y axis) = 8+8+4
{ 'name': 'metric 2', 'data1':6, 'data2':8, 'data3':10, 'data4':6},
{ 'name': 'metric 3', 'data1':8, 'data2':8, 'data3':12 ,'data4':8},
{ 'name': 'metric 4', 'data1':6, 'data2':8, 'data3':10, 'data4':6},
{ 'name': 'metric 5', 'data1':8, 'data2':8, 'data3':12, 'data4':8},
{ 'name': 'metric 6', 'data1':8, 'data2':8, 'data3':12, 'data4':4},
{ 'name': 'metric 7', 'data1':8, 'data2':8, 'data3':12, 'data4':4},
{ 'name': 'metric 8', 'data1':8, 'data2':8, 'data3':12, 'data4':4},
{ 'name': 'metric 9', 'data1':8, 'data2':8, 'data3':12, 'data4':8},
{ 'name': 'metric 10', 'data1':8, 'data2':8, 'data3':12, 'data4':8}
]
});


function myColorer(rec) {
var aFiller = new Array('none','#7E79E8','none','7E79E8','7E79E8','7E79E8','7E79E8','7E79E8','7E79E8');
return aFiller[rec];
}
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: store,
axes: [
{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4'],
title: 'Sample Values',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics',
grid: true,
label: {
rotate: {
degrees: 315
}
}
}
],
series: [{
renderer: function(sprite, record, curAttr, index, store) {
var color = myColorer(index);
return Ext.apply(curAttr, {
fill: color
});
},
type: 'area',
gapless: true,
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data4'],
style: {
opacity: 0.50,
gapless: true
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data3',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});

slemmon
11 Apr 2013, 10:26 AM
That looks good to me. I dont' have any suggested improvements. :)