Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

Chart is misaligned when resizing isc.Window

$
0
0
SmartClient_v90p_2014-01-09_PowerEdition

IE8

This happens in IE8 only. In our application, we create any number of charts in an isc.Window. These charts are dynamically added when a user performs some action, but for the sake of this test case I simplified it as much as possible.

- Open the test case in IE8 (note using newer version of IE and setting the developer toolbar to IE8 will not yield the same result, I find the dev toolbar in IE to be useless).
- Note the the chart points are aligned with the x-axis values
- Resize the isc window horizontally a few times (not the browser window)
- Observe that the chart data points get misaligned with the x-axis, the numeric values are displayed erratically, etc.

I know IE8 is sort of a sticking point for compatibility, but its still the most used browser in our customer base.

Code:

<!DOCTYPE html>

<html>
<head>
    <title >SNTQ-1785</title>
       
          <script type="text/javascript" >
                var isomorphicDir="http://localhost:8080/isomorphic/";

                var data = [
                { time:"2013-01-01", value:6 },
                { time:"2013-01-02", value:3 },
                { time:"2013-01-03", value:5 },
                { time:"2013-01-04", value:0 },
                { time:"2013-01-05", value:2.5 },
                { time:"2013-01-06", value:0 },
                { time:"2013-01-07", value:0 },
                { time:"2013-01-08", value:4 },
                { time:"2013-01-09", value:4 },
                { time:"2013-01-10", value:1 },
                { time:"2013-01-11", value:3.5 },
                { time:"2013-01-12", value:4 },
                { time:"2013-01-13", value:4 },
                { time:"2013-01-14", value:1 },
                { time:"2013-01-15", value:3.5 }
        ];
       
        </script>
       
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Core.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Foundation.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Containers.js"></script>
          <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Grids.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Forms.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_DataBinding.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Drawing.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_PluginBridges.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Charts.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/development/ISC_Tools.js"></script>
        <script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>

</head>
<body>

        <script>
                               
                var c = isc.FacetChart.create({
                        align:"center",
                        chartType: "Line",
                        dataMargin: 25,
                        facets: [
                          {
                                        id: "time"
                                }
                        ],
                        data: data,
                        valueProperty: "value",
                        border: "1px solid black",
                        showDataPoints: true,
                        showDataValues: true,
                        showValueAxisLabel: true,
                        autoDraw:false
                });
               
                var l = isc.VLayout.create({
                        layoutAlign : "center",
                        padding : 10,
                        members : c,
                        autoDraw: false
                });
                                               
                var w = isc.Window.create({
                        width : 500,
                        height : 600,
                        title : "Trending Charts",
                        canDragReposition : true,
                        canDragResize : true,
                        padding : 10,
                        autoCenter : true,
                        autoDraw : false,
                        align : "center",
                        items : [ l ]
                });

                w.show();
               
        </script>

</body>
</html>


Viewing all articles
Browse latest Browse all 4756

Trending Articles