Following up on Custom Markers for Your Ext JS Charts, here’s another example of how you can change the look of the Ext JS charts. In this case, I will show you how to change a data series style so, as shown in the image below, the markers have a different look and are not connected by a line.
How to do it
As usual, it's very important to correctly configure the CHART_URL constant. Observe that I’m using a folder called ext3 for my Ext JS installation. You might need to modify the folder name to match your setup.
Ext.chart.Chart.CHART_URL = 'ext3/resources/charts.swf';
As a second step, let's create a data store to hold some dummy records.
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}
]
});
And now we can create our line chart.
var c = new Ext.chart.LineChart({
renderTo: Ext.getBody(),
width:300,
height:275,
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,
legend:{
display:'bottom'
},
xAxis: {
color: 0x3366cc,
majorGridLines: {size: 1, color: 0xdddddd}
},
yAxis: {
color: 0x3366cc,
majorTicks: {color: 0x3366cc, length: 4},
minorTicks: {color: 0x3366cc, length: 2},
majorGridLines: {size: 1, color: 0xdddddd}
}
},
series: [{
type: 'line',
displayName: 'Movies',
yField: 'movies',
style: {
size: 7,
borderColor: 0xCC0000,
fillColor:0xffffff,
connectPoints:false
}
},{
type:'line',
displayName: 'Games',
yField: 'games',
style: {
size: 7,
borderColor: 0x00CC00,
fillColor: 0xffffff,
connectPoints:false
}
},{
type:'line',
displayName: 'Cd\'s',
yField: 'music',
style: {
size:7,
borderColor: 0x0000CC,
fillColor: 0xffffff,
connectPoints:false
}
}]
});
How it works
You can stylize the look of a data series using the style object. The size property represents the size of the markers in the series. You can also use borderColor and fillColor to change the border and fill colors of the markers. These two properties accept hex-formatted string or number values, for example: "#ff0000", "ff0000" or 0xff0000.
Setting connectPoints to false allows you to display the line series with no lines connecting the markers.
Where to find more information about Ext JS charts
The Ext JS charts are not well documented yet, but you can find more information at the YUI charts page.
Downloads
Grab the code for the sample from my downloads page.
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 Ext JS applications. Download a sample chapter and see for yourself.