PDA

View Full Version : Why is it my bar chart inside my panel will not get shown?



roberto rivera jr.
26 Jul 2013, 2:17 AM
Why is it my bar chart inside my panel will not get shown and needs several page refresh (F5)? Below is my entire script. Most of the scripts are just copied from the EXTJS example page. It works on that page but when I tried to use it, this problem occurs. I'm confuse why it is behaving this way. I know basic EXTJS but not sure if I missed something. Any help is really appreciated.



Ext.require([
'*'
]);

Ext.onReady(function() {
// Init the singleton. Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
maxWidth: 200,
minWidth: 80,
showDelay: 50 // Show 50ms after entering target
});

// Define the Model
Ext.define('report', {
extend: 'Ext.data.Model',
fields: ['range']
});

// Create the Store
var store = Ext.create('Ext.data.Store', {
model: 'report',
proxy: {
type: 'ajax',
url : 'cntllr_management_report_1',
reader: {
root: 'items',
type: 'json'
}
},
autoLoad: true
});

// Create the Chart
var chart = Ext.create('Ext.chart.Chart',{
xtype: 'chart',
animate: {
easing: 'bounceOut',
duration: 750
},
shadow: false,
autoShow: true,
autoRender: true,
store: store,
legend: {
position: 'right'
},
axes: [
{
title: 'All Open Request Count',
type: 'Numeric',
position: 'left',
grid: true,
minimum: 0,
maximum: 20,
minorTickSteps: 1
},
{
title: 'Target Completion Date Range',
type: 'Category',
position: 'bottom',
fields: ['range'],
grid: false,
adjustEnd: true,
label: {
rotate: {
degrees: -90
}
}
}],
series: [{
type: 'bar',
highlight: true,
xPadding: 5,
yPadding: 0,
column: true,
stacked: true,
gutter: 2,
yField: [],
tips: {
trackMouse: true,
width: 250,
height: 50,
renderer: function(storeItem, item) {
this.setTitle(item.yField + ' : ' + item.value[1] + '<br/>' + 'Range : ' + storeItem.get('range'));
}
}
}]
});

// Calling Ajax request to the controller to retrieve list of unique
// discovery focus fields
Ext.Ajax.request({
url: 'get_discovery_focus_list',
success: function(response){
// Set the Model fields with discovery focus.
var arrayOfStrings = response.responseText.split(",");

// Function to iterate array.
Ext.Array.each(arrayOfStrings, function(name) {
report.prototype.fields.add(new Ext.data.Field(name));
});

// Set the Chart Series yField properties.
var series = chart.series.first();
series.yField = response.responseText.split(",");
// series.drawSeries();
}
});

// Create the chart panel host
var panel = Ext.create('widget.panel', {
title: 'All Open Requests by Focus Area and Target Completion Date',
height: 600,
bodyPadding: 10,
layout: 'fit',
renderTo: 'contents',
tbar: {
items: [
{ xtype: 'buttongroup',
title: 'Menu',
padding: '1 5 1 5',
items:[{ xtype: 'button',
text: 'Print Chart',
listeners: {
click: function() {
Ext.MessageBox.confirm('Print', 'You are about to print this report.',function(choice){
if(choice == 'yes'){
window.print(); //http://www.javascriptkit.com/howto/newtech2.shtml
}
});
}
}
},{ xtype: 'component',
autoEl: {
tag: 'a',
href: 'management_report_1_CSV',
html: 'Download CSV'
}
}
]
}]
},
items: chart,
fbar: {
items: [{
cls: 'report1-footerbar',
xtype: 'label',
text:'NOTE: This also includes GATED Test Request.'
}]}
});

chart.redraw(true);

// create the printer panel
var printable = Ext.create('widget.panel', {
cls: 'printer',
border: false,
header: false,
shadow: false,
floating: true,
height: panel.length * 670,
width: '80%',
items: panel
}).show();

printable.setPosition(25, 50);
printable.el.dom.style.zIndex = -50;
});

Gary Schlosberg
28 Jul 2013, 9:21 PM
Are you getting errors in the console? What does your data look like?

roberto rivera jr.
22 Aug 2013, 1:14 AM
I did not get an error in the console. I'm using Firebug by the way. My data is in JSON format. I have several processes (database access, date conversion, array manipulation) in my PHP controller in order to come up the JSON data format that extjs chart required. Could it be the reason why my chart sometimes will not get shown? That is my primary suspect right now considering I did not get any errors.

Is the Ext.onReady(function()) enough for my chart to wait while my controller is still processing the data?

Gary Schlosberg
31 Aug 2013, 7:55 AM
Your layout might be overnested. You try ensuring that you don't have extra layers of containers.

debabrata
4 Sep 2013, 6:39 PM
Try:




var printable = Ext.create('widget.panel', {
cls: 'printer',
border: false,
header: false,
shadow: false,
floating: true,
height: 400,
width: 400,
layout: 'fit',
items: panel
}).show();

roberto rivera jr.
5 Sep 2013, 9:28 PM
Gary,

I will re-check my layout. I only have one container for my grid and it is the panel but it is also the container of several panels from the top and bottom bar. Could there be any connection to them? I'll let you know if I found something with regards to my containers.

Thanks!

roberto rivera jr.
30 Oct 2013, 11:33 PM
After several debugging I couldn't still figure out why my chart will not display on some instance. I check my store and it returns the data but for some reason my chart sometimes will not display. I'm not sure if my code below constitute overnested. Any help is appreciated.

Here is my complete code:


Ext.require([
'*'
]);


Ext.onReady(function() {
// Init the singleton. Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();


// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
maxWidth: 200,
minWidth: 80,
showDelay: 50 // Show 50ms after entering target
});

// Define the Model
Ext.define('report', {
extend: 'Ext.data.Model',
fields: ['location']
});

// Create the Store
var store = Ext.create('Ext.data.Store', {
model: 'report',
proxy: {
type: 'ajax',
url : 'cntllr_management_report_4',
reader: {
root: 'items',
type: 'json'
}
},
autoLoad: true
});

// Create a new instance of Ext.chart.theme CustomTheme
Ext.create('Ext.chart.theme.CustomTheme');

// Create the Chart
var chart = Ext.create('Ext.chart.Chart',{
xtype: 'chart',
animate: {
easing: 'ease',
duration: 350
},
renderTo: 'contents',
shadow: false,
autoShow: true,
autoRender: true,
theme: 'CustomTheme',
store: store,
legend: {
position: 'right',
padding: 30
},
axes: [
{
title: 'Open Sessions Count',
type: 'Numeric',
position: 'left',
grid: true,
minimum: 0,
adjustMaximumByMajorUnit: false
},
{
title: 'DTE Location',
type: 'Category',
position: 'bottom',
fields: ['location'],
grid: false,
adjustEnd: true,
label: {
rotate: {
degrees: 0
}
}
}],
series: [{
type: 'bar',
highlight: true,
xPadding: 5,
yPadding: 0,
column: true,
stacked: true,
gutter: 2,
yField: [],
style: {
width: 180
},
tips: {
trackMouse: true,
width: 250,
height: 50,
renderer: function(storeItem, item) {
this.setTitle(item.yField + ' : ' + item.value[1] + '<br/>' + 'Location : ' + storeItem.get('location') );
}
}
}],
listeners: {
load: function(me, selection) {
me.refresh();
console.log(me)
}
}
});
console.log(store)
// Calling Ajax request to the controller to retrieve list of unique
// discovery focus fields
Ext.Ajax.request({
url: 'get_discovery_focus_list_per_location',
success: function(response){
// Set the Model fields with discovery focus.
var cleanDotArray=Array();
var arrayOfStrings = response.responseText.split(",");

Ext.Array.each(arrayOfStrings, function(name) {
cleanDotArray.push(name.replace(".","_","gi"));
});

// Function to iterate array.
Ext.Array.each(cleanDotArray, function(name) {
report.prototype.fields.add(new Ext.data.Field(name));
});

// Set the Chart Series yField properties.
var series = chart.series.first();
series.yField = cleanDotArray //response.responseText.split(",");
chart.redraw();
chart.refresh();
}
});

// Create the chart panel host
var panel = Ext.create('widget.panel', {
title: 'Open Sessions by Focus Area and DTE Location',
height: 700,
resizable: true,
resizeHandles: 's',
bodyPadding: 10,
layout: 'fit',
renderTo: 'contents',
tbar: [{ xtype:'buttongroup',
title: 'Menu',
width: 175,
padding: '1 5 1 10',
items:[{ xtype: 'button',
text: 'Print Chart',
listeners: {
click: function() {
Ext.MessageBox.confirm('Print', 'Are you sure you want to print this report?',function(choice){
if(choice == 'yes'){
window.print();
}
});
}
}
},{ xtype: 'component',
autoEl: {
tag: 'a',
href: 'management_report_4_CSV',
html: 'Download CSV'
}
}]},
],
items: chart,
bbar: {
items: [{
xtype: 'panel',
title: 'Notes:',
collapsible: true,
width: '100%',
height: 75,
bodyPadding: '5 5 5 5',
contentEl: 'notes'
}]
}
});

// The following codes will calculate the maximum number from all the date range.
// By doing this, will force the extjs chart to adhere to the maximum value drawn by the axis.
// If not set explicitly, the axis maximum will be calculated automatically. However,
// this will also includes decimal values.
chart.getStore().load(function(records, operation, success){
var sumOfAllArray = new Array();

Ext.Object.each(records, function(key, value, myself) {

// Gets all values of the object records as an array.
var objValuesToArray = Ext.Object.getValues(value.raw);

// First array item contains string "range". This should be removed.
var removeFirstItem = objValuesToArray.slice(1);

// Calculates the sum of all items in the removeFirstItem array.
var sumAllArrayElements = Ext.Array.sum(removeFirstItem)

sumOfAllArray.push(sumAllArrayElements)

});
chart.axes.items[0].maximum=Math.ceil(Ext.Array.max(sumOfAllArray) / 10) * 10
chart.redraw()
scope: this
})

// create the printer panel
var printable = Ext.create('widget.panel', {
cls: 'printer',
border: false,
header: false,
shadow: false,
floating: true,
height: panel.length * 670,
width: '80%',
items: panel
}).show();

printable.setPosition(25, 50);
printable.el.dom.style.zIndex = -50;
});

roberto rivera jr.
31 Oct 2013, 2:00 AM
I just read from a post here that said try not to insert chart inside a panel for the chart itself is a panel. Could this be the solution? I'll try to find out.

roberto rivera jr.
31 Oct 2013, 2:56 AM
I tried not to encapsulate the chart from a panel but still the problem exist. Thinking this might be caused by data processing from my controller that takes too long to send back JSON data to my store. Any ideas? :-/

Gary Schlosberg
31 Oct 2013, 6:30 AM
You might try it with a static JSON file so the chart doesn't have to wait. If the problem goes away, we know the problem is the slow data. If not, you might post a sample of that JSON here so we can test your code.

roberto rivera jr.
3 Nov 2013, 8:49 PM
Here is the JSON result. I tried this as static file but I can still see (sometimes) chart is empty when loaded.

echo '({"success":true,"items":[{"location":"CEBU","Device Quotas":49,"Downtime Reports (MS812)":8,"DSS":12,"Google Docs":1,"Proj1":1,"Mobile Print":15,"Print Management (PM)":8,"LFM 3_0":2,"LSCM":0,"Markvision Enterprise":1,"OCR\/MRC Enabled Apps":3,"Right Fax":9,"Scan to Network Folders":1,"SW VT\'s and NMI\'s":1},{"location":"UNASSIGNED","Device Quotas":72,"Downtime Reports (MS812)":1,"DSS":3,"Google Docs":0,"Proj1":22,"Mobile Print":0,"Print Management (PM)":0,"LFM 3_0":0,"LSCM":1,"Markvision Enterprise":0,"OCR\/MRC Enabled Apps":0,"Right Fax":0,"Scan to Network Folders":0,"SW VT\'s and NMI\'s":0},{"location":"LEXINGTON","Device Quotas":0,"Downtime Reports (MS812)":0,"DSS":0,"Google Docs":0,"Proj1":0,"Mobile Print":0,"Print Management (PM)":0,"LFM 3_0":0,"LSCM":6,"Markvision Enterprise":0,"OCR\/MRC Enabled Apps":0,"Right Fax":0,"Scan to Network Folders":0,"SW VT\'s and NMI\'s":0}]})';

I'm currently adding this code to basically reload the store and refreshes the table:

var task = new Ext.util.DelayedTask(function(){ // The following codes will calculate the maximum number from all the date range.
// By doing this, will force the extjs chart to adhere to the maximum value drawn by the axis.
// If not set explicitly, the axis maximum will be calculated automatically. However,
// this will also includes decimal values.
chart.getStore().load(function(records, operation, success){
var sumOfAllArray = new Array();
Ext.Object.each(records, function(key, value, myself) {


// Gets all values of the object records as an array.
var objValuesToArray = Ext.Object.getValues(value.raw);


// First array item contains string "range". This should be removed.
var removeFirstItem = objValuesToArray.slice(1);


// Calculates the sum of all items in the removeFirstItem array.
var sumAllArrayElements = Ext.Array.sum(removeFirstItem)


sumOfAllArray.push(sumAllArrayElements)
});
chart.axes.items[0].maximum=Math.ceil(Ext.Array.max(sumOfAllArray) / 10) * 10
chart.redraw()
scope: this
})
console.log("update done...")
});
task.delay(1000)

I'm not sure if this is a "workaround" or there is a better way how to do this in chart class. With this it seems that I can reload the store so that it will populate the chart successfully.

Thanks.

roberto rivera jr.
4 Nov 2013, 5:32 PM
I think I found the cause. A chart inside a panel and inside another panel. Looks overnested? :-?

Here, I created a chart object

var chart = Ext.create('Ext.chart.Chart',{ animate: {
easing: 'ease',
duration: 350
},
shadow: false,
autoShow: true,
autoRender: true,
theme: 'CustomTheme',
store: store,
padding: '5 5 5 5',
legend: {
position: 'right',
itemSpacing: 0.01,
padding: 5
},
axes: [
{
title: 'All Open Request Count',
type: 'Numeric',
position: 'left',
grid: true,
minimum: 0,
adjustMaximumByMajorUnit: true
},
{
title: 'Target Completion Date Range',
type: 'Category',
position: 'bottom',
fields: ['range'],
grid: false,
adjustEnd: true,
width: 500,
label: {
renderer: function(v) {return v;},
rotate: { degrees: 65 }
}
}],
series: [{
type: 'bar',
highlight: true,
xPadding: 0,
yPadding: 0,
column: true,
stacked: true,
gutter: 20,
yField: [],
tips: {
trackMouse: true,
width: 250,
height: 50,
renderer: function(storeItem, item) {
this.setTitle(item.yField + ' : ' + item.value[1] + '<br/>' + 'Range : ' + storeItem.get('range'));
}
}
}]
});

Then here, I put the chart in a panel

// Create the chart panel host var panel = Ext.create('widget.panel', {
title: 'All Open Requests by Focus Area and Target Completion Date',
cls: 'printer',
height: 900,
width: '95%',
resizable: true,
resizeHandles: 's',
bodyPadding: '5 0 20 10',
autoScroll: false,
layout: 'fit',
renderTo: 'contents',
tbar: {
items: [
{ xtype: 'buttongroup',
title: 'Menu',
width: 175,
padding: '1 5 1 10',
items:[{ xtype: 'button',
text: 'Print Chart',
listeners: {
click: function() {
Ext.MessageBox.confirm('Print', 'Are you sure you want to print this report?',function(choice){
if(choice == 'yes'){
window.print(); //http://www.javascriptkit.com/howto/newtech2.shtml
}
});
}
}
},{ xtype: 'component',
autoEl: {
tag: 'a',
href: 'management_report_1_CSV',
html: 'Download CSV'
}
}
]
}]
},
items: chart,
bbar: {
items: [{
xtype: 'panel',
title: 'Notes:',
collapsible: true,
width: '100%',
height: 75,
bodyPadding: '5 5 5 5',
contentEl: 'notes'
}]
}
});

And then, another panel in order for me to print the chart using window.print():

var printable = Ext.create('widget.panel', {
cls: 'printer',
border: false,
header: false,
shadow: false,
floating: true,
height: panel.length * 670,
width: '80%',
layout: 'fit',
items: panel
}).show();

printable.setPosition(25, 50);
printable.el.dom.style.zIndex = -50;

I already removed the third panel and I hope it works!

Gary Schlosberg
4 Nov 2013, 5:45 PM
Glad to hear it's working now for you, and thanks for taking the time to post a follow-up for the community.

roberto rivera jr.
5 Nov 2013, 12:03 AM
Glad to hear it's working now for you, and thanks for taking the time to post a follow-up for the community.

Gary, thanks for your time in looking at my post. I'll mark this post as answered once I confirm my findings.

mazhar.shaikh
8 Oct 2015, 3:31 PM
I had the same problem when my container was Collapsible and graph wont show if the animCollapse config was set to true. As soon as I change it to false, graph would appear.

And obviously, layout of the container panel was set to Fit and Height and Width explicitly specified for the graph.