Skip to main content

10 Reasons Why Ext JS 4′s Charts Are Awesome

10 Reasons Why Ext JS 4′s Charts Are Awesome

The new Charting package that is shipping with the latest Ext JS 4 Preview is fantastic and really does dwarf the previous releases offering (which was also very good). I’m going to outline a few of the key features that make it so good.

Flashy? Yes. Flash? No

First things first, no Flash. That’s right, beautiful, animated, colourful, shiny graphs without any nasty plugins needed. Ideal. It relies on the Ext.draw package which uses SVG, Canvas or VML depending on what your browser has to offer and draws them directly on the page.

Maximum Interactivity

People like clicking stuff, your boss definitely wants to be able to click a graph point and have that data jump straight into his brain or at the very least expand out into a nice summary window. Now you can keep him happy.
Every part of the chart is a regular Ext object so you can attach to events and add functionality just like you would with any other part of Ext.

Create any Chart Style

You can create your own chart types by extending the Cartseisan Series class (or one of its sub-classes). This means you can finally have that bar chart that renders 10 bananas in a row to represent the amount of lunch your pet monkeys are actually eating. Sure, its not going to be that easy but its possible!

Smooooth Curves

Like things to be gentle and smooth? You’re in luck! You can now render line graphs with smooth paths through each point. Unfortunately it’s VERY difficult and requires a lot of code…
[javascript]
smooth: true
[/javascript]
Oh wait, nope, that’s all it takes.

Variety out the Box

The sheer number of built in chart types is huge. At the base level you have 7 different types:
  • Bar
  • Column
  • Pie
  • Scatter
  • Radar
  • Area
  • Line
And each of these has a boat load of configuration options to make them pretty unique even to themselves. And, as I mentioned before, its easily expandable until your imagination explodes.

Resolution Independent

All the graphs are created as vector graphics so you can zoom until your heart’s content without losing quality.

Customise. Everything.

Each tiny aspect of an Ext JS 4 chart can have its look customised through nothing fancier that its config object. From things like the appearance of a Line Graph’s point markers to the style of a pie slice when it’s hovered over – it’s all there, ready for people to make the most hideous looking graphs since Excel c.1999.

Make friends with Ext 3

You can use it with Ext 3! Yes, you heard me right. You can have Ext JS 4′s charting package sitting right alongside your Ext 3.x application and everyone will play nicely and won’t fight.

Mobile Friendly

You can use them with Sencha Touch. Ok, not yet but that is the plan and the way they have been written means it will be easy and work across all WebKit browsers.

Make Your Life Easier

Let’s be honest, the power that this charting and drawing package provides is going to make us developers’ lives much easier and keep our bosses happier than ever. This can only be a good thing, but will undoubtedly result in their imaginations running wild and demanding more – I’m confident that the future releases and the community contributions won’t disappoint!
Let us know if you’ve been tinkering with Ext JS 4 and its charting package and have some more words of praise.
For more information on Ext JS 4′s Charting package check out the links below:

Comments

  1. Jackie Co KadApril 20, 2018 at 9:26 PM

    Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from javascript and jquery training in chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. javascript and jquery training in chennai

    ReplyDelete
  2. UclivirQpran_so_1998April 23, 2022 at 11:33 AM

    UclivirQpran_so_1998 Nathan White https://wakelet.com/wake/_QL3BzNr6A5rDyh03Kw-9
    diaperreno

    ReplyDelete
  3. UfulcloAca-hiAugust 25, 2022 at 5:11 PM

    dalcur0stin-ba_Omaha Shannon Baker Visit
    Bootstrap Studio
    Kaspersky Total Security
    bandmadmipha

    ReplyDelete
  4. NintyXtrat_ra1989November 30, 2022 at 11:32 AM

    coeprop0franbo-1989 Erica Cain Best
    This is there
    scoutareshos

    ReplyDelete

Post a Comment

Popular posts from this blog

Ext4 Apply Store Filtering

In extjs4.1: There are many way for store filtering . Some of code i give here Filtering by single field: store . filter ( 'eyeColor' , 'Brown' );   Alternatively, if filters are configured with an  id , then existing filters store may be  replaced by new filters having the same  id . Filtering by single field: store . filter ( "email" , /\.com$/ );   Using multiple filters: store . filter ([ { property : "email" , value : /\.com$/ }, { filterFn : function ( item ) { return item . get ( "age" ) > 10 ; }} ]);   Using  Ext.util.Filter  instances instead of config objects (note that we need to specify the root config option in this case): store . filter ([ Ext . create ( ' Ext.util.Filter ' , {   property : "email" , value : /\.com$/ , root : 'data' }),   Ext . create ( ' Ext.util.Filter ' , {   filterFn : function ( item ) {   return item . get ( &
Post a Comment
Read more

ExtJS - Grid panel features

What can we do with ExtJS GridPanel? I have to develop a lot of applications in my web app and I see that grid component of ExtJS may fit in. However, I am not aware of what all things I can do with the - off the shelf available framework pieces - available plug-ins in the marketplace and - custom development through my own developers This is a typical question that we hear from the business users who wants to design an application by keeping the framework’s capability in perspective. In this article I have tried to put the list of stuff you can do with grid and hopefully that shall enable you to take advantage of the beauty of ExtJS. Pre-requisites This article assumes that you are familiar with basics of ExtJS What are the available options? In this section I will be taking you through some of the commonly seen usage of ExtJS grid panel. While covering all the capabilities of grid may not be possible, I am sure it will be helpful for the business users who want to
8 comments
Read more

EXTJS - Way to get a reference to the viewport from any controller

An easy way to get a reference to the viewport from any controller Here's an easy way to get a reference to your viewport from any controller: Ext.application({ launch: function(){ this.viewport = Ext.ComponentQuery.query('viewport')[0]; this.centerRegion = this.viewport.down('[region=center]'); } }); then, inside say, a controller, you can call this: this.application.viewport to get a reference to the viewport.
4 comments
Read more