extjs-gpl
Version:
GPL licensed version of Sencha Ext JS
177 lines (171 loc) • 5.99 kB
JavaScript
/**
* Demonstrates how to use Ext.chart.series.Gauge
*/
Ext.define('KitchenSink.view.chart.Gauge', {
extend: 'Ext.Panel',
requires: [
'Ext.chart.PolarChart',
'Ext.chart.series.Gauge'
],
controller: 'chart',
layout: 'fit',
// <example>
otherContent: [{
type: 'Controller',
path: 'modern/src/view/chart/ChartController.js'
}, {
type: 'Store',
path: 'modern/src/store/Pie.js'
}],
// </example>
shadow: true,
items: [{
xtype: 'toolbar',
docked: 'top',
cls: 'charttoolbar',
items: [{
xtype: 'spacer'
}, {
iconCls: 'x-fa fa-refresh',
text: 'Refresh',
handler: 'onRefresh'
}]
}, {
layout: 'vbox',
items: [{
layout: 'hbox',
flex: 1,
items: [{
xtype: 'polar',
insetPadding: 20,
flex: 1,
store: {
type: 'pie',
storeId: 'gaugeStore'
},
animate: {
easing: 'elasticIn',
duration: 1000
},
series: [{
type: 'gauge',
angleField: 'g1',
minimum: 100,
maximum: 800,
donut: 30,
colors: ["#115fa6", "lightgrey"]
}]
}]
}, {
layout: 'hbox',
flex: 1,
items: [{
xtype: 'polar',
innerPadding: 20,
flex: 1,
store: 'gaugeStore',
series: [{
type: 'gauge',
angleField: 'g1',
donut: 30,
value: 60,
minimum: 100,
maximum: 800,
needle: true,
needleLength: 95,
needleWidth: 8,
totalAngle: Math.PI,
label: {
fontSize: 12,
fontWeight: 'bold'
},
colors: ['maroon', 'blue', 'lightgray', 'red'],
sectors: [{
end: 300,
label: 'Cold',
color: 'dodgerblue'
}, {
end: 300,
style: {
strokeStyle: 'black',
strokeOpacity: 1,
lineWidth: 4
}
}, {
end: 600,
label: 'Temp.',
color: 'lightgray'
}, {
end: 600,
style: {
strokeStyle: 'black',
strokeOpacity: 1,
lineWidth: 4
}
}, {
end: 800,
label: 'Hot',
color: 'tomato'
}, {
start: 0,
style: {
strokeStyle: 'gray',
strokeOpacity: 1,
lineWidth: 4,
fillOpacity: 0
}
}],
renderer: function(sprite, config, rendererData, spriteIndex) {
var surface = sprite.getParent(),
chart = rendererData.series.getChart(),
mainRect = chart.getMainRect(),
width = mainRect[2],
height = mainRect[3],
bigChart = (width >= 250 && height >= 150),
changes, fontSize;
// This renderer function draws the "Temp." label in big white letters,
// the "Cold" label in blue, and the "Hot" label in red.
if (config.type == "label") {
changes = {
x: config.x + 10,
y: config.y + 10
};
if (spriteIndex == 3) {
Ext.apply(changes, {
fontSize: (bigChart ? 32 : 16),
strokeStyle: 'black'
});
} else {
Ext.apply(changes, {
fontSize: (bigChart ? 24 : 12)
});
}
switch (spriteIndex) {
case 1:
Ext.apply(changes, {
color: 'blue'
});
break;
case 3:
Ext.apply(changes, {
color: 'white'
});
break;
case 5:
Ext.apply(changes, {
color: 'darkred'
});
break;
}
return changes;
}
}
}]
}]
}]
}],
initialize: function() {
this.callParent();
Ext.getStore('Pie').generateData(9);
}
});