Page 1 of 2 12 LastLast
Results 1 to 10 of 429

Thread: Highcharts adapter and plugin for ExtJS

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106
    Vote Rating
    2
      1  

    Lightbulb Highcharts adapter and plugin for ExtJS

    Hello,

    Since many others are asking for this plugin, i'm posting the plugin and adapter for highcharts here.

    For people who don't know Highcharts:
    Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.




    Regards, Danil


    [Last update 09-11-2010: Highcharts 2+ required!]
    Code:
     * 09-11-2010
     * Version 2.+
     * 
     * 08-06-2010
     * Fixed the refresh bug. (Do not render if chart is not ready yet) 
     *
     * 28-04-2010
     * + Added class: Ext.ux.HighChart.Serie, Ext.ux.HighChart.LineSerie,  Ext.ux.HighChart.PieSerie, etc..
     * - Fixed: Wait for the panel to be resized to its correct size  (Instead of 0,0) after that create the chart.
     *
     * 19-04-2010
     * - Fixed: Series keep hidden after resize.
     * + bindComponent - Fixes the issue with the fitlayout.
     * + setTitle, setSubTitle - Change the title/subtitle of the chart
     * + addSeries - Add new series to the chart
    Attached Files Attached Files
    Last edited by buz; 9 Nov 2010 at 12:33 AM. Reason: Update.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    First impression was looks good.

    Second was I like the tool tip that goes up or down with the actual chart!
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    751
    Vote Rating
    0
      0  

    Default

    This is very nice. Thank you.

  4. #4
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      0  

    Default

    sweet

    spotted one bug though: in the windowed chart, the tip doesn't get updated properly (i.e. it appears to be "stuck" once you're past a certain point) when the mouse cursor moves horizontally across the the, say, 20k line.

  5. #5
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    387
    Vote Rating
    49
      0  

    Default

    Nice work!
    I`m from Holland!

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    312
    Vote Rating
    4
      0  

    Default

    Is it possible to read data from a JsonStore?
    Someone has to put a small example here in the forum?

    Thank you very much

  7. #7
    Sencha User
    Join Date
    Oct 2009
    Posts
    17
    Vote Rating
    0
      0  

    Default User input?

    I'm using HighCharts pretty sucessfully when I have a known (static) set of data. What I need is to be able to load the data dynamically according to a user's input.
    My normal method of getting user data is:
    ComboBox choice -> DataStore.load -> PHP script that takes the combobox data as an input to perform a MySQL SELECT statement. The script then formats the output as a JSON object and passes it back to the Ext JS framework.
    Is it possible to do this same thing, but take the JSON object that is returned and use it as the JSON input into a chart?
    Any help on this would be fantastic.
    Thanks

  8. #8
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106
    Vote Rating
    2
      0  

    Default

    I've been working on an implementation with a Store. I've been on a small vacation so havent completed it yet. I hopefully will complete the extension today/tomorrow.

    Danil

  9. #9
    Ext User tonedeaf's Avatar
    Join Date
    Dec 2007
    Posts
    137
    Vote Rating
    1
      0  

    Default

    Will the Highcharts adapter work with ext-core? Don't need the ux.HighchartPanel, just the adapter with ext-core as the base library.

  10. #10
    Sencha User
    Join Date
    Sep 2008
    Location
    Netherlands
    Posts
    106
    Vote Rating
    2
      0  

    Default

    Sure, the adapter-extjs.js is only required to make the charts work. The Ext.ux.HighchartPanel is only for convenience.

    When using the adapter without the panel just use:
    Code:
            <!-- ExtJS includes -->
            <script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
            <link rel="stylesheet" type="text/css" href="ext-3.1.1/resources/css/ext-all.css" />
    
            <!-- ExtJS adapter for Highcharts -->
            <script type="text/javascript" src="adapter-extjs.js"></script>
    
            <!-- Highcharts includes -->
            <script type="text/javascript" src="highcharts.src.js"></script>
            <!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]-->
    After this you can use all samples used at highcharts.com (See the scatter example in de demo files)

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •