SCYForce
30 Sep 2009, 10:35 PM
I am new to Extjs chart. I have three questions regarding to the chart.
I put a chart in side a tabpanel and the tabpanel is inside a portlet. The chart is like this:
http://www.extjs.com/forum/attachment.php?attachmentid=16538&stc=1&d=1254376679
I render this chart panel to a div. The div structure:
<script type="text/javascript">
var chartUrl = htStaticRes+'/ExtJSCollapsiblePanel/charts.swf';
function ht_reports_header_postrender() {
constructFlashTabPanels('ht_reports_header_content_div');
reportPriorityChart = genReportChart(chartUrl,'case_priority_div','case_priority_error_div','case_priority_flash_object','{!$Label.ht_case_count}','{!$ObjectType.case.fields.Priority.label}','{!caseByPriorityReportData}');
reportStatusChart = genReportChart(chartUrl,'case_status_div','case_status_error_div','case_status_flash_object','{!$Label.ht_case_count}','{!$ObjectType.case.fields.Status.label}','{!caseByStatusReportData}');
reportTypeChart = genReportChart(chartUrl,'case_type_div','case_type_error_div','case_type_flash_object','{!$Label.ht_case_count}','{!$ObjectType.case.fields.Type.label}','{!caseByTypeReportData}');
};
</script>
<script type="text/javascript" src="{!$Resource.HTReportJS}"/>
<div id="ht_reports_header_content_div">
<!-- Reports -->
<div></div>
</div>
<apex:inputHidden value="{!caseByPriorityReportData}" id="caseByPriorityReportDataHidden" />
<apex:inputHidden value="{!caseByStatusReportData}" id="caseByStatusReportDataHidden" />
<apex:inputHidden value="{!caseByTypeReportData}" id="caseByTypeReportDataHidden" />
<apex:actionFunction oncomplete="unmaskLoading(typeMask);refreshReportChartData(reportTypeChart,'caseByTypeReportDataHidden','case_type_error_div','case_type_flash_object');" name="refreshTypeReport" action="{!refreshCaseByTypeReportData}" rerender="caseByTypeReportDataHidden"/>
<apex:actionFunction oncomplete="unmaskLoading(statusMask);refreshReportChartData(reportStatusChart,'caseByStatusReportDataHidden','case_status_error_div','case_status_flash_object');" name="refreshStatusReport" action="{!refreshCaseByStatusReportData}" rerender="caseByStatusReportDataHidden"/>
<apex:actionFunction oncomplete="unmaskLoading(priorityMask);refreshReportChartData(reportPriorityChart,'caseByPriorityReportDataHidden','case_priority_error_div','case_priority_flash_object');" name="refreshPriorityReport" action="{!refreshCaseByPriorityReportData}" rerender="caseByPriorityReportDataHidden"/>
<!-- Report Tabs -->
<!-- commented hyperlinks as requested by Darian -->
<div id="reporttab1" class="x-hide-display">
<br/>
<apex:selectList id="case_type" value="{!caseByTypeFilterDuration}" size="1" onchange="maskLoading(typeMask);refreshTypeReport();">
<apex:selectOptions value="{!ReportFilterOptions}"/>
</apex:selectList>
<br/>
<div id="type_mask">
<div id="case_type_error_div">{!$Label.ht_no_data_for_selected_period}</div>
<div id="case_type_div"></div>
</div>
</div>
<div id="reporttab2" class="x-hide-display">
<br/>
<apex:selectList id="case_status" value="{!caseByStatusFilterDuration}" size="1" onchange="maskLoading(statusMask);refreshStatusReport();">
<apex:selectOptions value="{!ReportFilterOptions}"/>
</apex:selectList>
<div id="status_mask">
<div id="case_status_error_div">{!$Label.ht_no_data_for_selected_period}</div>
<div id="case_status_div"></div>
</div>
</div>
<div id="reporttab3" class="x-hide-display">
<br/>
<apex:selectList id="case_priority" value="{!caseByPriorityFilterDuration}" size="1" onchange="maskLoading(priorityMask);refreshPriorityReport();">
<apex:selectOptions value="{!ReportFilterOptions}"/>
</apex:selectList>
<div id="priority_mask">
<div id="case_priority_error_div">{!$Label.ht_no_data_for_selected_period}</div>
<div id="case_priority_div"></div>
</div>
</div>
Front end - html
All html inside the reporttab2 are rendered to the tabpanel, 'No data for select period' is rendered to div 'case_status_error_div', the extjs chart is rendered to div 'case_status_div', I also create a loadMask which renders to div 'status_mask'. When the user changes the picklist value, the loadmask will be displayed after fetching the data, the loadmask will be hidden. Same for other two tabs.
Problem 1:
http://www.extjs.com/forum/attachment.php?attachmentid=16539&stc=1&d=1254377243
FF
http://www.extjs.com/forum/attachment.php?attachmentid=16540&stc=1&d=1254377431
IE7
when the loadmask starts(mask.show()), we can see the previous chart information under the loadmask in IE but why we can not see the chart information in FF (I check the style for that chart object, it is visibility:visible).
Problem 2:
var reportPriorityChart;
var reportStatusChart;
var reportTypeChart;
var typeMask;
var statusMask;
var priorityMask;
Ext.onReady(function(){
typeMask = new Ext.LoadMask('type_mask');
statusMask = new Ext.LoadMask('status_mask');
priorityMask = new Ext.LoadMask('priority_mask');
});
var reportChartStyle = {
border : {
color : "ffffff",
size : 0
},
font : {
name : "Arial",
size : 11,
color : 0x333333
},
dataTip : {
border : {
color : 0x336699,
size : 1
},
font : {
name : "Arial",
size : 11,
color : 0x000000
}
},
xAxis : {
color : 0x666666
},
yAxis : {
color : 0x666666,
majorTicks : {
color : 0x666666,
length : 4
},
minorTicks : {
color : 0x666666,
length : 2
},
majorGridLines : {
size : 0
}
}
};
function loadReportChartData(data) {
var chartData = [];
var dataArray = data.split('|');
for (var i = 0; i < dataArray.length; i += 2) {
chartData.push([parseInt(dataArray[i+1]), dataArray[i]]);
}
return chartData;
};
function refreshReportChartData(chart,dataSourceElementId,flashErrorElementId,flashObjectId) {
var dataSourceElement = findVisualForceElement('input[type=hidden]', dataSourceElementId);
var chartData = loadReportChartData(dataSourceElement.value);
Ext.get(flashObjectId).setVisibilityMode(Ext.Element.DISPLAY);
Ext.get(flashErrorElementId).setVisibilityMode(Ext.Element.DISPLAY);
if (dataSourceElement.value == '') {
Ext.get(flashErrorElementId).setVisible(true);
Ext.get(flashObjectId).setVisible(false);
} else {
Ext.get(flashErrorElementId).setVisible(false);
Ext.get(flashObjectId).setVisible(true);
}
chart.items.items[0].store.loadData(chartData);
};
function genReportChart(url,divId,flashErrorElementId,flashObjectId,x,y,data) {
var store = new Ext.data.SimpleStore({
fields : [x.toLowerCase(), y.toLowerCase()],
data : loadReportChartData(data)
});
var chart = new Ext.Panel({
width : 600,
height : 350,
renderTo : divId,
items : {
xtype : 'barchart',
url: url,
id: flashObjectId,
store : store,
xField : x.toLowerCase(),
xAxis : new Ext.chart.NumericAxis({
title : x,
minimum: 0,
majorUnit : 2,
minorUnit : 1
}),
yField : y.toLowerCase(),
yAxis : new Ext.chart.CategoryAxis({
title : y
}),
chartStyle : reportChartStyle
}
});
Ext.get(flashErrorElementId).setVisibilityMode(Ext.Element.DISPLAY);
Ext.get(flashObjectId).setVisibilityMode(Ext.Element.DISPLAY);
if (data != '') {
Ext.get(flashErrorElementId).setVisible(false);
} else {
Ext.get(flashObjectId).setVisible(false);
}
return chart;
};
function constructFlashTabPanels(divId) {
// Reports Tab Panel
var reporttabpanel = new Ext.TabPanel({
renderTo: divId,
activeTab: 0,
animCollapse:true,
deferredRender:false,
plain:true,
hideParent:true,
autoHeight:false,
height:450,
items:[
{html:Ext.getDom('reporttab1').innerHTML, title:ht_by_type},
{html:Ext.getDom('reporttab2').innerHTML, title:ht_by_status},
{html:Ext.getDom('reporttab3').innerHTML, title:ht_by_priority}
]
});
reporttabpanel.on({
beforetabchange : function (tabs, prevTab, newTab){
var element = newTab.getEl();
var elementArray = Ext.query('select', newTab.getEl().dom);
elementArray[0].value = 'week';
elementArray[0].onchange();
}
});
hideObj(Ext.getDom('reporttab1'));
hideObj(Ext.getDom('reporttab2'));
hideObj(Ext.getDom('reporttab3'));
};
function maskLoading(mask){
mask.show();
};
function unmaskLoading(mask){
mask.hide();
};
The HTReportJS - the javascript file
If there isn't any data, I want to hide the chart(hide the actual embeded swf object) and display the error msg then if there are data I want to hide the error msg and display the chart. It works fine in FF, but in IE, when I switch from no data to data, the flash content will be shrinked. It works fine when I switch from data to data both in IE and FF.
http://www.extjs.com/forum/attachment.php?attachmentid=16541&stc=1&d=1254378246
IE 7, don't why this happens, if I don't hide the flash object, this works perfectly.
Problem 3:
Since this chart (flash object) is within a portlet, when I close the portlet and open it again or drag and drop the chart. In IE, the chart doesn't work. It only display the data before drag and drop or close, collapse. Do I need to set some configurations in chart?
So many weired questions which I can not figure out for couple days. Please provide your suggestions, I am very appreciated. Thanks!
I put a chart in side a tabpanel and the tabpanel is inside a portlet. The chart is like this:
http://www.extjs.com/forum/attachment.php?attachmentid=16538&stc=1&d=1254376679
I render this chart panel to a div. The div structure:
<script type="text/javascript">
var chartUrl = htStaticRes+'/ExtJSCollapsiblePanel/charts.swf';
function ht_reports_header_postrender() {
constructFlashTabPanels('ht_reports_header_content_div');
reportPriorityChart = genReportChart(chartUrl,'case_priority_div','case_priority_error_div','case_priority_flash_object','{!$Label.ht_case_count}','{!$ObjectType.case.fields.Priority.label}','{!caseByPriorityReportData}');
reportStatusChart = genReportChart(chartUrl,'case_status_div','case_status_error_div','case_status_flash_object','{!$Label.ht_case_count}','{!$ObjectType.case.fields.Status.label}','{!caseByStatusReportData}');
reportTypeChart = genReportChart(chartUrl,'case_type_div','case_type_error_div','case_type_flash_object','{!$Label.ht_case_count}','{!$ObjectType.case.fields.Type.label}','{!caseByTypeReportData}');
};
</script>
<script type="text/javascript" src="{!$Resource.HTReportJS}"/>
<div id="ht_reports_header_content_div">
<!-- Reports -->
<div></div>
</div>
<apex:inputHidden value="{!caseByPriorityReportData}" id="caseByPriorityReportDataHidden" />
<apex:inputHidden value="{!caseByStatusReportData}" id="caseByStatusReportDataHidden" />
<apex:inputHidden value="{!caseByTypeReportData}" id="caseByTypeReportDataHidden" />
<apex:actionFunction oncomplete="unmaskLoading(typeMask);refreshReportChartData(reportTypeChart,'caseByTypeReportDataHidden','case_type_error_div','case_type_flash_object');" name="refreshTypeReport" action="{!refreshCaseByTypeReportData}" rerender="caseByTypeReportDataHidden"/>
<apex:actionFunction oncomplete="unmaskLoading(statusMask);refreshReportChartData(reportStatusChart,'caseByStatusReportDataHidden','case_status_error_div','case_status_flash_object');" name="refreshStatusReport" action="{!refreshCaseByStatusReportData}" rerender="caseByStatusReportDataHidden"/>
<apex:actionFunction oncomplete="unmaskLoading(priorityMask);refreshReportChartData(reportPriorityChart,'caseByPriorityReportDataHidden','case_priority_error_div','case_priority_flash_object');" name="refreshPriorityReport" action="{!refreshCaseByPriorityReportData}" rerender="caseByPriorityReportDataHidden"/>
<!-- Report Tabs -->
<!-- commented hyperlinks as requested by Darian -->
<div id="reporttab1" class="x-hide-display">
<br/>
<apex:selectList id="case_type" value="{!caseByTypeFilterDuration}" size="1" onchange="maskLoading(typeMask);refreshTypeReport();">
<apex:selectOptions value="{!ReportFilterOptions}"/>
</apex:selectList>
<br/>
<div id="type_mask">
<div id="case_type_error_div">{!$Label.ht_no_data_for_selected_period}</div>
<div id="case_type_div"></div>
</div>
</div>
<div id="reporttab2" class="x-hide-display">
<br/>
<apex:selectList id="case_status" value="{!caseByStatusFilterDuration}" size="1" onchange="maskLoading(statusMask);refreshStatusReport();">
<apex:selectOptions value="{!ReportFilterOptions}"/>
</apex:selectList>
<div id="status_mask">
<div id="case_status_error_div">{!$Label.ht_no_data_for_selected_period}</div>
<div id="case_status_div"></div>
</div>
</div>
<div id="reporttab3" class="x-hide-display">
<br/>
<apex:selectList id="case_priority" value="{!caseByPriorityFilterDuration}" size="1" onchange="maskLoading(priorityMask);refreshPriorityReport();">
<apex:selectOptions value="{!ReportFilterOptions}"/>
</apex:selectList>
<div id="priority_mask">
<div id="case_priority_error_div">{!$Label.ht_no_data_for_selected_period}</div>
<div id="case_priority_div"></div>
</div>
</div>
Front end - html
All html inside the reporttab2 are rendered to the tabpanel, 'No data for select period' is rendered to div 'case_status_error_div', the extjs chart is rendered to div 'case_status_div', I also create a loadMask which renders to div 'status_mask'. When the user changes the picklist value, the loadmask will be displayed after fetching the data, the loadmask will be hidden. Same for other two tabs.
Problem 1:
http://www.extjs.com/forum/attachment.php?attachmentid=16539&stc=1&d=1254377243
FF
http://www.extjs.com/forum/attachment.php?attachmentid=16540&stc=1&d=1254377431
IE7
when the loadmask starts(mask.show()), we can see the previous chart information under the loadmask in IE but why we can not see the chart information in FF (I check the style for that chart object, it is visibility:visible).
Problem 2:
var reportPriorityChart;
var reportStatusChart;
var reportTypeChart;
var typeMask;
var statusMask;
var priorityMask;
Ext.onReady(function(){
typeMask = new Ext.LoadMask('type_mask');
statusMask = new Ext.LoadMask('status_mask');
priorityMask = new Ext.LoadMask('priority_mask');
});
var reportChartStyle = {
border : {
color : "ffffff",
size : 0
},
font : {
name : "Arial",
size : 11,
color : 0x333333
},
dataTip : {
border : {
color : 0x336699,
size : 1
},
font : {
name : "Arial",
size : 11,
color : 0x000000
}
},
xAxis : {
color : 0x666666
},
yAxis : {
color : 0x666666,
majorTicks : {
color : 0x666666,
length : 4
},
minorTicks : {
color : 0x666666,
length : 2
},
majorGridLines : {
size : 0
}
}
};
function loadReportChartData(data) {
var chartData = [];
var dataArray = data.split('|');
for (var i = 0; i < dataArray.length; i += 2) {
chartData.push([parseInt(dataArray[i+1]), dataArray[i]]);
}
return chartData;
};
function refreshReportChartData(chart,dataSourceElementId,flashErrorElementId,flashObjectId) {
var dataSourceElement = findVisualForceElement('input[type=hidden]', dataSourceElementId);
var chartData = loadReportChartData(dataSourceElement.value);
Ext.get(flashObjectId).setVisibilityMode(Ext.Element.DISPLAY);
Ext.get(flashErrorElementId).setVisibilityMode(Ext.Element.DISPLAY);
if (dataSourceElement.value == '') {
Ext.get(flashErrorElementId).setVisible(true);
Ext.get(flashObjectId).setVisible(false);
} else {
Ext.get(flashErrorElementId).setVisible(false);
Ext.get(flashObjectId).setVisible(true);
}
chart.items.items[0].store.loadData(chartData);
};
function genReportChart(url,divId,flashErrorElementId,flashObjectId,x,y,data) {
var store = new Ext.data.SimpleStore({
fields : [x.toLowerCase(), y.toLowerCase()],
data : loadReportChartData(data)
});
var chart = new Ext.Panel({
width : 600,
height : 350,
renderTo : divId,
items : {
xtype : 'barchart',
url: url,
id: flashObjectId,
store : store,
xField : x.toLowerCase(),
xAxis : new Ext.chart.NumericAxis({
title : x,
minimum: 0,
majorUnit : 2,
minorUnit : 1
}),
yField : y.toLowerCase(),
yAxis : new Ext.chart.CategoryAxis({
title : y
}),
chartStyle : reportChartStyle
}
});
Ext.get(flashErrorElementId).setVisibilityMode(Ext.Element.DISPLAY);
Ext.get(flashObjectId).setVisibilityMode(Ext.Element.DISPLAY);
if (data != '') {
Ext.get(flashErrorElementId).setVisible(false);
} else {
Ext.get(flashObjectId).setVisible(false);
}
return chart;
};
function constructFlashTabPanels(divId) {
// Reports Tab Panel
var reporttabpanel = new Ext.TabPanel({
renderTo: divId,
activeTab: 0,
animCollapse:true,
deferredRender:false,
plain:true,
hideParent:true,
autoHeight:false,
height:450,
items:[
{html:Ext.getDom('reporttab1').innerHTML, title:ht_by_type},
{html:Ext.getDom('reporttab2').innerHTML, title:ht_by_status},
{html:Ext.getDom('reporttab3').innerHTML, title:ht_by_priority}
]
});
reporttabpanel.on({
beforetabchange : function (tabs, prevTab, newTab){
var element = newTab.getEl();
var elementArray = Ext.query('select', newTab.getEl().dom);
elementArray[0].value = 'week';
elementArray[0].onchange();
}
});
hideObj(Ext.getDom('reporttab1'));
hideObj(Ext.getDom('reporttab2'));
hideObj(Ext.getDom('reporttab3'));
};
function maskLoading(mask){
mask.show();
};
function unmaskLoading(mask){
mask.hide();
};
The HTReportJS - the javascript file
If there isn't any data, I want to hide the chart(hide the actual embeded swf object) and display the error msg then if there are data I want to hide the error msg and display the chart. It works fine in FF, but in IE, when I switch from no data to data, the flash content will be shrinked. It works fine when I switch from data to data both in IE and FF.
http://www.extjs.com/forum/attachment.php?attachmentid=16541&stc=1&d=1254378246
IE 7, don't why this happens, if I don't hide the flash object, this works perfectly.
Problem 3:
Since this chart (flash object) is within a portlet, when I close the portlet and open it again or drag and drop the chart. In IE, the chart doesn't work. It only display the data before drag and drop or close, collapse. Do I need to set some configurations in chart?
So many weired questions which I can not figure out for couple days. Please provide your suggestions, I am very appreciated. Thanks!