1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    7
    Vote Rating
    0
    mephy is on a distinguished road

      0  

    Question Charts in extJS (4)

    Charts in extJS (4)


    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

  2. #2
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    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/
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

  3. #3
    Sencha User ordinary_guy's Avatar
    Join Date
    Apr 2011
    Location
    London
    Posts
    8
    Vote Rating
    0
    ordinary_guy is on a distinguished road

      0  

    Question Standalone use of Ext 4 charts without stylesheet?

    Standalone use of Ext 4 charts without stylesheet?


    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,

  4. #4
    Sencha User Mycoding's Avatar
    Join Date
    May 2010
    Location
    Russia, Volgograd
    Posts
    460
    Vote Rating
    0
    Mycoding is on a distinguished road

      0  

    Default


    I want to give advice to use just Raphael framework if you don't need ExtJS in your project.
    http://raphaeljs.com/
    C
    ause 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

  5. #5
    Sencha User ordinary_guy's Avatar
    Join Date
    Apr 2011
    Location
    London
    Posts
    8
    Vote Rating
    0
    ordinary_guy is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User Mycoding's Avatar
    Join Date
    May 2010
    Location
    Russia, Volgograd
    Posts
    460
    Vote Rating
    0
    Mycoding is on a distinguished road

      0  

  7. #7
    Sencha User Mycoding's Avatar
    Join Date
    May 2010
    Location
    Russia, Volgograd
    Posts
    460
    Vote Rating
    0
    Mycoding is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User ordinary_guy's Avatar
    Join Date
    Apr 2011
    Location
    London
    Posts
    8
    Vote Rating
    0
    ordinary_guy is on a distinguished road

      0  

    Default


    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
    Attached Images

  9. #9
    Sencha User Mycoding's Avatar
    Join Date
    May 2010
    Location
    Russia, Volgograd
    Posts
    460
    Vote Rating
    0
    Mycoding is on a distinguished road

      0  

    Default


    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.

  10. #10
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      0  

    Default


    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:
    Code:
    $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
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address

Similar Threads

  1. ExtJS 2.1 and charts
    By jsfan in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 May 2010, 3:54 AM
  2. Charts from ext gwt 2.0 available to extjs?
    By abnervv in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 17 Aug 2009, 5:20 AM
  3. extjs charts 3.0
    By sptangirala in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 27 Apr 2009, 9:26 PM
  4. how to use pie charts with Extjs
    By mallik in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 27 Jul 2008, 1:34 AM
  5. Plotkit Charts and extJs
    By dragontree in forum Community Discussion
    Replies: 11
    Last Post: 11 Sep 2007, 9:11 AM

Thread Participants: 4