Skip to content

June 27, 2012


ExtJs 4 extension for Highcharts: passing null values

by Joe Kuan

In Highcharts, to distinguish whether there is a data point of zero value or no data at all is by passing null values. There are two ways to pass null values from server side JSON to the ExtJs store. First is to literally having null values assigned in the JSON data or leave the field value in the JSON data undefined, e,g.

"avg" : 32,
"Time" : 1339761380,
"Time" : 1339761680,

For the later case, the ExtJS store’s default action will turn the missing field into zero value. Hence, the chart will finally display zero values instead of missing data. To change that behaviour, you will need to use the useNull option in the field definition. E.g.

    Ext.define('HighChartData', {
      extend : '',
      fields : [{
        name : 'Date',
        type : 'string'
      }, {
        name : 'avg',
        type : 'float',
        useNull: true

The store will turn any undefined field values into null values and pass to Highcharts.

5 Comments Post a comment
  1. Prashant
    Jun 28 2012

    Thanks Joe ! This works perfectly … :)

    Have you done any tests comparing the performance of HighCharts and ExtJS graphs?
    I have done a simple comparison, using Line Series graph, where I have a Highcharts graph and an ExtJS chart layed out next to each other in a single panel. Both use the same data store. In my initial tests, the ExtJS charts render/appear quicker than the HighCharts graph.
    I have not gotten into the details of why this is happening yet.
    I am using ExtJS4.1 MVC architecture for my application.
    Do you have any data for performance comparisons between HighCharts and EXTJS 4.1 Charts?

    • Joe Kuan
      Jun 28 2012

      If you are talking about comparing Highcharts and ExtJs native charts, then it won’t surprise me. Highcharts is a lot more flexible in terms of configuring the charts and more elements are built-in to the chart. Highcharts animation is smoother and finer that may also contribute to the performance.

  2. Andres
    Aug 9 2012

    I have a issue when i use the componen in tab panel, when i reload the panel the chrat disapear,
    for test in you example, change the folow lines

    coment the line // = ‘main_chart’; (74+/-)
    change xtype to

    xtype : ‘tabpanel’
    plugins: Ext.create(‘Ext.ux.TabCloseMenu’),
    closable: true,

    include the line

    try closing the tabs and reopen and see.

    do you have any solution for this issue

    pd: sorry for my english

  3. Andres
    Aug 9 2012

    the line to include is for

    script type=”text/javascript” src=”../extjs-4.1.1/examples/ux/TabCloseMenu.js

    • Joe Kuan
      Aug 25 2012

      I have fixed a compatibility bug for Ext 4.1 (HighChart.js). Please get the latest version and see whether that helps first. If problem still exists, then I have a look. Cheers


Leave a Reply

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

You are commenting using your 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: