Can we add an image in Extjs Scatter chart series? - extjs

Question

I could see in ExtJs scattered cart we could use different marker configs to show cross,circle,square etc. But instead of that can we show an image or glyph there?

Answer 1

Yes you can show image instead of circle, square etc.
You will need to override Ext.chart.Shape to add additional image types for your series. You can use those defined types in markerConfig of series.
Basically you will need to define your own shape type which will be created with Ext.draw.Sprite in chart.
Here is a working example with ExtJS 4.2.1.x:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.override(Ext.chart.Shape, {
newPhone: function (surface, opts) {
return surface.add(Ext.apply({
type: 'image',
src: 'http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Phone-icon.png',
x: opts.x,
y: opts.y,
width: 14,
height: 14
}, opts));
},
oldPhone: function (surface, opts) {
return surface.add(Ext.apply({
type: 'image',
src: 'https://cdn3.iconfinder.com/data/icons/communication-1/100/old_phone-512.png',
x: opts.x,
y: opts.y,
width: 14,
height: 14
}, opts));
}
});
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [{
'name': 'metric one',
'data1': 10,
'data2': 12,
'data3': 14,
'data4': 8,
'data5': 13
}, {
'name': 'metric two',
'data1': 7,
'data2': 8,
'data3': 16,
'data4': 10,
'data5': 3
}, {
'name': 'metric three',
'data1': 5,
'data2': 2,
'data3': 14,
'data4': 12,
'data5': 7
}, {
'name': 'metric four',
'data1': 2,
'data2': 14,
'data3': 6,
'data4': 1,
'data5': 23
}, {
'name': 'metric five',
'data1': 27,
'data2': 38,
'data3': 36,
'data4': 13,
'data5': 33
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 600,
height: 600,
animate: true,
theme: 'Category2',
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data2', 'data3'],
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'scatter',
markerConfig: {
type: 'oldPhone'
},
axis: 'left',
xField: 'name',
yField: 'data2'
}, {
type: 'scatter',
markerConfig: {
type: 'newPhone'
},
axis: 'left',
xField: 'name',
yField: 'data3'
}]
});
}
});
Example Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29rm