Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About

Custom Markers for Your ExtJS Charts

October 26, 2009 5 Comments

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.

Tagged With: ExtJS Tutorial 5 Comments

Comments

  1. Natasha says

    April 19, 2012 at 8:26 AM

    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

    Reply
    • Jorge says

      April 19, 2012 at 9:22 AM

      I will need to check with ExtJS 4. I will let you know what I find.

      Reply
  2. Tom says

    January 2, 2013 at 11:51 AM

    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.

    Reply
    • Jorge says

      January 3, 2013 at 7:38 AM

      Thank you Tom. I will try to put together an example with a line chart and a slider.

      Reply
  3. Shiva says

    September 24, 2013 at 10:13 AM

    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…

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2021 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in