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.
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>
Comment