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
Joe Kuan Defunct Code 
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
WP shouldn’t require much learning curve. What would you like to learn from WP?
Joe
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
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.
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.
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,
Highcharts 3.0 will have a lot of new type of charts including stunning gauge chart and I will update my extension for it.
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.
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
Sorry, extremely busy right now. I will try to give u some answers in the weekend
Sure, any help is welcome!
The following is a pure Highcharts sample what I am trying like to achieve:
http://www.hasensprung.org/myETA/chart.html
The following what I have right now:
http://www.hasensprung.org/myETA/app.html
Best,
Frank
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
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
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
even if x1,x2,x3,.. are dataType;’date’ ?
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 :-(
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’
}
}
yep, it worked :)
no-store binding, populating series with pairs of {x:value, y:date} and setting
xAxis : {
type: ‘datetime’,
….
Thank you!
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.
You can click on the link, ‘Contact me’ via the top sticky blog.
Joe
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
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?
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
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
Sorry for the late reply, I haven’t used Visual Studio before, I am afraid I cannot offer any help.
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.
Inside the Highcharts_Sencha package, there is a directory, mobile, which has all the example code and a standalone example, standalone.html.
Joe
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
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.
The problem in displaying the xAxis
http://jsfiddle.net/DmsGx/304/
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.
Hiya, a new release is out and it should fix it. Please give it a go and let me know. Thanks
Everything works great, thanks