Skip to content

January 25, 2011

11

Highcharts Adapter for Ext JS with animation support

by Joe Kuan

Here is a modified version of Highcharts Adapter for Ext JS that supports both initial and update animations.

You can download via github: http://github.com/JoeKuan/Highcharts-Ext-JS-Adapter

The original author of Highcharts Adapter is buz posted it onto the forum. I modified it to bring the stylish Highcharts animations into the elegant Ext JS.

Configuration

The configurations for initial and update animations are enabled from Highcharts configuration. See the Options documentation on chart.animation, plotOptions.series.animation.

Special Config

animShift – Boolean

Specific animation for non pie chart that shifts horizontally when new data arrives along the x-axis. Default false. Note that this is the Adapter config, not part of Highcharts.

Example

An example file, example.html, is now available in the github showing the usage of the Highchart adapter. It uses a JsonStore to retrieve random generated time series data, temp_example.php, from the server. You should see initial animation as well as new data is updated and shifted horizontally.

Implementation notes

Read this section only if you want to modify the source code.

  • Initial animation – The only way to have Highcharts initial animation is to populate series data inside the config object before creating a Highcharts object. The series data is generated by calling Ext JS’s Store.load when Ext.ux.Highcharts is created. Since the load method is event driven, therefore it is binded with handler of copying Store’s data into config object
  • Update animation – The update animation is done by aligning Store’s data point by point to the Chart’s series data along the x-axis. If the size is different, then either adding or removing points with updating x and y values.
  • Update animation (Shift) – The update shift animation is done differently in only comparing Store and Series x-axis data to see any new data arrive. If so, then call Series.addPoint with shift enable.
  • Event listener – In the original version, onDataChange event handler calls refresh method. However, every time the Store.load is called, both onDataChange and onLoad are invoked which calls refresh twice. Hence the refresh call in onDataChange is commented out.

Thank you for reading and let me know if you find any problem. Thanks!!

Advertisements
11 Comments Post a comment
  1. Nico
    Jan 30 2011

    Hi,

    Does this adapter work with Sencha Touch (1.0)? Would really appreciate for Sencha Touch support! 8)

    Thanks in advance!

    Reply
    • Joe Kuan
      Jan 31 2011

      Sorry, I don’t know as I haven’t got an iPhone or iPad (will get one this year)

      Reply
  2. Feb 2 2011

    When will you be posting an example?

    Reply
    • Joe Kuan
      Feb 3 2011

      I have uploaded example file to the github. Please checkout example.html and temp_example.php. Thanks

      Joe

      Reply
  3. Doxa
    Jul 8 2011

    Do you know if it works with ExtJS 4? Thanks

    Reply
    • Joe Kuan
      Jul 10 2011

      Sorry, I haven’t tried the ExtJS 4 yet, so I don’t know. Probably move on to ExtJS in couple month times.
      Cheers
      Joe

      Reply
  4. Nov 11 2011

    Hi there, thanks for the article, just wondering if you have an update on the computability with ExtJs4, the reason im interested in the highcarts integration it that im finding the lack of export options in ExtJs charting a hindrance…

    Reply
  5. Johan
    Jan 18 2012

    Do you know of a variation on the adapter that displays the new highcharts stock charts?

    Reply
    • Joe Kuan
      Jan 19 2012

      Sorry, no. But it shouldn’t be difficult to write one as long as the highstock uses the common graphing library as highchart.

      Reply
  6. Amit
    Oct 23 2013

    Hi Joe,

    I have question about error 19 i keep getting even though I’m not specifying categories for my xAxis.

    Here’s what I’m doing:

    Code base: ExtJS 3.4 with HighCharts 3 and your great adapter.

    I have a store that currently loads dummy json data so store fields are:

    fields : [
    {
    name : ‘date’,
    type : ‘int’,
    convert : this.dateFormatter
    }, {
    name : ‘flag’,
    type : ‘int’
    }, {
    name : ‘referral’,
    type : ‘int’
    }, {
    name : ‘todo’,
    type : ‘int’
    }, {
    name : ‘successPlan’,
    type : ‘int’
    }
    ]

    And the dateFormatter

    dateFormatter : function(v, record) {
    var d = SF.date.parseDate(v);
    var month = SF.date.format(d, ‘m’);
    var year = SF.date.format(d, ‘Y’);
    return Date.UTC(year, month, 1);
    }

    the config for my Ext.ux.HighCharts instance is

    animShift : true,
    xField : ‘date’,
    series : [{
    type : ‘spline’,
    dataIndex: ‘flag’,
    name : ‘Flag’
    }, {
    type : ‘spline’,
    dataIndex: ‘referral’,
    name : ‘Referral’
    }, {
    type : ‘spline’,
    dataIndex: ‘todo’,
    name : ‘To-Do’
    }, {
    type : ‘spline’,
    dataIndex: ‘successPlan’,
    name : ‘Success Plan’
    }],
    chartConfig : {
    chart : {
    // chart needed even if empty!!!
    },
    title : {
    text : null
    },
    xAxis : [{
    categories : null,
    type : ‘datetime’,
    title : {
    text : null
    },
    label : {
    enabled : true,
    formatter : this.xAxisFormatter
    },
    minorTickInterval : ‘auto’
    }],
    yAxis : {
    min : 0,
    title : {
    text : null
    }
    },
    tooltip : {
    formatter : this.formatter
    },
    legend : {
    layout : ‘horizontal’,
    align : ‘center’
    }

    Initially I though that I might need to define a tickPositioner but when I did that the labels for the x-axis didnt format correctly but instead displayed in Epoc format.

    Any advise would be greatly appreciated.

    Reply
    • Joe Kuan
      Oct 27 2013

      Sorry for the late reply. Not sure whether I understand your question but I give it a try anyway.

      I had a quick look at your code. When you define ‘xField’ outside the series, it implies you are using it as a common category (string) but the field is defined as integer from the store.

      You can either define series as

      series : [{
      type : ‘spline’,
      dataIndex: ‘flag’,
      xField: ‘date’, // this is treated as integer value
      name : ‘Flag’
      }]

      OR

      have the ‘date’ field as numerical string in the store and define the xAxis label formatter function to convert from string to int by parseInt first.

      Not sure this will resolve your issue but ExtJs 3 Highcharts extension is obsolete and it is not maintained.

      Joe

      Reply

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: