Skip to content
33

About me

I was born in Hong Kong, first half of my education was in HK and the other half in UK. Got my B.Sc & Ph.D in Multimedia at Southampton University. Since then I have worked for various size of companies from mega to a handful of employees. Currently, I am working for iTrinegy in the UK, been on various networking projects but for the last 7 years I have been responsible for implementing the web front ends of the entire company products range.

33 Comments Post a comment
  1. Aug 12 2010

    Hi Joe (Joseph) Kuan i am new to word press can you help me to learn WP?
    I like to work with you
    i am himanshu patel form India

    Reply
    • Joe Kuan
      Aug 12 2010

      WP shouldn’t require much learning curve. What would you like to learn from WP?

      Joe

      Reply
  2. Mike
    Jan 13 2012

    https://joekuan.wordpress.com/2011/03/22/changing-columns-editor-dynamically-in-extjs-roweditor/

    I’m using your code in this area of my RowEditor code

    editor.on({
    scope : this,
    beforeedit : function(grid, rowIndex, colIndex) {

    your code here……

    When I’m in edit mode in the RowEditor everything works perfectly. When I update and go back to my grid, the rows aren’t the right xtype. For instance a date I return gives me the whole time date stamp … I guess because it’s in a text field.

    How or where should I place your code so that I can change my grid row types as well as my RowEditor types?

    Thanks in advance.

    Mike

    Reply
    • Joe Kuan
      Jan 19 2012

      First of all, you need to have one column with combobox type which has a selection of data type for the target column to edit with.

      So, on the ‘select’ event handler of this combobox, you put in the code to change the editor of the column

      select: function(combo, record, index) {
      var cm = Ext.getCmp(‘color_editor’).getColumnModel();
      var valCol = cm.getColumnAt(3);
      var change = false;
      ….

      As for datetime field updating the column, I think you can either specify the column renderer handler or ‘afteredit’ event handler to format the value.

      Reply
  3. Apr 18 2012

    Hi Joe,

    Would you be interested inauthoring a book on “Learning Highcharts” for Packt Publishing?
    Please mail me at kartikeyp@packtpub.com for more details. Thanks.

    Reply
  4. Jun 25 2012

    Hi Joe,

    I would like to know abuot your updating version of HighCharts Gauge for EXTJS 4.
    I am looking forward to hearing from you.

    Regards,

    Reply
    • Joe Kuan
      Jun 27 2012

      Highcharts 3.0 will have a lot of new type of charts including stunning gauge chart and I will update my extension for it.

      Reply
  5. Oct 27 2012

    Good tips about enabling mouse events on iPad for ExtJS. I am wondering if you ever played with the Ext.Slider control, which doesn’t work with iPad either. I tried adding touchHandler, but that didn’t seem to work, and I was hoping you might have a recommendation on where to look to try to make it work. My google efforts turned up little but this site: http://xantus.tumblr.com/page/2 and he hasn’t posted any code.

    Reply
  6. Jan 22 2013

    Hi Joe, I started using your Highcharts Sencha adapter in a small project. It works fine as long using one single ExtJS store.

    For this I have the following questions:
    1. Can I use multiple stores and define per serie what store to use?
    2. When loading a store, I tried to figure out how I can assgin an Y value to a specific value on the X axis. Although trying to use “xField” I never managed, data from the serie always gets assigned to the [0] index on the x Axis
    3. As well I tried to setup x Axis wit a range from -20 to +30. Again I was not able to assign data starting by -20
    4. I would like to mix lines and scatter in one chart. I think this will only be feasible by using multpil stores since the data is too different…?

    It’s not a secret, so you may check the details in the website link of this post.

    Thank’s a lot for your help,
    Frank

    Reply
    • Joe Kuan
      Jan 23 2013

      Sorry, extremely busy right now. I will try to give u some answers in the weekend

      Reply
    • Joe Kuan
      Jan 26 2013

      1. No, current the extension doesn’t support multiple stores. Partly, I don’t get many feature requests on this issue. If you really have to use multiple stores, then I suggest you use addSeries with ‘data’ option that are extracted from those store.on(‘load’). Assume you have a refresh button, then you reload all those stores together and call the internal chart API functions setData.

      2. Sorry, I don’t really follow this. I think you need to point me to particular section of your code and guide me through your online demo.

      3. x axis range should be configured via Highcharts configuration section.

      4. Yes, you can mix lines and scatter in one chart and I don’t see any problem doing that with the extension. What do you mean by ‘too different’? The data model/definition or the value range?

      PS: Email me via kuan.joe@gmail.com, as this may require quite a few exchanges.

      Thanks
      Joe

      Reply
  7. Apr 19 2013

    Joe,
    Your extension + highcharts is the only combination I found that allows me to generate charts in ExtJS while dynamically adding series. I have undefined numbers of series which represent data spread over period of time (one of the fields represent date)
    Using addSeries() I can compare these series dynamically! But what should I do with x values (date in my case)? Can I control X-values during series generation or is there other workaround?

    Tried to make fake store – to bind the chart to. Store has only one field – Time. But it breaks the chart.
    Any clue is greatly appreciated!

    Thanks,
    Roman

    Reply
    • Joe Kuan
      Apr 20 2013

      The extension allows you to add dynamic series without binding to a store

      You can try to use addSeries as follows:

      addSeries([{
      type: ‘spline’,
      data: [ [ x1, y1 ], [ x2, y2 ], [ x3, y3 ], …. ]
      }]);

      Thanks
      Joe

      Reply
      • Apr 22 2013

        even if x1,x2,x3,.. are dataType;’date’ ?

      • Apr 22 2013

        tried passing
        1. [date,value] (Highcharts doesn’t see the date – x marks are from 0 to…number of values)
        2. [“time”:date,”value”:value] with specifying xField:’time”
        3. for 1st series created in memory store to use bindStore and then load the rest series using addSeries

        none worked :-(

      • Joe Kuan
        Apr 23 2013

        Highcharts supports numerical x-axis and other options for formatting date time values, such as formatter and dateTimeLabelFormats. The online demo ‘Line Shift – numerical x-axis’ illustrates how to format numerical x-axis values.

        xAxis : {
        type: ‘datetime’,
        title : {
        text : ‘Time’
        }
        }

  8. Apr 23 2013

    yep, it worked :)
    no-store binding, populating series with pairs of {x:value, y:date} and setting
    xAxis : {
    type: ‘datetime’,
    ….

    Thank you!

    Reply
  9. Rob
    Jun 30 2013

    Joe man! I read your book. Do you have an email address I can send you a note at? I want to ask you a private business question about a new opportunity.

    Reply
    • Joe Kuan
      Jun 30 2013

      You can click on the link, ‘Contact me’ via the top sticky blog.

      Joe

      Reply
  10. Motilal
    Sep 24 2014

    Hi Joe,

    I am working a new UI task where i have to show the data chart using ExtJS. I had gone through lot of stuff but nothing fits for my requirement except Highchart extension.

    lots of thanks for making HighChart extension available to the world. In fact there are many examples on Highchart extension but almost all of them are having static data store.

    some thing like this:

    var myStore= new Ext.data.Store({
    fields: [‘x’,’low’, ‘high’,’color’,
    ‘data1′,’data2’],
    data : [{
    x: 0,
    low: Date.UTC(2014, 6, 10, 1, 30, 0, 0),
    high: Date.UTC(2014, 6, 10, 19, 45, 0, 0),
    color: “#31519C”,
    data1:5000,
    data2:8000
    }]
    });

    but i will be getting data1 and data2 dynamically from a store which is mapped to a database object. code as follows:

    Ext.create(“Ext.ux.data.ReadonlyStore”, {
    storeId: “myStore”,
    model: “MyModel”,
    autoLoad: true,
    proxy: {
    api: {
    read: “${createLink(controller: “myController”, action: “myAction”)}”
    }
    },
    listeners: {
    beforeload: function(store, operation, eOpts) {
    this.proxy.setExtraParam(“scanId”, Ext.getCmp(“idField”).getValue());
    }
    }
    });

    below shown the code to use the store on the chart

    Ext.create(‘Ext.panel.Panel’,{
    flex:2,
    items:[{
    xtype:’highchart’,
    series:[{
    dataIndex:[‘low’,’high’],
    getData:function(record,index) {
    return record.data;
    }

    }],
    flex:2,
    height:250,
    store: “myStore”,
    chartConfig: {
    chart: {
    type: ‘columnrange’,
    inverted: true,
    },
    title: {
    text: ‘My Chart’
    },
    subtitle: {
    text: ‘Last 24 Hours’
    },
    legend: {
    enabled: false
    },
    tooltip: {
    formatter: function () {
    alert(‘hey’);
    return ‘My Data1: ‘ + this.point.data1 +
    ‘My Data2: ‘ + this.point.data2
    },
    valueSuffix: ”
    },
    exporting: {
    csv:{
    dateFormat:’%y-%m-%d %H:%M’
    },
    buttons: {
    contextButton: {
    menuItems: [{
    text: ‘Download JPEG image’,
    onclick: function () {
    this.exportChart({
    type: ‘image/jpeg’
    });
    }
    },{
    text: ‘Download PDF document’,
    onclick: function () {
    this.exportChart({
    type: ‘application/pdf’
    });
    }
    }, {
    text: ‘Download CSV’,
    onclick: function () {
    var a = document.createElement(‘a’);
    a.href = ‘data:attachment/csv,’ + this.getCSV();
    a.target = ‘_blank’;
    a.download = (this.title ? this.title.textStr.replace(/ /g, ‘-‘).toLowerCase() : ‘chart’) + ‘.csv’;
    document.body.appendChild(a);
    a.click();
    a.remove();
    }
    }]
    }
    }
    },
    xAxis: {
    categories: [
    ‘Domain Collector’
    ]
    },
    yAxis: {
    type: ‘datetime’,
    tickInterval: 4 * 60 * 60 * 1000, // one hour
    minorTickInterval: 1 * 60 * 60 * 1000, // one hour
    min: Date.UTC(2014, 6, 10, 0, 0, 0, 0),
    max: Date.UTC(2014, 6, 11, 0, 0, 0, 0),
    dateTimeLabelFormats: {
    millisecond: ‘%I:%M’,
    second: ‘%I:%M’,
    minute: ‘%I:%M’,
    hour: ‘%I:%M%P’,
    day: ‘%I:%M’
    }
    }
    }
    }, {
    xtype:’panel’,
    html:” +
    ‘Successful’ +
    ‘In Progress’ +
    ‘Failed ‘ +

    }]
    });

    could you please suggest me how to make use of dynamic store to show it on highchart

    Reply
  11. Hoakie
    Feb 27 2015

    I would like to use your Highcharts directly inside of the Sencha Architect via the GUI. Do you have a generated .aux file that would enable this to be easily imported?

    Reply
    • Joe Kuan
      Mar 1 2015

      I use Sencha Architect. However, I haven’t pushed my extension to that far yet. I don’t want to promise anything as there are other outstanding tasks for the extension and I don’t know how hard to integrate with Sencha Architect. So, don’t hold your breath.

      Thanks
      Joe

      Reply
  12. Apr 29 2015

    Hi Joe, I’m new to extjs and I find your Posts and tutorial very helpful. I would like to make extjs my main tool for web application. I recently tried to implement it using visual studio, but with lack of knowledge It didn’t know work. I would want to ask for your expertise to help me out on how can I setup extjs with visual studio or any other IDE that you may feel more effective for extjs development.
    Thank you

    Reply
    • Joe Kuan
      Jun 9 2015

      Sorry for the late reply, I haven’t used Visual Studio before, I am afraid I cannot offer any help.

      Reply
  13. Sudo
    Jun 8 2015

    Hello Sir,

    I am trying to use the Highcharts plugin for Sencha Touch 2, I am new to sencha touch and trying to include your plugin, and I am totally clueless .

    I have gone through your git project(mobile) but there are lot of charts. Could you please provide simple steps to setup plugin inside sencha touch app . Also a sample of a single chart application. ?

    Thanks in advance.

    Reply
    • Joe Kuan
      Jun 9 2015

      Inside the Highcharts_Sencha package, there is a directory, mobile, which has all the example code and a standalone example, standalone.html.

      Joe

      Reply
  14. Anton
    Aug 10 2015

    Hi Joe. Thanks for the Highcharts_Sencha package. I try to apply the option connectNulls for the Series but it does not work
    http://jsfiddle.net/DmsGx/302/
    http://jsfiddle.net/uy5acLL3/
    Could you help me?
    Thanks

    Reply
    • Joe Kuan
      Aug 10 2015

      First, you need to make sure your DB actually returning null value. Secondly, you need to configure the ExtJs JsonStore not to interpret null values as zero.

      Reply
      • Anton
        Aug 11 2015

        The problem in displaying the xAxis
        http://jsfiddle.net/DmsGx/304/

      • Joe Kuan
        Aug 11 2015

        Oops, I *think* you may hit a bug. I haven’t touched the extension for a long time. So it will take me a bit longer to investigate.

      • Joe Kuan
        Aug 21 2015

        Hiya, a new release is out and it should fix it. Please give it a go and let me know. Thanks

  15. Anton
    Sep 1 2015

    Everything works great, thanks

    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: