Skip to content

September 24, 2012

17

Highcharts Extension for ExtJs 4: Supports animation & Highcharts 2.3

by Joe Kuan

If you have any issues or questions using this extension, please go to github and submit a question.

The Highcharts Extension (v2.0) for ExtJs 4.1 is here in the github. It has a lot of major features:

– Support Highcharts 2.3: Gauge, Polar and Range charts

– Support animation for all the charts: initial, update and line shift.

– A lot of optimisation is done.

PS: More documentation to come.

17 Comments Post a comment
  1. Andres
    Oct 23 2012

    Greet work,
    I have a problem in column and bar charts, I can’t force the color of bars, in the older version this point works

    Reply
  2. Andres
    Oct 23 2012

    I find the issue.
    I replace the function
    arr_getDataSingle: function(record, index) {

    return record.data[this.yField];
    },

    for
    arr_getDataSingle: function(record, index) {
    return {name: record.data[this.categorieField],y: record.data[this.yField],color: record.data[this.colorField]};
    },

    Reply
  3. Michi
    Nov 23 2012

    Hello,
    first thanks for your great job!

    I have ported my app to extJS 4.1.1 and Highcharts 2.3.3 and have problems with the integration in my MVC – pattern.

    One Question is, if it is really necessary to have a store inside of the highchart object – i searched for an simple ext JS example with the highcharts examples.

    It always shows an empty window.

    A second question is wether your extension is Highcharts 2.3.3 ready?

    Can you give me some hint for using the extension in combination with mvc?

    Thanks!

    Michael

    Reply
    • Joe Kuan
      Nov 28 2012

      I am really sorry for the late reply. This week is manic. You can use Highcharts without store but then it is really not much point. As ExtJs store is designed as the storage class for web application.

      Try create the chart, bind the store and call the store.load and see.

      My extension works with the latest Highcharts.

      Just send me your source code and I have a quick look.

      kuan.joe@gmail.com

      Reply
  4. Lee
    Nov 26 2012

    Hi,

    Nice work! I am trying to create a pie chart which works ok.
    the only problem is that I can’t get the animation to work when I click on a pie element, is this supported? I think this part does not work:

    plotOptions: {
    pie: {
    allowPointSelect: true
    }
    },

    this is my complete code:

    var chart = Ext.create(“Chart.ux.HighChart”, {
    width : 800,
    height : 600,
    store : store,
    chartConfig : {
    chart : {
    type: ‘pie’
    },
    title : {
    text : ‘Pie Chart ‘ ,
    x : -20 //center
    },
    },

    plotOptions: {
    pie: {
    allowPointSelect: true
    }
    },

    series: [{
    name: ‘pipe BW ‘,
    type : ‘pie’,
    categorieField : ‘month’,
    dataField : ‘value’,
    visible : true }]

    // series: [{
    // data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    // }]

    });

    thanks for your help,
    Lee

    Reply
    • Joe Kuan
      Nov 28 2012

      Sorry, this week is chaos. Thanks for the report. I will have a look this weekend and get back to you next week. Thanks

      Reply
    • Joe Kuan
      Dec 1 2012

      It should work with allowPointSelect option. I have added the option to my pie demo and it works fine. Pls check it out.

      Thanks
      Joe

      Reply
  5. Michi
    Dec 3 2012

    Hello,

    thanks for your reply! I want to create a chart in a tabpanel using the mvc-structure!

    The chart is filling only 70 % of the parentpanel! Is there a way to set the correct height? Layout ‘fit’ does not work.

    When setting a height to chart itself it becomes higher – but not the 100 % height of my panel which could be higher or not!

    Thanks in Advance!

    Michi

    Reply
    • Joe Kuan
      Dec 4 2012

      Do you have an example that you can send it to me? It’s difficult for me to picture the problem.

      Joe

      Reply
  6. Jey
    Dec 4 2012

    Will the Column Drilldown example work with this ExtJs extension? I’m trying to implement drilldown capabilities using ExtJs. It would be awesome if I can make use of this.

    Thanks
    Jey

    Reply
    • Joe Kuan
      Dec 4 2012

      To do the drilldown effect, you need to define the point click event in Highcharts configuration and implement the handler along with ExtJs store.

      I will create a demo in the weekend.

      Reply
  7. Garry
    Dec 7 2012

    why does in printing the chart it is not complete?

    Reply
    • Joe Kuan
      Dec 7 2012

      Sorry, can you describe a bit more? What is missing from your printing?

      Reply
  8. Michi
    Dec 7 2012

    Hello Joe,

    using your chartextension with extJS and i have a problem when i want to add categories dynamically. The data for the chart comes from php, not knowing which categories are supplied.

    Now i have catched the load event from the binded store and have tried something like:


    data.push({y: store.data.items[x].data.value}) … //from the store …

    Ext.getCmp(‘chart’).addSeries([
    name: text[index],
    type: ‘column’,
    data: data
    ]);

    But i am not able to set the correct categories for the axis.

    First i have set in the load event that i want so setCategories, but this is not possible, cause the chart is not rendered yet …

    I want add series (categories) dynamically depending of the result from the database.

    When i set the series hardcoded everthing is fine.

    Where is the right place to create data from the loaded store and take this data to create the chart?

    How has the returned data look / store / modell configuration, when i have 4 values for one categorie?

    I hope i have explained right …

    Thanks in advance

    Michi

    Reply
    • Joe Kuan
      Dec 7 2012

      Do you mean category as in x-axis with string labels or numerical x-axis values (e.g. utc time) ?

      If category in string labels, then it have to be shared by all the series. That’s why the xField option have to be fixed and defined outside the series array option. If you really have to change the source of categories, I suggest you to do it underneath the extension’s chart (Highcharts) object.

      If your x-axis uses numerical values , then you just specify xField option inside the series config object.

      Reply
      • michi
        Dec 9 2012

        Hello Joe,

        thanks for your reply. Unfortunately i got not the wanted result – the first categorie has always all values.

        I will try to explain what i want to achive:

        The number for categories has to be variable.

        The database supplies for e.g. the 2 categories: “today” and “yesterday” … the values for “today” are “1”, “10”, “15” and the values for “yesterday” are “5”, “40”, “20”, “10”.

        I want to get the result like your example “Column”.

        How has the chartconfig, store and json to look for that?

        Thanks in advance

        Michi

      • Joe Kuan
        Dec 9 2012

        See my latest commit and my demo website. There is a new demo called – column drill down which gives dynamic categories.

        Sent from my iPhone

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: