Version 8.3/EVAL Deployment (2012-11-20)
We have a weird issue when drawing charts. If the user switches chart types, the chart does not utilize the entire height of its container. The y-axis is compressed as a result, and there is some whitespace at the bottom of the chart.
Example Code:
Repro steps:
- load page, observe chart bottom is above chart selector, y axis ticks at 0, 5,000, 10,000, 15,000, 20,000
- change chart to pie, observe chart bottom is above chart selector
- change chart back to column, observe chart bottom is pushed up and there is white space between chart selector and chart, y axis ticks at 0, 10,000, 20,000
The examples are not exhibiting this problem. I have observed it in both IE 9 and FF 18.0.2.
I watched the chart and layout components in the developer console, the height and positioning is NOT changing when this issue occurs. Seems like the chart inside the cnvas is being compressed vertically somehow.
We have a weird issue when drawing charts. If the user switches chart types, the chart does not utilize the entire height of its container. The y-axis is compressed as a result, and there is some whitespace at the bottom of the chart.
Example Code:
Code:
<html>
<head>
<title >Chart Test Case</title>
<script type="text/javascript" >
var isomorphicDir="http://localhost:8080/isomorphic/";
var data = [
{contactName:"Construction Executive",region:" ",inspections:206,observations:913,lastInspectionDate:"2012-08-31",index:52.6},
{contactName:"Bob Hoskins ",region:"South",inspections:178,observations:18763,lastInspectionDate:"2008-10-09",index:85.6},
{contactName:"Bill Murray ",region:"South",inspections:173,observations:17687,lastInspectionDate:"2011-11-05",index:89.7},
{contactName:"Adrien Brody ",region:"South",inspections:94,observations:8109,lastInspectionDate:"2010-10-20",index:90.7},
{contactName:"Diane Keaton",region:"South",inspections:84,observations:4157,lastInspectionDate:"2008-10-09",index:69.1},
{contactName:"Giant Construction Admin ",region:"West",inspections:76,observations:256,lastInspectionDate:"2013-02-01",index:71.1},
{contactName:"Billy Bob Thornton ",region:"South",inspections:75,observations:705,lastInspectionDate:"2010-08-05",index:9.3},
{contactName:"Angela Bassett ",region:"West",inspections:67,observations:2095,lastInspectionDate:"2013-02-01",index:94.8},
{contactName:"Charlize Theron ",region:" ",inspections:66,observations:416,lastInspectionDate:"2013-02-02",index:75.3},
{contactName:"Dexter Gordon",region:" ",inspections:65,observations:2309,lastInspectionDate:"2008-10-09",index:17.5},
{contactName:"Edward James Olmos",region:"South",inspections:64,observations:2872,lastInspectionDate:"2008-10-10",index:20.6},
{contactName:"Clint Eastwood ",region:"East",inspections:63,observations:6022,lastInspectionDate:"2008-10-08",index:83.5},
{contactName:"F. Murray Abraham ",region:"Central",inspections:61,observations:4362,lastInspectionDate:"2008-10-08",index:97.9},
{contactName:"Denzel Washington",region:"Central",inspections:60,observations:5021,lastInspectionDate:"2008-10-08",index:16.5},
{contactName:"Forest Whitaker",region:" ",inspections:58,observations:1605,lastInspectionDate:"2008-10-08",index:80.4},
{contactName:"Catalina Sandino Moreno ",region:"South",inspections:54,observations:2664,lastInspectionDate:"2009-05-12",index:87.6},
{contactName:"Giant Admin",region:" ",inspections:54,observations:169,lastInspectionDate:"2013-01-30",index:40.2},
{contactName:"Ed Harris",region:"South",inspections:52,observations:1348,lastInspectionDate:"2009-05-07",index:51.5},
{contactName:"Gary Busey ",region:"Central",inspections:50,observations:5189,lastInspectionDate:"2012-03-11",index:35.1},
{contactName:"Geena Davis",region:"South",inspections:50,observations:792,lastInspectionDate:"2009-05-07",index:33},
{contactName:"Ben Kingsley ",region:"South",inspections:48,observations:2377,lastInspectionDate:"2008-10-08",index:55.7},
{contactName:"Halle Berry",region:" ",inspections:42,observations:7972,lastInspectionDate:"2009-05-04",index:44.3},
{contactName:"Holly Hunter",region:"South",inspections:39,observations:1052,lastInspectionDate:"2008-10-09",index:62.9},
{contactName:"Elisabeth Shue ",region:"South",inspections:33,observations:760,lastInspectionDate:"2008-10-08",index:76.3},
{contactName:"Helen Mirren",region:"South",inspections:32,observations:1169,lastInspectionDate:"2008-10-06",index:30.9},
{contactName:"Helen Hunt",region:" ",inspections:31,observations:1985,lastInspectionDate:"2008-10-06",index:58.8},
{contactName:"Dudley Moore ",region:"East",inspections:29,observations:3111,lastInspectionDate:"2008-10-07",index:79.4},
{contactName:"Emily Watson",region:" ",inspections:28,observations:1657,lastInspectionDate:"2008-10-09",index:70.1}
];
</script>
<script type="text/javascript" SRC="isomorphic/system/modules/ISC_Core.js"></script>
<script type="text/javascript" SRC="isomorphic/system/modules/ISC_Foundation.js"></script>
<script type="text/javascript" SRC="isomorphic/system/modules/ISC_Containers.js"></script>
<script type="text/javascript" SRC="isomorphic/system/modules/ISC_Forms.js"></script>
<script type="text/javascript" SRC="isomorphic/system/modules/ISC_DataBinding.js"></script>
<script type="text/javascript" SRC="isomorphic/system/modules/ISC_Drawing.js"></script>
<script type="text/javascript" SRC="isomorphic/system/modules/ISC_Charts.js"></script>
<script type="text/javascript" SRC="isomorphic/system/modules-debug/ISC_PluginBridges.js"></script>
<script type="text/javascript" SRC="isomorphic/skins/EnterpriseBlue/load_skin.js"></script>
</head>
<body>
<script type="text/javascript">
var chart = isc.FacetChart.create({
data: data,
ID: "chart",
facets: [{
id: "contactName",
title: "Observer Name"
}],
valueProperty: "observations", // the property in our data that is the numerical value to chart
valueTitle: "Number of Observations",
title: "Observations by Observer",
showDataPoints: true,
showDataValues: true,
showValueAxisLabel: true,
autoDraw:false
});
// create a layout with controls for the new chart
var layout = isc.VLayout.create({
height:400, width:"100%",
membersMargin: 20,
border: "1px dashed #000000",
members: [
chart,
isc.DynamicForm.create({
ID: "chartSelector",
autoDraw:false,
items: [{
name: "chartType",
title: "Chart Type",
type: "select",
valueMap: isc.FacetChart.allChartTypes,
defaultValue: "Column",
changed : function (form, item, value) {
chart.setChartType(value)
}
}]
})
]
});
</script>
</body>
</html>
- load page, observe chart bottom is above chart selector, y axis ticks at 0, 5,000, 10,000, 15,000, 20,000
- change chart to pie, observe chart bottom is above chart selector
- change chart back to column, observe chart bottom is pushed up and there is white space between chart selector and chart, y axis ticks at 0, 10,000, 20,000
The examples are not exhibiting this problem. I have observed it in both IE 9 and FF 18.0.2.
I watched the chart and layout components in the developer console, the height and positioning is NOT changing when this issue occurs. Seems like the chart inside the cnvas is being compressed vertically somehow.
Comment