I'll look at getting a working example up on Fiddle later, but for now here's a basic breakdown of how I implemented it. Below is a basic column chart, but you can edit the highchart code to display any of the available chart types:
Assuming the store load returns data in this format:
Code:
"records": [
{"key":"2012-08-08 23:59:59", "value":"2"},
{"key":"2012-08-07 23:59:59", "value":"4"},
{"key":"2012-08-06 23:59:59", "value":"5"},
{"key":"2012-08-05 23:59:59", "value":"3"},
{"key":"2012-08-04 23:59:59", "value":"7"},
{"key":"2012-08-03 23:59:59", "value":"3"},
{"key":"2012-08-02 23:59:59", "value":"1"}
]
Here's a couple of chart specific functions I use in the code later:
Code:
function convertChartData(records, name) {
var arr = [];
for(i = 0, x = records.length; i < x; i++) {
var r = records[i];
var val = r.get(name);
arr.push(val)
};
return arr;
}
function resizeChart(containerId, chart) {
var parent = $('#' + containerId);
var w = parent.width();
var h = parent.height();
chart.setSize(w, h);
}
And now the full EXTJS code for adding highcharts to panels:
Code:
Ext.ns('MyApp');
MyApp.chart_example = Ext.extend(Ext.Panel, {
initComponent:function() {
var thispanel = this;
var chart;
var fields = [
{name: 'key', mapping:'key', type:'date', dateFormat:'Y-m-d H:i:s'},
{name: 'value', mapping:'value', type:'float'}
];
var store = new Ext.data.JsonStore({
url: URL_GOES_HERE,
fields: fields,
root: 'records',
autoLoad: false,
listeners: {
load: function(thisStore, records, o)
var keys = convertChartData(records, 'key');
var values = convertChartData(records, 'value');
chart.xAxis[0].setCategories(keys);
chart.series[0].setData(values);
resizeChart(thispanel.id, chart)
}
}
});
var config = {
flex:1,
store: store,
border: false
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
MyApp.chart_example.superclass.initComponent.apply(this, arguments);
this.on({
bodyresize: {
fn: function() {
resizeChart(thispanel.id, chart)
}
},
afterrender:{scope:this, single:true, fn:function() {
var renderTo = this.id;
chart = new Highcharts.Chart({
title: false,
credits: false,
legend: false,
chart: {
animation: true,
type: 'column',
renderTo: renderTo,
margin:[20, 20, 55, 35]
},
yAxis: [{
allowDecimals: false,
title: false,
alternateGridColor: '#f9f9f9'
}],
xAxis: {
reversed: true,
labels: {
formatter: function() {
var formatted = this.value.format('jS M');
return formatted
},
rotation: -45,
style: {
fontWeight: 'normal',
fontSize: '10px'
},
align:'right',
x:5
}
},
tooltip: {
borderWidth: 1,
shadow:false,
style: {
fontSize: '11px'
},
formatter: function() {
if(this.y == 0) {
return false;
} else {
var formatted = this.x.format('jS M');
return '<b>' + formatted + '</b><br>' + this.y;
}
}
},
plotOptions: {
column: {
borderWidth: 0,
animation: {duration: 1000},
dataLabels: {
enabled: true,
style: {
color:'#888'
},
y: -8,
formatter: function() {
if(this.y == 0) {
return '';
} else {
return this.y;
}
}
}
},
series: {
color: '#dd5658',
shadow: false,
cursor: 'pointer',
events: {
click: function(e) {
// CLICK LOGIC HERE
}
}
}
},
series: [{
data: []
}]
});
this.store.load();
this.chart = chart;
}}
});
}
});
Ext.reg('chart_example', MyApp.chart_example);
Then to add this to your layout, you would simply do something like the following:
Code:
var basicPanel = new Ext.Panel({
title: 'Here is the Chart Container',
items: {
xtype: 'chart_example'
}
});
Give me a shout if none of this makes sense...
Reply With Quote