PDA

View Full Version : Chart Render Problem



tina@user
15 Sep 2015, 5:11 AM
hi,

I have created a dashboard with is rendered on a click of a button.

This page contains multiple charts and 2 grids which get loaded using ajax data.

the problem is sometimes the chart gets rendered and sometimes not, however the grids are always fine.

This is how my rendered chart looks like :-

53247

this is mu unrendered chart:-

53248

I dont understand where the problem lies because code remains same.

Here is my chart code:-



Ext.define('App.view.VCpuUtilizationChart', {
extend : 'Ext.chart.Chart',
alias : 'widget.VCpuUtilizationChart',
store : 'UtilizationStore',
theme : 'Base:gradients',
animate: true,
shadow:false,
legend : {
position : 'right',
boxStroke: '#fff'
},
series : [ {
type : 'pie',
angleField : 'cpuCount',
showInLegend : true,
tips : {
trackMouse : true,
width : 140,
height : 28,
renderer : function(storeItem, item) {
//to calculate percentage
var total = 0;
Ext.data.StoreManager.lookup('UtilizationStore').each(
function(rec) {
total += rec.get('cpuCount');
});

this.setTitle(storeItem.get('vmStatus') + ': ' + Math.round(((storeItem.get('cpuCount'))/total)*100) +'%' );
//+ Math.round(storeItem.get('cpuCount')));
//((storeItem.get('cpuCount'))/total)*100
}

},
/*highlight : {
segment : {
margin : 20
}
},*/
label : {
field : 'vmStatus',
display : 'rotate',
contrast : true,
font : '14px Arial',
renderer: function(val, store) {
var store = Ext.getStore('UtilizationStore');
var index = store.find('vmStatus', val);
var record = store.getAt(index);
return record.get('cpuCount');
}
},
getLegendColor : function(index) {
return [ "#1abc9c", "#9C94CD", "#b0c4de", "#fafad2" ][index % 4];
},


renderer : function(sprite, record, attr, index, store) {
return Ext.apply(attr,{
fill : [ "#1abc9c", "#9C94CD", "#b0c4de",
"#fafad2" ][index % 4]
});
},
} ],


listeners:{
afterrender:function(_this){
Ext.defer(function() {
_this.getStore().load(_this);
}, 1000);
} }


});


And is mentioned the chart data is remote.

Please Help!!

I have also tried to use Ext.defer in order to defer the store load after view is rendered.

Thanx in advance!!

marcin.sielski
15 Sep 2015, 8:52 AM
Not an expert but...
have you tried to chart.redraw() after you loaded new data?

Gary Schlosberg
15 Sep 2015, 9:55 AM
I haven't heard of an issue like this. Do you get anything helpful when you inspect the elements of the chart? For instance, are there any differences between a successful render and otherwise?

tina@user
15 Sep 2015, 8:28 PM
No ,...even after inspect element, i didnt find anything different for both the cases.

and chart.redraw() shows no diiference...

Personally what i find wierd is it happens for all the chart in the dashboard.
either all gets rendered else none.

What should i do??

Please help!!

tina@user
21 Sep 2015, 12:39 AM
What I have figured out is when i load the store with autoLoad:true and remove the code where i load the store from view, then this problem goes away





.listeners:{ afterrender:function(_this){ Ext.defer(function() { _this.getStore().load(_this); }, 1000); } }


But i need to change the line chart data with a change in the value of combobox.
I also tried.:-



_this.getStore().load({ url : '/CloudXStandardService/rest/UserDashboard/getVMStatusHistory/'+userPSNumber+'/'+operationalDivision, callback: function (records, operation, success) { //debugger; //Ext.getCmp('ServerVMRunningStatus').getStore().loadData(records); } });


Please Guide!!!