// Bar chart with cumulative distribution.
var linearChart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: '100%',
height: 300,
insetPadding: 30,
animation: false,
border: false,
style: {
borderWidth: '1px',
borderColor: '#ddd',
borderStyle: 'solid',
borderRadius: '5px',
opacity: 0
},
background: '#eee',
store: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'https://stratum.registercentrum.se/api/statistics/sfr/test?apikey=bK3H9bwaG4o=',
reader: 'objecttoarray.cumulative' // <-- Using cumulative reader.
},
fields: [
{ name: 'key', type: 'string'},
{ name: 'value', type: 'float' }
],
listeners: {
load: function(aStore, aList) {
linearChart.animate({
duration: 500,
to: { opacity: 1 }
});
}
}
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['value'],
grid: {
odd: {
opacity: 0.5,
fill: '#ddd'
}
},
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
}
},{
type: 'category',
position: 'bottom',
fields: ['key']
}],
series: [{
type: 'bar',
xField: 'key',
yField: 'value',
style: {
fillOpacity: 0.7
}
}]
});
External resources loaded into this fiddle: