Code:
// store data
data.push({name: "first", data1: 100, data2: 70, data3: 10, data4: "#f00"});
data.push({name: "second", data1: 130, data2: 150, data3: 20, data4: "#0f0"});
data.push({name: "third", data1: 220, data2: 220, data3: 10, data4: "#00f"});
data.push({name: "forth", data1: 120, data2: 150, data3: 25, data4: "#f0f"});
/* LEGEND: */
/*
name = name (any text)
data1 = xpos
data2 = ypos
data3 = circle radius
data4 = circle color
*/
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
id: 'chartCmp',
animate: true,
store: store1,
smooth: true,
style: 'background:#FFF',
insetPadding: 10,
axes: [{
type: 'Numeric',
title: 'Application Quality',
position: 'left',
fields: ['data2'],
grid: true,
minorTickSteps: 1,
minimum: 0,
maximum: 300
}, {
type: 'Numeric',
title: 'Rating',
position: 'bottom',
fields: ['data1'],
grid: true,
minimum: 0,
maximum: 300
}],
series: [{
type: 'scatter',
axis: 'left',
xField: 'data1',
yField: 'data2',
highlight: false,
tips: {
trackMouse: true,
width: 60,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('data1') + "/" + storeItem.get('data2'));
}
},
markerConfig: {
type: 'circle',
radius: 20,//default radius
},
//renderer: calcRadius('data3')
}]
});
var win = Ext.create('Ext.Window', {
id: 'myWin',
width: 400,
height: 400,
hidden: false,
maximizable: true,
title: '-- Scatter Chart Renderer --',
renderTo: Ext.getBody(),
layout: 'fit',
items: [chart]
});
});