Charts in extJS (4)

[mephy]

Hello!

I'm looked through extJs 4 charts examples, and mentioned thay libraries are quite big
(more than 400KBs of code loaded in this example Area Aggregate.html)

I need extJs only for charts, nothing more. Is there any way to reduce code? Maybe "_min" libraries?

regards, mephy

[dj]

ExtJS 4 can be loaded dynamically. So only the classes get loaded that you actually use. This should reduce the download size if you only use a small piece of the Ext JS framework. (AFAIK: there will be a tool that parses your code and statically creates one big js-file that includes all dependencies - for production usage)

Here is the blog post about it: http://www.sencha.com/blog/countdown...-class-system/

[ordinary_guy]

Hi folks,

We're intending to use Ext JS 4 for re-writing our internal Java Swing app, a big 6 month+ job.
We would also like to use Ext 4 line charts in the front end of our JSF web app to replace FusionCharts,
as the 4.0.2a distribution would be bundled with the WAR file anyway for the back end.

Can anyone tell me for sure if it is necessary to include the ext-all.css stylesheet for charting to work?

The LiveUpdates Ext JS chart demo (comes with 4.0.2.a distribution) seems to work okay in Firefox and Chrome without ext-all.css. But the chart fails to render in IE8 without the stylesheet.

As ext-all.css is 200Kb+, we would like to avoid adding that as a depenency if possible.

Many thanks,

[Mycoding]

I want to give advice to use just Raphael framework if you don't need ExtJS in your project.
http://raphaeljs.com/
Cause ExtJS 4 uses Raphael framework.

Of cource in Raphael there are not so rich samples as in ExtJS 4 but it is possible to develop your own.
For example I did this several simple examples
http://vreshenie.ru/work/svg/map/1.html
http://vreshenie.ru/work/svg/map/2.html
http://vreshenie.ru/work/svg/map/15.html

[ordinary_guy]

Thanks for your suggestion mycoding.

Raphael looks great for vector graphics generally, but perhaps not the best choice for a dedicated charting tool. Their charting examples look too simple.

If nobody on the Sencha forum can rule out the need for ext-all.css then we'll probably go with Highcharts (http://www.highcharts.com), as that charting tool doesn't need a stylesheet and has much the same functionality as Ext JS charts.

[Mycoding]

Here it is
http://vreshenie.ru/work/sencha/charts/mini/pie/charts.html
And source
http://vreshenie.ru/work/sencha/charts/mini/pie/charts-mini.rar
With gzip
ext-core.js - 38kb
ext-chart.js - 117kb

[Mycoding]

About IE8 actually I was suprised that it is not working.
I will try to find out.

Maybe it is bug?!
Anyway it is possible to do gzip and
<!--[if IE]>
Add CSS file
<![endif]-->

But it should be find out.

[ordinary_guy]

Thanks for taking time to post more examples Mycoding.

I've attached a couple of screenshots to illustrate some issues.

When I view your example in IE8 then the lack of a stylesheet means the chart won't display. So yes, like you say, if we really want Ext charts then we could conditionally import the stylesheet for IE and gzip it.

You can see in my other screenshot some other quirks when displaying in Chrome version 13 after clicking on the series in the legend to hide the segments:

* Segment labels start overlapping
* Segments appear from behind when doing a mouse over
* Ghosting of hidden segment text is still present

Unfortunately it is quirks like this that make me think we'd be wise to hold back on using Ext 4 charts until the next version is out.

In fact I've come across other issues with 4.0.2a that make me think it is not quite stable enough for production use (scrollbars failing in grids after several data reloads, slow rendering of multiple tabbed grid panels, disappearing tree node text in Opera browser etc). I've been shadowing our new app with a 3.3 version for comparison to be sure it isn't just bugs in my code.

Version 3.3 still has snappier performance and stability once the number of tabs, trees and grids on a page grows. Anyway, I very much look forward to version 4.1 coming soon as the new class loading, component querying and other 4.x features are a pleasure to use

[Mycoding]

I came to conclusion that the only way is to use ext.css with gzip
I look through html code of charts.
It uses css classes from ext.css

Actually I am also quite new to ExtJS 4.x
I maily work with ExtJS 3.x

I also know about perfomance problems of ExtJS 4.x that appear in all IE<9
In IE9 I didn't test ExtJS 4.x.

[dj]

Since ExtJS uses SASS for the generation of it's CSS, it should be possible, to tailor the CSS. It is not officially supported, thou.

Copy resources/sass/ext-all.scss to resources/sass/my-ext.scss and change it to this:

$include-default: false;
@import 'compass';
@import 'ext4/default/all';
@if $scope-reset-css {
	.#{$prefix}reset {
		@include extjs-drawcomponent;
	}
}
@else {
	@include extjs-drawcomponent;
}

"extjs-drawcomponent" should be sufficient for charting. If it is not, then have a look at resources/themes/stylesheets/ext4/default/_all.scss for all includes that constitute ext-all.css and get the right subset by trial-and-error.

How you generate the CSS out of the SCSS-file is described in the Theming-Guide: http://docs.sencha.com/ext-js/4-0/#/guide/theming