Custom Markers for Your ExtJS Charts

If you’re looking for a quick way to customize your ExtJS charts, one of the things you can do is use images to change the look of a series’ data point markers.  Let’s put together a simple example that will create a chart similar to the one below.

How to do it

First, it’s very important to correctly configure your CHART_URL constant.

[code lang=”js”]Ext.chart.Chart.CHART_URL = ‘ext3/resources/charts.swf’;[/code]

Next, let’s create data store to hold some dummy records.

[code lang=”js”]var store = new Ext.data.JsonStore({
fields:[‘name’, ‘games’, ‘movies’,’music’],
data: [
{name:’Jul 07′, games: 245, movies: 300, music:700},
{name:’Aug 07′, games: 240, movies: 350, music:550},
{name:’Sep 07′, games: 355, movies: 400, music:615},
{name:’Oct 07′, games: 375, movies: 420, music:460},
{name:’Nov 07′, games: 490, movies: 450, music:625}
]
});[/code]

And now we can create our line chart.

[code lang=”js”]var chart = new Ext.chart.LineChart({
renderTo: Ext.getBody(),
width: 300,
height: 300,
id: ‘chart’,
store: store,
xField: ‘name’,
yAxis: new Ext.chart.NumericAxis({
displayName: ‘games’,
labelRenderer: Ext.util.Format.numberRenderer(‘0,0’)
}),
tipRenderer: function(chart, record, index, series) {
if (series.yField == ‘games’) {
return Ext.util.Format.number(record.data.games, ‘0,0’) + ‘ games in ‘ + record.data.name;
} if (series.yField == ‘music’) {
return Ext.util.Format.number(record.data.music, ‘0,0’) + ‘ CD\’s in ‘ + record.data.name;
}
else {
return Ext.util.Format.number(record.data.movies, ‘0,0’) + ‘ movies in ‘ + record.data.name;
}
},
extraStyle: {
padding: 10,
animationEnabled: true,
font: {
name: ‘Tahoma’,
color: 0x444444,
size: 11
},
legend: {
display: ‘bottom’
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size: 1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: ‘Tahoma’,
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: { color: 0x69aBc8, length: 4 },
minorTicks: { color: 0x69aBc8, length: 2 },
majorGridLines: { size: 1, color: 0xeeeeee }
},
yAxis: {
color: 0x69aBc8,
majorTicks: { color: 0x69aBc8, length: 4 },
minorTicks: { color: 0x69aBc8, length: 2 },
majorGridLines: { size: 1, color: 0xdfe8f6 }
}
},
series: [{
type: ‘line’,
displayName: ‘Movies’,
yField: ‘movies’,
style: {
color: 0xCCCCCC,
image: ‘img/star_red.png’,
mode: ‘stretch’
}
}, {
type: ‘line’,
displayName: ‘Games’,
yField: ‘games’,
style: {
color: 0xCCCCCC,
image: ‘img/star_green.png’,
mode: ‘stretch’
}
}, {
type: ‘line’,
displayName: ‘Cd\’s’,
yField: ‘music’,
style: {
color: 0xCCCCCC,
image: ‘img/star_blue.png’,
mode: ‘stretch’
}
}]

});[/code]

How it works

You can stylize the look of a data series using the style object.  In this case, the image property defines the image that will be used as data point marker.

Using mode:‘stretch’ will resize the image to the dimensions of the data point marker.  And color is the color of the lines and markers in the series.  (Not relevant for our markers because we are using images.)

In future articles I will cover other customization options for the ExtJS charts.  What about you?  Care to share what you’ve done with them?

Downloads

Grab the code: Custom-Markers-for-Your-Ext-JS-Charts.zip

Want to learn more?

My Ext JS 3.0 Cookbook has more than a hundred step-by-step recipes that you can use to build your ExtJS applications.  Download a sample chapter and see for yourself.