Skip to content

Commit

Permalink
v3.2.1 Major Highcharts performance fix and null data with connectNul…
Browse files Browse the repository at this point in the history 
…ls option fix
  • Loading branch information
@JoeKuan-itrinegy
JoeKuan-itrinegy committed Aug 21, 2015
1 parent d70c67d commit 7ca415e
Show file tree
Hide file tree
Showing 9 changed files with 245 additions and 11 deletions.
7 changes: 7 additions & 0 deletions ChangeLog
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
ver 3.2.1
- Major performance fix - calling draw multiple times !!
- Fixed null data with connectNulls option
- Fixed ExtJs 4 Popup Menu demo
- Fixed ExtJs 5 Spline - Null data demo
- Added null data (connectNulls) demos for ExtJs 4 & 5

ver 3.2.0
- Included Highmaps Desktop Demo (ExtJs 4)
- Actually work with Highmaps now
Expand Down
40 changes: 34 additions & 6 deletions Chart/ux/Highcharts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @author
* Joe Kuan <[email protected]>
*
* version 3.2.0
* version 3.2.1
*
* <!-- You are not permitted to remove the author section (above) from this file. -->
*
Expand Down Expand Up @@ -188,7 +188,7 @@ Ext.define("Chart.ux.Highcharts", {
* @static
* Version string of the current Highcharts extension
*/
version: '3.2.0',
version: '3.2.1',

/***
* @property {Object} sencha
Expand Down Expand Up @@ -354,6 +354,7 @@ Ext.define("Chart.ux.Highcharts", {
*/
afterChartRendered: null,


constructor: function(config) {
config.listeners && (this.afterChartRendered = config.listeners.afterChartRendered);
this.afterChartRendered && (this.afterChartRendered = Ext.bind(this.afterChartRendered, this));
Expand Down Expand Up @@ -574,6 +575,11 @@ Ext.define("Chart.ux.Highcharts", {

},

/***
* @private
*/
initDataBuilt: false,

/***
* @private
* Build the initial data set if there are data already
Expand All @@ -586,6 +592,12 @@ Ext.define("Chart.ux.Highcharts", {
var series = null, chartConfigSeries = null;
var ptObject = null, record = null, colorField = null;

this.log("Call Highcharts buildInitData");
if (this.initDataBuilt) {
this.log("Already built. Ignore");
return;
}

if (!this.store || this.store.isLoading() ||
!_this.chartConfig || _this.initAnim === false ||
_this.chartConfig.chart.animation === false) {
Expand All @@ -606,6 +618,8 @@ Ext.define("Chart.ux.Highcharts", {
series = _this.series[i];
series.buildInitData(items);
}

this.initDataBuilt = true;
},

/**
Expand Down Expand Up @@ -650,6 +664,7 @@ Ext.define("Chart.ux.Highcharts", {
}
}

/*
if (Ext.isArray(_this.series)) {
for( i = 0; i < _this.series.length; i++) {
if(!_this.series[i].visible)
Expand All @@ -663,6 +678,7 @@ Ext.define("Chart.ux.Highcharts", {
this.refresh();
}
}
*/
},

/***
Expand Down Expand Up @@ -866,11 +882,23 @@ console.log(record);
// the current series data set
var chartSeriesLength = this.chart.series[i].points.length;
var storeSeriesLength = data[i].length;
this.log("chartSeriesLength " + chartSeriesLength +
var connectNulls = this.chart.series[i].options.connectNulls;

this.log("connectNulls " + connectNulls + " chartSeriesLength " + chartSeriesLength +
", storeSeriesLength " + storeSeriesLength);
for (var x = 0; x < Math.min(chartSeriesLength, storeSeriesLength); x++) {
this.chart.series[i].points[x].update(data[i][x], false, true);
}

// ConnectNulls is quite tricky as the chart.series[i].points will
// not contain any null data points. Hence, the chartSeriesLength is
// always less than storeSeriesLength. So we CANNOT go through the
// series and update each point as it can be undefined
if (connectNulls) {
this.chart.series[i].setData(data[i]);
continue;
} else {
for (var x = 0; x < Math.min(chartSeriesLength, storeSeriesLength); x++) {
this.chart.series[i].points[x].update(data[i][x], false, true);
}
}

// Gotcha, we need to be careful with pie series, as the totalDataField
// can conflict with the following series data points trimming operations
Expand Down
90 changes: 90 additions & 0 deletions desktop.extjs5/app/ChartsDesktopConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -944,6 +944,96 @@ Ext.define ("Highcharts.ChartsDesktopConfig", {
}
},

/*********************************************
* Spline - null data, discontinued graph
*********************************************/
splineConnectNulls : {
series : [{
type : 'spline',
dataIndex : 'yesterday',
name : 'Yesterday'
}, {
type : 'spline',
dataIndex : 'today',
name : 'Today'
}],
xField : 'time',
height : 500,
width : 700,
chartConfig : {
chart : {
marginRight : 130,
marginBottom : 120,
zoomType : 'x'
},
title : {
text : "Discontinued graph - connect null values.",
x : -20 //center
},
plotOptions: {
series: {
cursor: 'pointer',
connectNulls: true
}
},
subtitle : {
text : 'Random Value',
x : -20
},
xAxis : [{
title : {
text : 'Time',
margin : 20
},
labels : {
rotation : 270,
y : 35,
formatter : function () {
var dt = Ext.Date.parse (parseInt (this.value) / 1000, "U");
if (dt) {
return Ext.Date.format (dt, "H:i:s");
}
return this.value;
}

}
}],
yAxis : {
title : {
text : 'Temperature'
},
plotLines : [{
value : 0,
width : 1,
color : '#808080'
}]
},
tooltip : {
formatter : function () {
var dt = Ext.Date.parse (parseInt (this.x) / 1000, "U");
return 'At <b>' + this.series.name + '</b>' + Ext.Date.format (dt, "H:i:s") + ',<br/>temperature is : ' + this.y;
}

},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
credits : {
text : 'joekuan.wordpress.com',
href : 'http://joekuan.wordpress.com',
style : {
cursor : 'pointer',
color : '#707070',
fontSize : '12px'
}
}
}
},
/*************************************************
* Column config
*************************************************/
Expand Down
4 changes: 4 additions & 0 deletions desktop.extjs5/app/controller/Charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,10 @@ Ext.define('Highcharts.controller.Charts', {
hcConfig = configs.getSplineNullData();
store = Ext.create('Highcharts.store.NullTemperature');
break;
case 'splineConnectNulls':
hcConfig = configs.getSplineConnectNulls();
store = Ext.create('Highcharts.store.NullTemperature');
break;
case 'splineIrregular':
hcConfig = configs.getSplineIrregular();
store = Ext.create('Highcharts.store.IrregularData');
Expand Down
4 changes: 2 additions & 2 deletions desktop.extjs5/app/model/NullTemperature.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ Ext.define('Highcharts.model.NullTemperature', {
}, {
name : 'yesterday',
type : 'float',
useNull: true
allowNull: true
}, {
name : 'today',
type : 'float',
useNull: true
allowNull: true
}]
});
2 changes: 2 additions & 0 deletions desktop.extjs5/data/get-charts.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@
'icon' => '../images/linechart.png'),
array('text' => 'Spline - Line Shift (draw hidden series)', 'id' => 'charts/drawHiddenSeries', 'leaf' => true,
'icon' => '../images/linechart.png'),
array('text' => 'Spline - Null Data (ConnectNulls)', 'id' => 'charts/splineConnectNulls', 'leaf' => true,
'icon' => '../images/linechart.png'),
array('text' => 'Store reload with diff no. of data points', 'id' => 'charts/test1','leaf' => true,
'icon' => '../images/linechart.png'),
array('text' => 'Fix size chart within the component', 'id' => 'charts/test2','leaf' => true,
Expand Down
101 changes: 99 additions & 2 deletions desktop/app/ChartsDesktopConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -435,6 +435,8 @@ Ext.define ("Highcharts.ChartsDesktopConfig", {
cursor: 'pointer',
events: {
click: function(evt) {
var x = evt.pageX || evt.x;
var y = evt.pageY || evt.y;
Demo.menu && (Demo.menu.destroy()) && (Demo.menu = null);
Demo.menu = Ext.create('Ext.menu.Menu', {
width: 200,
Expand Down Expand Up @@ -475,7 +477,8 @@ Ext.define ("Highcharts.ChartsDesktopConfig", {
}
}]
});
Demo.menu.showAt(evt.point.pageX + 5, evt.point.pageY + 5);

Demo.menu.showAt(x + 5, y + 5);
}
},
xField : 'time'
Expand All @@ -488,6 +491,9 @@ Ext.define ("Highcharts.ChartsDesktopConfig", {
cursor: 'pointer',
events: {
click: function(evt) {
var x = evt.pageX || evt.x;
var y = evt.pageY || evt.y;

Demo.menu && (Demo.menu.destroy()) && (Demo.menu = null);
Demo.menu = Ext.create('Ext.menu.Menu', {
width: 200,
Expand Down Expand Up @@ -520,7 +526,7 @@ Ext.define ("Highcharts.ChartsDesktopConfig", {
}
}]
});
Demo.menu.showAt(evt.point.pageX + 5, evt.point.pageY + 5);
Demo.menu.showAt(x + 5, y + 5);
}
}
}
Expand Down Expand Up @@ -945,6 +951,97 @@ Ext.define ("Highcharts.ChartsDesktopConfig", {
}
},

/*********************************************
* Spline - null data, discontinued graph
*********************************************/
splineConnectNulls : {
series : [{
type : 'spline',
dataIndex : 'yesterday',
name : 'Yesterday'
}, {
type : 'spline',
dataIndex : 'today',
name : 'Today'
}],
xField : 'time',
height : 500,
width : 700,
chartConfig : {
chart : {
marginRight : 130,
marginBottom : 120,
zoomType : 'x'
},
title : {
text : "Discontinued graph - connect null values.",
x : -20 //center
},
plotOptions: {
series: {
cursor: 'pointer',
connectNulls: true
}
},
subtitle : {
text : 'Random Value',
x : -20
},
xAxis : [{
title : {
text : 'Time',
margin : 20
},
labels : {
rotation : 270,
y : 35,
formatter : function () {
var dt = Ext.Date.parse (parseInt (this.value) / 1000, "U");
if (dt) {
return Ext.Date.format (dt, "H:i:s");
}
return this.value;
}

}
}],
yAxis : {
title : {
text : 'Temperature'
},
plotLines : [{
value : 0,
width : 1,
color : '#808080'
}]
},
tooltip : {
formatter : function () {
var dt = Ext.Date.parse (parseInt (this.x) / 1000, "U");
return 'At <b>' + this.series.name + '</b>' + Ext.Date.format (dt, "H:i:s") + ',<br/>temperature is : ' + this.y;
}

},
legend : {
layout : 'vertical',
align : 'right',
verticalAlign : 'top',
x : -10,
y : 100,
borderWidth : 0
},
credits : {
text : 'joekuan.wordpress.com',
href : 'http://joekuan.wordpress.com',
style : {
cursor : 'pointer',
color : '#707070',
fontSize : '12px'
}
}
}
},

/*************************************************
* Column config
*************************************************/
Expand Down
Loading

0 comments on commit 7ca415e

Please sign in to comment.