Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    How to position FacetChart vertical axis label

    SmartClient_v101p_2016-03-07_PowerEdition
    Browser: Mozilla Netscape 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

    How do I get the vertical axis label to be centered on the entire chart canvas, so its doesn't cut off?

    Test Case
    =================
    1. Load test case
    2. Observe that the vertical axis label is cut off, but there is room below to position it.


    Code:
    <!DOCTYPE html>
    
    <html>
        <head>
    
            <title></title>
            
            <style>
                .diagInfo {
                    font-size: 14px;
                    font-weight: bold;
                    padding: 5px;
                }
            </style>
            
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Core.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Foundation.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Containers.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Grids.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Forms.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_DataBinding.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Drawing.js"></script>
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_PluginBridges.js"></script> 
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Charts.js"></script>    
            <script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>
         
            <script type="text/javascript" >
                var isomorphicDir="http://localhost:8080/isomorphic/";
                
                // set this to the correct JIRA ticket
                var JIRA_TICKET = "SNTQ-1190";
                
                // test data
                var data = [
                    {inspectorID:12345, region:"Northeast region which includes Pittsburgh", inspections:206, observations:913,lastInspectionDate:new Date(2012, 8, 13), index:52.6 },
                    {inspectorID:67890, region:"West", inspections:66, observations:2,lastInspectionDate:new Date(2013, 2,2), index:75.3 },
                    {inspectorID:54321, region:"Northeast 2", inspections:4, observations:67,lastInspectionDate:new Date(2013,2,3), index:75.3 },
                    {inspectorID:09876, region:"South which includes AK", inspections:24, observations:0,lastInspectionDate:new Date(2012,8,31), index:52.6 },
                    {inspectorID:54321, region:"Northeast 3", inspections:4, observations:67,lastInspectionDate:new Date(2013,2,3), index:75.3 },
                    {inspectorID:09876, region:"South which includes GA", inspections:24, observations:0,lastInspectionDate:new Date(2012,8,31), index:52.6 },
                    {inspectorID:54321, region:"Northeast", inspections:4, observations:67,lastInspectionDate:new Date(2013,2,3), index:75.3 },
                    {inspectorID:09876, region:"South which includes FL", inspections:24, observations:0,lastInspectionDate:new Date(2012,8,31), index:52.6 }
                ];
                // datasource for the grid        
                isc.DataSource.create({
                    ID: "ds",
                    fields: [
                        {name:"inspectorID", title:"Inspector ID", type:"integer", showIf:"false" }, // hidden
                        {name:"inspections", type:"integer", title:"Number of Inspections Total"},
                        {name:"observations", title:"# Observations"},
                        {name:"region", type:"text", title:"Region/Country"},
                        {name:"lastInspectionDate", type:"date", title:"Last Inspection"}
                    ],
                    cacheData:data,
                    clientOnly: true
                });
                
                // once page loads set some diagnostic information, DO NOT CHANGE
                isc.Page.setEvent("load", function() {
                    document.title = JIRA_TICKET + "   (SmartClient version " + isc.versionNumber + ")";
                    var html = [];
                    html.push("Jira: " + JIRA_TICKET);
                    html.push("SmartClient: " + isc.versionNumber);
                    html.push("Browser: " + navigator.appCodeName + " " + navigator.appName + " " + navigator.appVersion);
                    diagLabel.setContents( html.join("<br>"));
                });
                
    
            </script>
    
        <!--mstheme--><link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="../../_themes/Lichen/Lich1011-65001.css"><meta name="Microsoft Theme" content="Lichen 1011, default">
    </head>
        
        <body>
            <script>
            
                // ===== DO NOT REMOVE =====
                var diagLabel = isc.Label.create({
                            ID: "diagInfo",
                            width: "100%",
                            styleName: "diagInfo",
                            autoFit: true
                        });
                // ===== DO NOT REMOVE =====
                            
                // basic grid        
                var grid = isc.ListGrid.create({
                    dataSource: ds,
                    dataFetchMode : "local",
                    autoFetchData: true,
                    clientOnly: true,
                    position: "relative",
                    width : "100%",
                    align : "center",
                    autoFitData : "vertical",
                    autoFitMaxHeight : 400,
                    alternateRecordStyles : true,
                    canAddFormulaFields : true,
                    canAddSummaryFields : true,
                    canGroupBy : true,
                    canReorderFields : true,
                    showGroupSummary : true,
                    groupByMaxRecords : 5,
                    useAdvancedFieldPicker: true,
                    advancedFieldPickerThreshold: 5,
                    autoDraw: false
                });    
                
                var chart = isc.FacetChart.create({
                    align:"center",
                    autoDraw: false,
                    dataMargin: 25,
                    facets: [{
                        id: "region",  
                        title: "Region"  
                    }],
                    width: 500,
                    height: 300,
                    valueProperty: "inspections", 
                    valueTitle: "Number of Inspections",
                    chartType: "Area",
                    title: "Number of Inspections by Inspector",
                    showDataPoints: true,
                    showDataValues: true,
                    showValueAxisLabel: true,
                    data: data
                });
                    
                // the main page layout - place all other components afetr diagLabel
                var layout = isc.VLayout.create({
                    width:"100%",
                    membersMargin: 20,
                    members: [
                        // ===== DO NOT REMOVE diagLabel
                        diagLabel,
                        // ===== place anty components here
                        grid,
                        chart
                    ]
                });
                    
            </script>
    
        </body>
    
    </html>

    #2
    What's the common name and version for the browser who's User Agent string you posted? Windows Safari?

    Are you seeing this issue in any other browser or just this one?

    Comment


      #3
      Chrome and IE11. I have not tested in any other browser.

      Comment


        #4
        We've reproduced the problem and are considering possible solutions.

        Comment


          #5
          The idea is that the label is centered vertically against the axis extent rather the entire chart, since it's an axis label, but we've made a change so that the position is adjusted to avoid clipping.

          This has been applied to SC 10.0p and newer, and will be in the nightly builds dated 2016-03-12 and newer.

          Comment

          Working...
          X