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.
Ext.chart.Chart.CHART_URL = 'ext3/resources/charts.swf';
Next, let’s create 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 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' } }] });
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.
Thank you for your tutorial.
What about ExtJS 4? I can’t customize my markers well enough. I have changed the type of them into ‘rect’ or ‘path’ or using image attribute that you told, but none of them works.
Thank you in advance
I will need to check with ExtJS 4. I will let you know what I find.
Hi Jorge,
Great posts!
Have you ever tried to create a stepped line chart? Or any charts that don’t come out of the box, like a candlestick stock chart etc?
I need to create a stepped line chart with a slider that manipulates the chart data in ext 4+ . Just looking for an example of a simple ‘roll-your-own’ series if you know any links??
Please keep blogging as you are a great help.
Regards,
Tom.
Thank you Tom. I will try to put together an example with a line chart and a slider.
Hello,
In the above chart fields are different and legends are different like ( field name is ‘music’ and legend displayed as ‘cd’s’)…similarly, How can we achieve in multiple column charts in sencha extjs…
Please help me….
Thanks…