SNAPSHOT_v9.0d_2013-03-18/EVAL Deployment
I have an issue with area and line charts. The test case is below. It seems that the area and lines chart get messed up somehow, even though other charts display correctly with the same data. In the example, the area chart (left) displays the first series (12345), but the remaining series are not displayed and the titles seems to get mangled in the upper left hand corner. The bar chart (middle) displays correctly with all series. The line chart (right) has the same issues as the area chart.
You can change the type of the area and line charts to to other types, but they still do not display correctly. For instance, change area chart to column. Note that only one series is displayed, and the mangled text still appears in the upper left corner.. I can change the middle chart to area and line charts and they displays correctly. They both use the same exact code, just different types initially.
This behavior is observed in IE 7, IE8, IE9 and FF. However, all IE versions seem to cut off the y-axis title, but this may be an issue with padding.
Test case:
I have an issue with area and line charts. The test case is below. It seems that the area and lines chart get messed up somehow, even though other charts display correctly with the same data. In the example, the area chart (left) displays the first series (12345), but the remaining series are not displayed and the titles seems to get mangled in the upper left hand corner. The bar chart (middle) displays correctly with all series. The line chart (right) has the same issues as the area chart.
You can change the type of the area and line charts to to other types, but they still do not display correctly. For instance, change area chart to column. Note that only one series is displayed, and the mangled text still appears in the upper left corner.. I can change the middle chart to area and line charts and they displays correctly. They both use the same exact code, just different types initially.
This behavior is observed in IE 7, IE8, IE9 and FF. However, all IE versions seem to cut off the y-axis title, but this may be an issue with padding.
Test case:
Code:
<!DOCTYPE html>
<html>
<head>
<title >Chart Test Case</title>
<script type="text/javascript" >
var isomorphicDir="http://localhost:8080/isomorphic_3_18/";
var data = [
{inspectorID:12345, inspections:206,observations:913,lastInspectionDate:"2012-08-31",index:52.6, inspectionType: {id:123, name:"type1"}},
{inspectorID:67890, inspections:66,observations:0,lastInspectionDate:"2013-02-02",index:75.3, inspectionType: {id:123, name:"type1"}},
{inspectorID:88776, inspections:66,observations:67,lastInspectionDate:"2013-02-02",index:75.3, inspectionType: {id:123, name:"type1"}},
{inspectorID:44556, inspections:206,observations:0,lastInspectionDate:"2012-08-31",index:52.6, inspectionType: {id:123, name:"type1"}}
];
</script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_Core.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_Foundation.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_Containers.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_Forms.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_DataBinding.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_Drawing.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_PluginBridges.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_Charts.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/system/development/ISC_Tools.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic_3_18/skins/EnterpriseBlue/load_skin.js"></script>
<script type="text/javascript">
function createChart(c) {
// create a new chart
var _chart =
isc.FacetChart.create({
height:400,
align:"center",
facets: [{
id: "inspectorID", // the key used for this facet in the data above
title: "Inspector ID"
}],
valueProperty: "observations", // the property in our data that is the numerical value to chart
valueTitle: "# Observations",
chartType: c,
title: "Test Chart",
showDataPoints: true,
showDataValues: true,
showValueAxisLabel: true,
autoDraw: false
});
if(data)
_chart.setData(data);
var _layout = isc.VLayout.create({
layoutMargin: 0,
membersMargin: 0,
defaultLayoutAlign:"center",
border: "1px dashed #000000",
autoDraw: false,
members: [
_chart,
isc.DynamicForm.create({
numCols:2,
width:"*",
items: [{
name: "chartType",
title: "Chart Type",
type: "select",
valueMap: isc.FacetChart.allChartTypes,
defaultValue: c,
changed : function (form, item, value) {
_chart.setChartType(value);
}
},
{
title: "Remove",
type: "button",
colSpan: 2,
align: "center",
click: function() { _chart.destroy(); _layout.destroy(); }
}]
})
]
});
// add this new chart to the parent
//if(parentContainer.type == "custom")
layout.addMember(_layout);
}
</script>
</head>
<body>
<script>
layout = isc.HLayout.create({
width:"100%",
layoutMargin: 0,
membersMargin: 0,
defaultLayoutAlign:"center",
border: "1px dashed #000000"
});
createChart("Area");
createChart("Column");
createChart("Line");
</script>
</body>
</html>
Comment