Created
April 25, 2015 18:04
-
-
Save arunkrishnaa/f46ff0ebdebea1329dea to your computer and use it in GitHub Desktop.
UI5 CVOM HTML5 Charts - sap.viz.ui5 // source http://jsbin.com/yumixe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title>UI5 CVOM HTML5 Charts - sap.viz.ui5</title> | |
| <script id="sap-ui-bootstrap" type="text/javascript" | |
| src="https://sapui5.netweaver.ondemand.com/sdk/resources/sap-ui-core.js" | |
| data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.viz"></script> | |
| <script> | |
| try { | |
| sap.ui.getCore().loadLibrary("sap.ui.commons"); | |
| } catch (e) { | |
| alert("This test page requires the library 'sap.ui.commons' which is not available."); | |
| throw (e); | |
| } | |
| try { | |
| sap.ui.getCore().loadLibrary("sap.ui.table"); | |
| } catch (e) { | |
| alert("This test page requires the library 'sap.ui.table' which is not available."); | |
| throw (e); | |
| } | |
| try { | |
| sap.ui.getCore().loadLibrary("sap.ui.ux3"); | |
| } catch (e) { | |
| alert("This test page requires the library 'sap.ui.ux3' which is not available."); | |
| throw (e); | |
| } | |
| sap.ui.getCore().attachInitEvent( | |
| function() { | |
| // Create the ux3 Shell | |
| var oShell = new sap.ui.ux3.Shell("myShell", { | |
| appTitle : "UI5 (new) VIZ HTML5 Demo", // give a title | |
| worksetItems : [ // add some items to the top navigation | |
| new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home", | |
| key : "wi_home", | |
| text : "Home", | |
| subItems : [ // the "Home" workcenter also gets three sub-items | |
| new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_line", | |
| key : "wi_home_line", | |
| text : "Line" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_pie", | |
| key : "wi_home_pie", | |
| text : "Pie" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_donut", | |
| key : "wi_home_donut", | |
| text : "Donut" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_bar", | |
| key : "wi_home_bar", | |
| text : "Bar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_column", | |
| key : "wi_home_column", | |
| text : "Column" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_combination", | |
| key : "wi_home_combination", | |
| text : "Combination" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_bubble", | |
| key : "wi_home_bubble", | |
| text : "Bubble" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_scatter", | |
| key : "wi_home_scatter", | |
| text : "Scatter" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_timeBubble", | |
| key : "wi_home_timeBubble", | |
| text : "Time Bubble" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_stvbar", | |
| key : "wi_home_stvbar", | |
| text : "Stacked VBar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_pstvbar", | |
| key : "wi_home_pstvbar", | |
| text : "Stacked VBar(%)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_custstvbar", | |
| key : "wi_home_custstvbar", | |
| text : "Stacked VBar (customized)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualbar", | |
| key : "wi_home_dualbar", | |
| text : "Dual Bar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualline", | |
| key : "wi_home_dualline", | |
| text : "Dual line" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualcombination", | |
| key : "wi_home_dualcombination", | |
| text : "Dual Combination" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualvbar", | |
| key : "wi_home_dualvbar", | |
| text : "Dual VBar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualstvbar", | |
| key : "wi_home_dualstvbar", | |
| text : "Dual Stacked VBar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualpstvbar", | |
| key : "wi_home_dualpstvbar", | |
| text : "Dual Stacked VBar(%)" | |
| }),, new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_heatmap", | |
| key : "wi_home_heatmap", | |
| text : "Heatmap" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_treemap", | |
| key : "wi_home_treemap", | |
| text : "Treemap" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_area", | |
| key : "wi_home_area", | |
| text : "Area" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_horizontalarea", | |
| key : "wi_home_horizontalarea", | |
| text : "Horizontal Area" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_parea", | |
| key : "wi_home_parea", | |
| text : "Area(%)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_phorizontalarea", | |
| key : "wi_home_phorizontalarea", | |
| text : "Horizontal Area(%)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_bullet", | |
| key : "wi_home_bullet", | |
| text : "Bullet" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_table", | |
| key : "wi_home_table", | |
| text : "Table" | |
| }) ] | |
| }) ], | |
| paneBarItems : [ // add also one item to the right-side PaneBar | |
| new sap.ui.core.Item({ | |
| key : "pb_people", | |
| text : "People" | |
| }) ], | |
| logout : function() { // create a handler function and attach it to the "logout" event | |
| alert("User wants to log out..."); | |
| } | |
| }); | |
| // also set some content for the side pane | |
| oShell.setPaneContent(new sap.ui.commons.Button({ | |
| text : "This Button is in the Pane" | |
| })); | |
| var oBusinessData = [ { | |
| Country : "Canada", | |
| revenue : 410.87, | |
| profit : -141.25, | |
| population : 34789000 | |
| }, { | |
| Country : "China", | |
| revenue : 338.29, | |
| profit : 133.82, | |
| population : 1339724852 | |
| }, { | |
| Country : "France", | |
| revenue : 487.66, | |
| profit : 348.76, | |
| population : 65350000 | |
| }, { | |
| Country : "Germany", | |
| revenue : 470.23, | |
| profit : 217.29, | |
| population : 81799600 | |
| }, { | |
| Country : "India", | |
| revenue : 170.93, | |
| profit : 117.00, | |
| population : 1210193422 | |
| }, { | |
| Country : "United States", | |
| revenue : 905.08, | |
| profit : 609.16, | |
| population : 313490000 | |
| } ]; | |
| oModel = new sap.ui.model.json.JSONModel(); | |
| setTimeout(function() { | |
| oModel.setData({ | |
| businessData : oBusinessData | |
| }); | |
| }, 4000); | |
| var oModel2D = new sap.ui.model.json.JSONModel({ | |
| data : [ { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 10 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 32 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 23 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 43 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 123 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 34 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 14 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 25 | |
| }, { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 12 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 78 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 45 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 86 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 34 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 56 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 23 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 76 | |
| }, { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 12 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 78 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 45 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 86 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 34 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 56 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 23 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 76 | |
| }, { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 12 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 78 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 45 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 86 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 34 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 56 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 23 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 76 | |
| } ] | |
| }); | |
| var oMassData = []; | |
| /* | |
| for ( var c = 0; c < 1000; c++) { | |
| oMassData.push({ | |
| Country : "Country" + c, | |
| population : Math.random() * 10000000 + 1000000, | |
| profit : 200 * Math.random() | |
| }); | |
| }*/ | |
| oMassData = [{"Country":"Country0","population":7457419.374492019,"profit":22.18239577487111},{"Country":"Country1","population":7959302.194882184,"profit":170.08033329620957},{"Country":"Country2","population":8397022.538352758,"profit":172.55974342115223},{"Country":"Country3","population":6054224.121849984,"profit":119.13506332784891},{"Country":"Country4","population":3270642.062649131,"profit":13.007298111915588},{"Country":"Country5","population":10923479.615245014,"profit":31.828020606189966},{"Country":"Country6","population":10912832.980044186,"profit":8.07463307864964},{"Country":"Country7","population":6564101.517666131,"profit":141.55385419726372},{"Country":"Country8","population":1630879.8701502383,"profit":31.62126108072698},{"Country":"Country9","population":7327018.151059747,"profit":139.26228526979685},{"Country":"Country10","population":10664926.575496793,"profit":34.222837118431926},{"Country":"Country11","population":2637206.415180117,"profit":184.29979900829494},{"Country":"Country12","population":2196024.9789990485,"profit":154.42255339585245},{"Country":"Country13","population":10096910.49484536,"profit":193.5002056416124},{"Country":"Country14","population":2209039.4645929337,"profit":22.473119571805},{"Country":"Country15","population":4863845.632877201,"profit":17.842686688527465},{"Country":"Country16","population":1423126.1438690126,"profit":73.39713969267905},{"Country":"Country17","population":10178157.567512244,"profit":9.881851635873318},{"Country":"Country18","population":6995956.149417907,"profit":179.42100134678185},{"Country":"Country19","population":2926820.1664090157,"profit":52.377336006611586},{"Country":"Country20","population":5907440.319657326,"profit":173.56496714055538},{"Country":"Country21","population":8964087.466243654,"profit":103.591622505337},{"Country":"Country22","population":10794915.444217622,"profit":89.2091921530664},{"Country":"Country23","population":3534544.5470884442,"profit":144.07277083955705},{"Country":"Country24","population":10385899.62432161,"profit":125.44732978567481},{"Country":"Country25","population":2191239.6480329335,"profit":37.19438402913511},{"Country":"Country26","population":5321690.578944981,"profit":60.5033244471997},{"Country":"Country27","population":7471903.524361551,"profit":123.85044815018773},{"Country":"Country28","population":5221220.975741744,"profit":135.68013370968401},{"Country":"Country29","population":1806014.6123170853,"profit":103.70274935849011},{"Country":"Country30","population":10569779.322482646,"profit":22.26458555087447},{"Country":"Country31","population":9686388.328205794,"profit":23.949267389252782},{"Country":"Country32","population":7850223.341025412,"profit":154.52271969988942},{"Country":"Country33","population":9503300.461452454,"profit":157.04456232488155},{"Country":"Country34","population":10958012.686111033,"profit":191.18326716125011},{"Country":"Country35","population":4782235.637772828,"profit":49.50272124260664},{"Country":"Country36","population":2404446.945525706,"profit":77.57325419224799},{"Country":"Country37","population":1732400.6804265082,"profit":64.65568547137082},{"Country":"Country38","population":1264168.055728078,"profit":21.371577214449644},{"Country":"Country39","population":7108024.795539677,"profit":113.96036734804511},{"Country":"Country40","population":3318217.3329405487,"profit":70.75641811825335},{"Country":"Country41","population":4456507.00153783,"profit":153.3190114889294},{"Country":"Country42","population":5111400.8612930775,"profit":90.84119703620672},{"Country":"Country43","population":5051466.304808855,"profit":157.87765234708786},{"Country":"Country44","population":9511953.388806432,"profit":52.91701043024659},{"Country":"Country45","population":5444321.98535651,"profit":30.05285430699587},{"Country":"Country46","population":4538527.14644745,"profit":143.41606595553458},{"Country":"Country47","population":9103469.209745526,"profit":36.30750896409154},{"Country":"Country48","population":5871426.951140165,"profit":22.53862004727125},{"Country":"Country49","population":2105655.711144209,"profit":63.871920481324196},{"Country":"Country50","population":3155418.4146225452,"profit":81.26133605837822},{"Country":"Country51","population":3163804.031442851,"profit":55.57626695372164},{"Country":"Country52","population":10835676.741786301,"profit":165.01462841406465},{"Country":"Country53","population":7693652.267567813,"profit":137.37897323444486},{"Country":"Country54","population":7635638.845618814,"profit":41.477355966344476},{"Country":"Country55","population":6647429.637610912,"profit":26.31656783632934},{"Country":"Country56","population":5796840.860508382,"profit":67.13063232600689},{"Country":"Country57","population":2720499.135553837,"profit":68.9230174291879},{"Country":"Country58","population":4376352.33765468,"profit":192.64947064220905},{"Country":"Country59","population":4089795.8227433264,"profit":17.25783064030111},{"Country":"Country60","population":8653627.616818994,"profit":192.65038487501442},{"Country":"Country61","population":10403148.468118161,"profit":114.93289219215512},{"Country":"Country62","population":2290853.307582438,"profit":192.88779124617577},{"Country":"Country63","population":3779206.4007371664,"profit":66.31210050545633},{"Country":"Country64","population":3515909.660141915,"profit":92.55842664279044},{"Country":"Country65","population":10899820.36408037,"profit":85.00939644873142},{"Country":"Country66","population":7885923.927184194,"profit":67.15195467695594},{"Country":"Country67","population":5850340.23411572,"profit":140.4285383876413},{"Country":"Country68","population":3268628.051970154,"profit":66.11516200937331},{"Country":"Country69","population":3532525.130081922,"profit":73.28296769410372},{"Country":"Country70","population":2722276.4785401523,"profit":42.22669331356883},{"Country":"Country71","population":3274944.9987895787,"profit":139.03722232207656},{"Country":"Country72","population":9719916.83728993,"profit":152.64123198576272},{"Country":"Country73","population":7590031.960513443,"profit":55.7105119805783},{"Country":"Country74","population":10570119.08525601,"profit":78.58815276995301},{"Country":"Country75","population":6916278.928052634,"profit":47.5392600055784},{"Country":"Country76","population":10859042.819589376,"profit":25.0794748775661},{"Country":"Country77","population":1917044.8663644493,"profit":172.032477427274},{"Country":"Country78","population":6064348.827581853,"profit":55.23803178220987},{"Country":"Country79","population":7270971.500780433,"profit":112.88067335262895},{"Country":"Country80","population":7023762.687109411,"profit":143.37830590084195},{"Country":"Country81","population":2610948.9323571324,"profit":78.95949590019882},{"Country":"Country82","population":4165334.577206522,"profit":58.83568087592721},{"Country":"Country83","population":4074618.1425638497,"profit":45.29477651230991},{"Country":"Country84","population":2105514.101218432,"profit":75.04097451455891},{"Country":"Country85","population":6714428.094215691,"profit":158.2266241312027},{"Country":"Country86","population":5502196.563407779,"profit":22.14633715339005},{"Country":"Country87","population":10229167.788289487,"profit":165.26614730246365},{"Country":"Country88","population":1977880.4960660636,"profit":61.25644058920443},{"Country":"Country89","population":5690740.604419261,"profit":92.48663033358753},{"Country":"Country90","population":1103295.9716394544,"profit":155.48091460950673},{"Country":"Country91","population":3825813.856907189,"profit":3.556603891775012},{"Country":"Country92","population":1721514.3973007798,"profit":103.47590507008135},{"Country":"Country93","population":2125388.0569711328,"profit":52.21274485811591},{"Country":"Country94","population":9301550.94852671,"profit":77.19580195844173},{"Country":"Country95","population":3731691.8154247105,"profit":58.50409739650786},{"Country":"Country96","population":9794200.67416504,"profit":171.2829413358122},{"Country":"Country97","population":6080574.518069625,"profit":193.9704949501902},{"Country":"Country98","population":9780827.322043478,"profit":59.9241410382092},{"Country":"Country99","population":3132458.675187081,"profit":73.61219003796577},{"Country":"Country100","population":2104999.2218613625,"profit":171.40644644387066},{"Country":"Country101","population":6619536.9199849665,"profit":1.8182622268795967},{"Country":"Country102","population":2266119.657084346,"profit":155.33804381266236},{"Country":"Country103","population":7285438.337363303,"profit":24.510114267468452},{"Country":"Country104","population":8125506.266020238,"profit":154.32897442951798},{"Country":"Country105","population":8344620.630610734,"profit":129.3180180247873},{"Country":"Country106","population":4776153.55886519,"profit":71.36107375845313},{"Country":"Country107","population":7631448.022089899,"profit":173.18723774515092},{"Country":"Country108","population":6035762.791521847,"profit":88.12690102495253}]; | |
| oMassDataModel = new sap.ui.model.json.JSONModel({ | |
| businessData : oMassData | |
| }); | |
| // all charts and the table share the same model, so we set it to a common parent, the shell | |
| oShell.setModel(oModel); | |
| // Page content creation - for each workset the content is defined here | |
| // For demo purposes there is just one button on each page | |
| var mContent = {}; // a map to remember page content once it is created | |
| function getContent(key) { | |
| if (mContent[key]) | |
| return mContent[key]; // if content is already created, return it directly | |
| if (key == "wi_home_pie") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Revenue', | |
| value : { path : 'revenue', formatter : function($) { return 2*$; }} | |
| } ], | |
| data : { | |
| path : "/businessData", | |
| factory : function() { | |
| } | |
| } | |
| }); | |
| var pie = new sap.viz.ui5.Pie({ | |
| id:"pie", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| toolTip :{ | |
| preRender : function(tooltipDomNode){ | |
| //Called before render tooltip. | |
| tooltipDomNode.append('div').text('Append more information in default tooltip.').style({'font-weight': 'bold'}); | |
| }, | |
| postRender : function(tooltipDomNode){ | |
| //Called after tooltip is renderred. | |
| //tooltipDomNode.selectAll('.v-body-measure-value').style({'color': 'red'}); | |
| tooltipDomNode.selectAll('.v-body-measure-value').attr('style', 'color: red;'); | |
| } | |
| }, | |
| /* | |
| title : { | |
| visible : true, | |
| text : 'Revenue By Country' | |
| },*/ | |
| dataset : dataset | |
| }); | |
| // alternative way of setting configuration | |
| pie.getTitle().setVisible(true).setText("Revenue By Country"); | |
| mContent[key] = pie; | |
| } else if (key == "wi_home_donut") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var donut = new sap.viz.ui5.Donut({ | |
| id:"donut", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = donut; | |
| } else if (key == "wi_home_bar") { | |
| var panel = new sap.ui.commons.Panel({ | |
| text : "Additional Screen Content", | |
| content : [], | |
| collapsed : true | |
| }); | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var oCallout = new sap.ui.commons.Callout({ | |
| content : new sap.ui.commons.TextView({ | |
| text : "Hello Chart World!" | |
| }) | |
| }); | |
| var bar = new sap.viz.ui5.Bar({ | |
| id : "bar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| interaction : { | |
| selectability : { | |
| mode : 'single' | |
| }, | |
| decorations : [{ | |
| name : 'showDetail', | |
| fn : function(options){ | |
| var _rootNode = $("#myTooltip"); | |
| var _mode = options.mode; | |
| //update content | |
| _rootNode.find(".summary .number").text(options.selectedNumber); | |
| //_rootNode.find(".mode").text(options.mode); | |
| var dataNode = _rootNode.find(".data"); | |
| dataNode.find(".datum").remove(); | |
| if (options.data && options.data.length) { | |
| for (var i = -1; ++i < options.data.length; ) { | |
| var item = options.data[i]; | |
| var itemNode = $("<div class='datum'><span class='key'>" + item.name + "</span><span class='value'>" + item.value + "</span></div").appendTo(dataNode); | |
| if (item.type === 'measure') { | |
| itemNode.find('.value').css("text-decoration", "underline"); | |
| } | |
| } | |
| } | |
| //show it | |
| _rootNode.css({ | |
| "display": "block", | |
| "left": options.position.x + 4, | |
| "bottom": $(document).height() - options.position.y + 4 //let tooltip showing above mouse point | |
| }); | |
| } | |
| }, { | |
| name : 'hideDetail', | |
| fn : function(options){ | |
| var _rootNode = $("#myTooltip"); | |
| if(_rootNode){ | |
| _rootNode.css("display", "none"); | |
| } | |
| return true; | |
| } | |
| }] | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| noData : new sap.ui.commons.Button({ | |
| text : "No data!" | |
| }), | |
| dataset : dataset, | |
| tooltip : oCallout, // Note: this is the UI5 tooltip | |
| selectData : function(e) { | |
| // event data as provided by the VIZ library | |
| var aSelectData = e.getParameter("data"); | |
| // the FlattenedDataset used by this chart | |
| var oDataset = this.getDataset(); | |
| for(var i=0; i<aSelectData.length; i++) { | |
| var oDataPoint = aSelectData[i]; | |
| for(var j=0; j<oDataPoint.data.length; j++) { | |
| var oPath = oDataPoint.data[j].ctx.path; | |
| var oContext = oDataset.findContext(oPath); | |
| panel.setBindingContext(oContext); | |
| } | |
| } | |
| }, | |
| /* | |
| showTooltip and hideTooltip will be deprected. Please use interaction.decorations to override tooltip | |
| showTooltip : function(o) { | |
| oCallout.setProperty("offset", o.getParameter("data").point.x + " " | |
| + o.getParameter("data").point.y, true); | |
| oCallout.openPopup(bar); | |
| oCallout.adjustPosition(); | |
| jQuery.sap.log.info("showTooltip:" + o.getParameters()); | |
| }, | |
| hideTooltip : function(o) { | |
| oCallout.closePopup(); | |
| jQuery.sap.log.info("hideTooltip:" + o.getParameters()); | |
| } */ | |
| }); | |
| var change = 0; | |
| var button = new sap.ui.commons.Button({ | |
| text : "Modify Dataset", | |
| press : function() { | |
| change++; | |
| if ( change === 1 ) { | |
| dataset.addMeasure(new sap.viz.ui5.data.MeasureDefinition({ | |
| name : 'Populuation', | |
| value : '{population}' | |
| })); | |
| } else if ( change === 2 ) { | |
| dataset.getMeasures()[2].bindProperty('value', { | |
| path : 'population', | |
| formatter : function($) { | |
| return (Math.round($ / 1E4) / 100); | |
| } | |
| }); | |
| } else if ( change === 3 ) { | |
| dataset.removeMeasure(0).destroy(); | |
| } | |
| } | |
| }); | |
| var label1 = new sap.ui.commons.Label({ | |
| text: "Population", | |
| labelFor: "tfBarPopulation" | |
| }); | |
| var field1 = new sap.ui.commons.TextField({ | |
| id: "tfBarPopulation", | |
| value: "{population}" | |
| }); | |
| var label2 = new sap.ui.commons.Label({ | |
| text: "Profit", | |
| labelFor: "tfBarProfit" | |
| }); | |
| var field2 = new sap.ui.commons.TextField({ | |
| id: "tfBarProfit", | |
| value: "{profit}" | |
| }); | |
| var label3 = new sap.ui.commons.Label({ | |
| text: "Revenue", | |
| labelFor: "tfBarRevenue" | |
| }); | |
| var field3 = new sap.ui.commons.TextField({ | |
| id: "tfBarRevenue", | |
| value: "{revenue}" | |
| }); | |
| panel.addContent(label1); | |
| panel.addContent(field1); | |
| panel.addContent(label2); | |
| panel.addContent(field2); | |
| panel.addContent(label3); | |
| panel.addContent(field3); | |
| mContent[key] = [ panel, bar, button ]; | |
| } else if (key == "wi_home_line") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var line = new sap.viz.ui5.Line({ | |
| id : "line", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| xAxis : { | |
| title : { | |
| visible : true | |
| } | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = line; | |
| } else if (key == "wi_home_combination") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var combination = new sap.viz.ui5.Combination({ | |
| id: "combination", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| bar : { | |
| }, | |
| line : { | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = combination; | |
| } else if (key == "wi_home_column") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var column = new sap.viz.ui5.Column({ | |
| id : "column", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = column; | |
| } else if (key == "wi_home_bubble") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Population', | |
| value : '{population}' | |
| }, { | |
| group : 2, | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| group : 3, | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData", | |
| factory : function() { | |
| } | |
| } | |
| }); | |
| var bubble = new sap.viz.ui5.Bubble({ | |
| id : "bubble", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = bubble; | |
| } else if (key == "wi_home_bar") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var bar = new sap.viz.ui5.Bar({ | |
| id : "bar", | |
| width : "80%", | |
| height : "400px", | |
| bar : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = bar; | |
| } else if (key == "wi_home_scatter") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Population', | |
| value : '{population}' | |
| }, { | |
| group : 2, | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var scatter = new sap.viz.ui5.Scatter({ | |
| id : "scatter", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| animation: { | |
| dataLoading : false, | |
| dataUpdating : false, | |
| resizing : false | |
| } | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| legend: { | |
| isScrollable: true | |
| }, | |
| dataset : dataset | |
| }); | |
| scatter.setModel(oMassDataModel); | |
| mContent[key] = scatter; | |
| } else if(key == "wi_home_timeBubble"){ | |
| var values = [ | |
| { Country : "USA", Revenue : 100, Measure : 80 }, | |
| { Country : "Canada", Revenue : 110, Measure : 50 }, | |
| { Country : "South Africa", Revenue : 180, Measure : 20 }, | |
| { Country : "France", Revenue : 210, Measure : 110 }, | |
| { Country : "China", Revenue : 190, Measure : 150 }, | |
| { Country : "India", Revenue : 90, Measure : 50 }, | |
| { Country : "Japan", Revenue : 120, Measure : 120 }, | |
| { Country : "Spain", Revenue : 150, Measure : 200 } | |
| ]; | |
| var start = new Date(); | |
| start.setFullYear(2013); | |
| start.setMonth(0); | |
| start.setDate(1); | |
| start.setHours(22); | |
| start.setMinutes(51); | |
| start.setSeconds(10); | |
| var end = new Date(); | |
| end.setFullYear(2013); | |
| end.setMonth(10); | |
| end.setDate(20); | |
| end.setHours(16); | |
| end.setMinutes(39); | |
| end.setSeconds(31); | |
| var range = end.getTime() - start.getTime(); | |
| var timeArr = []; | |
| for (var i = 0; i < values.length; i++) { | |
| var t = parseInt(range * i * 0.1) + start.getTime(); | |
| values[i]['Time'] = t; | |
| } | |
| var oModel = new sap.ui.model.json.JSONModel({ | |
| data : values | |
| }); | |
| var oDataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ | |
| { axis : 1, name : "Country", value : "{Country}" } | |
| ], | |
| measures : [ | |
| { group : 2, name : "Revenue", value : "{Revenue}" }, | |
| { group : 3, name : "Measure", value : "{Measure}" }, | |
| { group : 1, name : "Time", value : "{Time}"} | |
| ], | |
| data : { | |
| path : "/data" | |
| } | |
| }); | |
| oDataset.setModel(oModel); | |
| var timeBubbleChart = new sap.viz.ui5.TimeBubble({ | |
| id : "timeBubble", | |
| width : "80%", | |
| height : "400px", | |
| dataset: oDataset | |
| }); | |
| mContent[key] = timeBubbleChart; | |
| } else if (key == "wi_home_stvbar" || key == "wi_home_custstvbar") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{country}" | |
| }, { | |
| axis : 1, | |
| name : 'Year', | |
| value : "{year}" | |
| }, { | |
| axis : 2, | |
| name : 'Product', | |
| value : "{product}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| } ], | |
| data : { | |
| path : "/data", | |
| factory : function() { | |
| } | |
| } | |
| }); | |
| var column; | |
| // for the customized vertical stack bar, we attach a listener to "createViz" and modify some options | |
| if (key == "wi_home_custstvbar") { | |
| column = new sap.viz.ui5.StackedColumn({ | |
| id: "custstvbar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| xAxis:{ | |
| title:{visible:true} , | |
| label:{hideSubLevels:true}, | |
| }, | |
| yAxis:{ | |
| title:{visible:true}, | |
| label:{visible:false}, | |
| }, | |
| dataset : dataset | |
| }); | |
| column.attachBeforeCreateViz(function(e) { | |
| var usrOptions = e.getParameter("usrOptions"); | |
| // make the vertical stacked bar a horizontal stacked bar | |
| usrOptions.type = "viz/stacked_bar"; | |
| // add a feeding definition to show MND | |
| usrOptions.feeding = [ { | |
| "feedId" : "axisLabels", | |
| "binding" : [ { | |
| "type" : "measureNamesDimension" | |
| }, { | |
| "type" : "analysisAxis", | |
| "index" : 1 | |
| } ] | |
| }, { | |
| "feedId" : "regionColor", | |
| "binding" : [ { | |
| "type" : "analysisAxis", | |
| "index" : 2 | |
| } ] | |
| }, { | |
| "feedId" : "primaryValues", | |
| "binding" : [ { | |
| "type" : "measureValuesGroup", | |
| "index" : 1 | |
| } ] | |
| } ]; | |
| }); | |
| }else{ | |
| column = new sap.viz.ui5.StackedColumn({ | |
| id: "stvbar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| xAxis:{ | |
| title:{visible:true} , | |
| label:{hideSubLevels:true}, | |
| }, | |
| yAxis:{ | |
| title:{visible:true}, | |
| label:{visible:false}, | |
| }, | |
| dataset : dataset | |
| }); | |
| } | |
| column.setModel(oModel2D); | |
| mContent[key] = column; | |
| } else if (key == "wi_home_pstvbar") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{country}" | |
| }, { | |
| axis : 1, | |
| name : 'Year', | |
| value : "{year}" | |
| }, { | |
| axis : 2, | |
| name : 'Product', | |
| value : "{product}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| } ], | |
| data : { | |
| path : "/data" | |
| } | |
| }); | |
| var vbar = new sap.viz.ui5.StackedColumn100({ | |
| id: "pstvbar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| dataset : dataset | |
| }); | |
| vbar.setModel(oModel2D); | |
| mContent[key] = vbar; | |
| }else if(key === 'wi_home_heatmap'){ | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Population', | |
| value : '{population}' | |
| }, { | |
| group : 2, | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var vbar = new sap.viz.ui5.Heatmap({ | |
| id: "heatmap", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| dataset : dataset | |
| }); | |
| vbar.setModel(oMassDataModel); | |
| mContent[key] = vbar; | |
| } else if(key === 'wi_home_treemap'){ | |
| var generateUI5data = function(){ | |
| var rs = [],item = {}; | |
| var iNum = 90; | |
| for(var i = 1; i<=iNum; i++){ | |
| item = { | |
| 'R1': "N + 10, N <= 90", | |
| 'R2': i*10 +"", | |
| 'Size': i*10, | |
| 'Color': i*10 | |
| }; | |
| rs.push(item); | |
| } | |
| for(var i = 1; i<=iNum; i++){ | |
| item = { | |
| 'R1' : "N ^ 1.1, N <= 90", | |
| 'R2' : Math.pow(1.1,i)+"", | |
| 'Size' : Math.pow(1.1,i), | |
| 'Color' : Math.pow(1.1,i) | |
| }; | |
| rs.push(item); | |
| } | |
| return rs; | |
| }; | |
| var treeDS = generateUI5data(); | |
| var treeModel = new sap.ui.model.json.JSONModel({ | |
| data: treeDS | |
| }); | |
| var treeDataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'R1', | |
| value : "{R1}" | |
| },{ | |
| axis : 1, | |
| name : 'R2', | |
| value : "{R2}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Size', | |
| value : '{Size}' | |
| },{ | |
| group : 2, | |
| name : 'Color', | |
| value : '{Color}' | |
| } ], | |
| data : { | |
| path : "/data" | |
| } | |
| }); | |
| var vbar = new sap.viz.ui5.Treemap({ | |
| id : "treemap", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| "endColor":"#3300c0", | |
| "startColor":"#a9f0ff" | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| dataset : treeDataset | |
| }); | |
| vbar.setModel(treeModel); | |
| mContent[key] = vbar; | |
| }else if(key === 'wi_home_dualbar' || key === 'wi_home_dualline' || key=== 'wi_home_dualvbar' | |
| || key === 'wi_home_dualcolumn' || key === 'wi_home_dualcombination' | |
| || key === 'wi_home_dualstvbar' || key === 'wi_home_dualpstvbar' | |
| || key === 'wi_home_area' || key === 'wi_home_parea' | |
| || key === 'wi_home_horizontalarea' || key === 'wi_home_phorizontalarea'){ | |
| var a1a2m1m2m3Model = { | |
| data:[ | |
| {Region: "Asia", Company: "FJ", Revenue: 10, Measure: 110, Population: 1200}, | |
| {Region: "Asia", Company: "KI", Revenue: 5, Measure: 180, Population: 1900}, | |
| {Region: "Asia", Company: "LA", Revenue: 17, Measure: 105, Population: 1680}, | |
| {Region: "Europe", Company: "FJ", Revenue: 2, Measure: 130, Population: 1003}, | |
| {Region: "Europe", Company: "KI", Revenue: 22, Measure: 80, Population: 1312}, | |
| {Region: "Europe", Company: "LA", Revenue: 24, Measure: 40, Population: 1453}, | |
| {Region: "Africa", Company: "FJ", Revenue: 37, Measure:88, Population: 1335}, | |
| {Region: "Africa", Company: "KI", Revenue: 15, Measure: 55, Population: 1859}, | |
| {Region: "Africa", Company: "LA", Revenue: 44, Measure:140, Population: 1879} | |
| ] | |
| }; | |
| var a1a2m1m2Data = { | |
| dimensions : [ | |
| {axis : 1, name: "Region", value: "{Region}"}, | |
| {axis : 2, name: "Company", value: "{Company}"}, | |
| ], | |
| measures : [ | |
| {group: 1, name : "Revenue", value : "{Revenue}"}, | |
| {group: 2, name : "Measure", value : "{Measure}"} | |
| ], | |
| data : { | |
| path : "/data" | |
| } | |
| }; | |
| var oDataset = new sap.viz.core.FlattenedDataset(a1a2m1m2Data); | |
| var oModel = new sap.ui.model.json.JSONModel(a1a2m1m2m3Model); | |
| oDataset.setModel(oModel); | |
| // var oProperties = { | |
| // width : "80%", | |
| // height : "400px", | |
| // title: { | |
| // visible : true, | |
| // text : 'Profit & Measure By Region & Company' | |
| // }, | |
| // dataset: oDataset | |
| // }; | |
| var oDualChart; | |
| switch(key){ | |
| case 'wi_home_dualbar': | |
| oDualChart = new sap.viz.ui5.DualBar( | |
| { | |
| id: "dualbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualline': | |
| oDualChart = new sap.viz.ui5.DualLine( | |
| { | |
| id: "dualline", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualcombination': | |
| oDualChart = new sap.viz.ui5.DualCombination( | |
| { | |
| id: "dualcombination", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualstvbar': | |
| oDualChart = new sap.viz.ui5.DualStackedColumn( | |
| { | |
| id: "dualstvbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualpstvbar': | |
| oDualChart = new sap.viz.ui5.DualStackedColumn100( | |
| { | |
| id: "dualpstvbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualvbar': | |
| oDualChart = new sap.viz.ui5.DualColumn( | |
| { | |
| id: "dualvbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_area': | |
| oDualChart = new sap.viz.ui5.Area( | |
| { | |
| id: "area", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_parea': | |
| oDualChart = new sap.viz.ui5.Area100( | |
| { | |
| id: "parea", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_horizontalarea': | |
| oDualChart = new sap.viz.ui5.HorizontalArea( | |
| { | |
| id: "horizontalarea", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_phorizontalarea': | |
| oDualChart = new sap.viz.ui5.HorizontalArea100( | |
| { | |
| id: "phorizontalarea", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| } | |
| mContent[key] = oDualChart; | |
| } else if(key == 'wi_home_bullet'){ | |
| var oModel = new sap.ui.model.json.JSONModel({ | |
| data:[ | |
| { Country : "Canada", profit: 10, forecast: 13, target: 10, refer1: 5, refer2: 8, refer3: 10}, | |
| { Country : "China",profit: 18, forecast: 25, target: 8, refer1: 3, refer2: 4, refer3: 5}, | |
| { Country : "France",profit: 13, forecast: 16, target: 15, refer1: 6, refer2: 8, refer3: 15}, | |
| { Country : "Germany",profit: 14, forecast: 20, target: 20, refer1: 6, refer2: 8, refer3: 15}, | |
| { Country : "India",profit: 8, forecast: 13, target: 16, refer1: 4, refer2: 8, refer3: 16}, | |
| { Country : "United States", profit: 20, forecast: 23, target: 22, refer1: 8, refer2: 12, refer3: 20} | |
| ] | |
| }); | |
| var oDataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ | |
| { axis : 1, name : 'Country', value : "{Country}"} | |
| ], | |
| measures : [ | |
| { group: 1, name : 'Profit', value : '{profit}' }, | |
| { group: 1, name: 'Forecast', value: '{forecast}' }, | |
| { group: 2, name: 'Target', value: '{target}' }, | |
| { group: 3, name: 'Refer1', value: '{refer1}'}, | |
| { group: 3, name: 'Refer2', value: '{refer2}'}, | |
| { group: 3, name: 'Refer3', value: '{refer3}'} | |
| ], | |
| data : { path : "/data" } | |
| }); | |
| var oBulletChart = new sap.viz.ui5.Bullet("bullet", { | |
| id: "bullet", | |
| width : "80%", | |
| height : "500px", | |
| css : '.v-m-yAxis2 .viz-axis-label.v-label{fill: #3778c7; font-size: 18px; font-weight : bold;}', | |
| dataset : oDataset | |
| }); | |
| oBulletChart.setModel(oModel); | |
| mContent[key] = oBulletChart; | |
| } else if (key == "wi_home_table") { | |
| var oTable = new sap.ui.table.Table({ | |
| columns : [ new sap.ui.table.Column({ | |
| label : "Country", | |
| template : new sap.ui.commons.TextView({ | |
| text : "{Country}" | |
| }), | |
| sortProperty : "Country", | |
| filterProperty : "Country", | |
| width : "200px" | |
| }), new sap.ui.table.Column({ | |
| label : "profit", | |
| template : new sap.ui.commons.TextView({ | |
| text : "{profit}" | |
| }), | |
| sortProperty : "profit", | |
| filterProperty : "profit", | |
| width : "200px" | |
| }), new sap.ui.table.Column({ | |
| label : "revenue", | |
| template : new sap.ui.commons.TextView({ | |
| text : "{revenue}" | |
| }), | |
| sortProperty : "revenue", | |
| filterProperty : "revenue", | |
| width : "200px" | |
| }) ], | |
| rows : "{/businessData}", | |
| visibleRowCount : 6 | |
| }); | |
| mContent[key] = oTable; | |
| } | |
| return mContent[key]; | |
| } | |
| // when the user selects a workset, put the respective content into the shell's main area | |
| oShell.attachWorksetItemSelected(function(oEvent) { | |
| var key = oEvent.getParameter("key"); | |
| oShell.setContent(getContent(key)); | |
| }); | |
| // set the initial content of the Shell - the line chart is selected initially | |
| oShell.addContent(getContent("wi_home_line")); | |
| // place the Shell into the <div> element defined below | |
| oShell.placeAt("shellArea"); | |
| }); | |
| </script> | |
| </head> | |
| <body class="sapUiBody"> | |
| <style> | |
| .sapUiUx3ShellContent{ | |
| /*overflow: visible;*/ | |
| } | |
| #myTooltip { | |
| position: absolute; | |
| display: none; | |
| border: #007dc0 solid 2px; | |
| background: #f2f2f2; | |
| padding: 8px; | |
| z-index: 1000; | |
| border-radius: 8px; | |
| color : #000000; | |
| } | |
| #myTooltip .summary { | |
| border-bottom: gray solid 1px; | |
| margin-bottom: 5px; | |
| padding-bottom: 5px; | |
| } | |
| #myTooltip .summary .number { | |
| font-weight: bold; | |
| } | |
| #myTooltip .summary .mode { | |
| font-style: italic; | |
| } | |
| #myTooltip .title { | |
| font-weight: bold; | |
| } | |
| #myTooltip .key { | |
| display: inline-block; | |
| font-weight: bold; | |
| width: 100px; | |
| } | |
| </style> | |
| <!-- This is where the Shell will live --> | |
| <div id="shellArea"></div> | |
| <div id="myTooltip"> | |
| <div style='font-weight:bold; color: #007dc0; padding-bottom: 5px;'>This is a override Tooltip.</div> | |
| <div class="summary"><span class="number"></span> Bars Selected.</div> | |
| <div class="data"> | |
| <div class="datum"> | |
| <span class="key">key</span>: <span class="value">value</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-html" type="text/html"> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title>UI5 CVOM HTML5 Charts - sap.viz.ui5</title> | |
| <script id="sap-ui-bootstrap" type="text/javascript" | |
| src="https://sapui5.netweaver.ondemand.com/sdk/resources/sap-ui-core.js" | |
| data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.viz"><\/script> | |
| <script> | |
| try { | |
| sap.ui.getCore().loadLibrary("sap.ui.commons"); | |
| } catch (e) { | |
| alert("This test page requires the library 'sap.ui.commons' which is not available."); | |
| throw (e); | |
| } | |
| try { | |
| sap.ui.getCore().loadLibrary("sap.ui.table"); | |
| } catch (e) { | |
| alert("This test page requires the library 'sap.ui.table' which is not available."); | |
| throw (e); | |
| } | |
| try { | |
| sap.ui.getCore().loadLibrary("sap.ui.ux3"); | |
| } catch (e) { | |
| alert("This test page requires the library 'sap.ui.ux3' which is not available."); | |
| throw (e); | |
| } | |
| sap.ui.getCore().attachInitEvent( | |
| function() { | |
| // Create the ux3 Shell | |
| var oShell = new sap.ui.ux3.Shell("myShell", { | |
| appTitle : "UI5 (new) VIZ HTML5 Demo", // give a title | |
| worksetItems : [ // add some items to the top navigation | |
| new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home", | |
| key : "wi_home", | |
| text : "Home", | |
| subItems : [ // the "Home" workcenter also gets three sub-items | |
| new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_line", | |
| key : "wi_home_line", | |
| text : "Line" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_pie", | |
| key : "wi_home_pie", | |
| text : "Pie" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_donut", | |
| key : "wi_home_donut", | |
| text : "Donut" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_bar", | |
| key : "wi_home_bar", | |
| text : "Bar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_column", | |
| key : "wi_home_column", | |
| text : "Column" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_combination", | |
| key : "wi_home_combination", | |
| text : "Combination" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_bubble", | |
| key : "wi_home_bubble", | |
| text : "Bubble" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_scatter", | |
| key : "wi_home_scatter", | |
| text : "Scatter" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_timeBubble", | |
| key : "wi_home_timeBubble", | |
| text : "Time Bubble" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_stvbar", | |
| key : "wi_home_stvbar", | |
| text : "Stacked VBar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_pstvbar", | |
| key : "wi_home_pstvbar", | |
| text : "Stacked VBar(%)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_custstvbar", | |
| key : "wi_home_custstvbar", | |
| text : "Stacked VBar (customized)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualbar", | |
| key : "wi_home_dualbar", | |
| text : "Dual Bar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualline", | |
| key : "wi_home_dualline", | |
| text : "Dual line" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualcombination", | |
| key : "wi_home_dualcombination", | |
| text : "Dual Combination" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualvbar", | |
| key : "wi_home_dualvbar", | |
| text : "Dual VBar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualstvbar", | |
| key : "wi_home_dualstvbar", | |
| text : "Dual Stacked VBar" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_dualpstvbar", | |
| key : "wi_home_dualpstvbar", | |
| text : "Dual Stacked VBar(%)" | |
| }),, new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_heatmap", | |
| key : "wi_home_heatmap", | |
| text : "Heatmap" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_treemap", | |
| key : "wi_home_treemap", | |
| text : "Treemap" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_area", | |
| key : "wi_home_area", | |
| text : "Area" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_horizontalarea", | |
| key : "wi_home_horizontalarea", | |
| text : "Horizontal Area" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_parea", | |
| key : "wi_home_parea", | |
| text : "Area(%)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_phorizontalarea", | |
| key : "wi_home_phorizontalarea", | |
| text : "Horizontal Area(%)" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_bullet", | |
| key : "wi_home_bullet", | |
| text : "Bullet" | |
| }), new sap.ui.ux3.NavigationItem({ | |
| id: "wi_home_table", | |
| key : "wi_home_table", | |
| text : "Table" | |
| }) ] | |
| }) ], | |
| paneBarItems : [ // add also one item to the right-side PaneBar | |
| new sap.ui.core.Item({ | |
| key : "pb_people", | |
| text : "People" | |
| }) ], | |
| logout : function() { // create a handler function and attach it to the "logout" event | |
| alert("User wants to log out..."); | |
| } | |
| }); | |
| // also set some content for the side pane | |
| oShell.setPaneContent(new sap.ui.commons.Button({ | |
| text : "This Button is in the Pane" | |
| })); | |
| var oBusinessData = [ { | |
| Country : "Canada", | |
| revenue : 410.87, | |
| profit : -141.25, | |
| population : 34789000 | |
| }, { | |
| Country : "China", | |
| revenue : 338.29, | |
| profit : 133.82, | |
| population : 1339724852 | |
| }, { | |
| Country : "France", | |
| revenue : 487.66, | |
| profit : 348.76, | |
| population : 65350000 | |
| }, { | |
| Country : "Germany", | |
| revenue : 470.23, | |
| profit : 217.29, | |
| population : 81799600 | |
| }, { | |
| Country : "India", | |
| revenue : 170.93, | |
| profit : 117.00, | |
| population : 1210193422 | |
| }, { | |
| Country : "United States", | |
| revenue : 905.08, | |
| profit : 609.16, | |
| population : 313490000 | |
| } ]; | |
| oModel = new sap.ui.model.json.JSONModel(); | |
| setTimeout(function() { | |
| oModel.setData({ | |
| businessData : oBusinessData | |
| }); | |
| }, 4000); | |
| var oModel2D = new sap.ui.model.json.JSONModel({ | |
| data : [ { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 10 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 32 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 23 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 43 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 123 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 34 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Car', | |
| profit : 14 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Car', | |
| profit : 25 | |
| }, { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 12 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 78 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 45 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 86 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 34 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 56 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Truck', | |
| profit : 23 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Truck', | |
| profit : 76 | |
| }, { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 12 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 78 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 45 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 86 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 34 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 56 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Motorcycle', | |
| profit : 23 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Motorcycle', | |
| profit : 76 | |
| }, { | |
| country : 'China', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 12 | |
| }, { | |
| country : 'China', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 78 | |
| }, { | |
| country : 'France', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 45 | |
| }, { | |
| country : 'France', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 86 | |
| }, { | |
| country : 'Germany', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 34 | |
| }, { | |
| country : 'Germany', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 56 | |
| }, { | |
| country : 'USA', | |
| year : '2001', | |
| product : 'Bicycle', | |
| profit : 23 | |
| }, { | |
| country : 'USA', | |
| year : '2002', | |
| product : 'Bicycle', | |
| profit : 76 | |
| } ] | |
| }); | |
| var oMassData = []; | |
| /* | |
| for ( var c = 0; c < 1000; c++) { | |
| oMassData.push({ | |
| Country : "Country" + c, | |
| population : Math.random() * 10000000 + 1000000, | |
| profit : 200 * Math.random() | |
| }); | |
| }*/ | |
| oMassData = [{"Country":"Country0","population":7457419.374492019,"profit":22.18239577487111},{"Country":"Country1","population":7959302.194882184,"profit":170.08033329620957},{"Country":"Country2","population":8397022.538352758,"profit":172.55974342115223},{"Country":"Country3","population":6054224.121849984,"profit":119.13506332784891},{"Country":"Country4","population":3270642.062649131,"profit":13.007298111915588},{"Country":"Country5","population":10923479.615245014,"profit":31.828020606189966},{"Country":"Country6","population":10912832.980044186,"profit":8.07463307864964},{"Country":"Country7","population":6564101.517666131,"profit":141.55385419726372},{"Country":"Country8","population":1630879.8701502383,"profit":31.62126108072698},{"Country":"Country9","population":7327018.151059747,"profit":139.26228526979685},{"Country":"Country10","population":10664926.575496793,"profit":34.222837118431926},{"Country":"Country11","population":2637206.415180117,"profit":184.29979900829494},{"Country":"Country12","population":2196024.9789990485,"profit":154.42255339585245},{"Country":"Country13","population":10096910.49484536,"profit":193.5002056416124},{"Country":"Country14","population":2209039.4645929337,"profit":22.473119571805},{"Country":"Country15","population":4863845.632877201,"profit":17.842686688527465},{"Country":"Country16","population":1423126.1438690126,"profit":73.39713969267905},{"Country":"Country17","population":10178157.567512244,"profit":9.881851635873318},{"Country":"Country18","population":6995956.149417907,"profit":179.42100134678185},{"Country":"Country19","population":2926820.1664090157,"profit":52.377336006611586},{"Country":"Country20","population":5907440.319657326,"profit":173.56496714055538},{"Country":"Country21","population":8964087.466243654,"profit":103.591622505337},{"Country":"Country22","population":10794915.444217622,"profit":89.2091921530664},{"Country":"Country23","population":3534544.5470884442,"profit":144.07277083955705},{"Country":"Country24","population":10385899.62432161,"profit":125.44732978567481},{"Country":"Country25","population":2191239.6480329335,"profit":37.19438402913511},{"Country":"Country26","population":5321690.578944981,"profit":60.5033244471997},{"Country":"Country27","population":7471903.524361551,"profit":123.85044815018773},{"Country":"Country28","population":5221220.975741744,"profit":135.68013370968401},{"Country":"Country29","population":1806014.6123170853,"profit":103.70274935849011},{"Country":"Country30","population":10569779.322482646,"profit":22.26458555087447},{"Country":"Country31","population":9686388.328205794,"profit":23.949267389252782},{"Country":"Country32","population":7850223.341025412,"profit":154.52271969988942},{"Country":"Country33","population":9503300.461452454,"profit":157.04456232488155},{"Country":"Country34","population":10958012.686111033,"profit":191.18326716125011},{"Country":"Country35","population":4782235.637772828,"profit":49.50272124260664},{"Country":"Country36","population":2404446.945525706,"profit":77.57325419224799},{"Country":"Country37","population":1732400.6804265082,"profit":64.65568547137082},{"Country":"Country38","population":1264168.055728078,"profit":21.371577214449644},{"Country":"Country39","population":7108024.795539677,"profit":113.96036734804511},{"Country":"Country40","population":3318217.3329405487,"profit":70.75641811825335},{"Country":"Country41","population":4456507.00153783,"profit":153.3190114889294},{"Country":"Country42","population":5111400.8612930775,"profit":90.84119703620672},{"Country":"Country43","population":5051466.304808855,"profit":157.87765234708786},{"Country":"Country44","population":9511953.388806432,"profit":52.91701043024659},{"Country":"Country45","population":5444321.98535651,"profit":30.05285430699587},{"Country":"Country46","population":4538527.14644745,"profit":143.41606595553458},{"Country":"Country47","population":9103469.209745526,"profit":36.30750896409154},{"Country":"Country48","population":5871426.951140165,"profit":22.53862004727125},{"Country":"Country49","population":2105655.711144209,"profit":63.871920481324196},{"Country":"Country50","population":3155418.4146225452,"profit":81.26133605837822},{"Country":"Country51","population":3163804.031442851,"profit":55.57626695372164},{"Country":"Country52","population":10835676.741786301,"profit":165.01462841406465},{"Country":"Country53","population":7693652.267567813,"profit":137.37897323444486},{"Country":"Country54","population":7635638.845618814,"profit":41.477355966344476},{"Country":"Country55","population":6647429.637610912,"profit":26.31656783632934},{"Country":"Country56","population":5796840.860508382,"profit":67.13063232600689},{"Country":"Country57","population":2720499.135553837,"profit":68.9230174291879},{"Country":"Country58","population":4376352.33765468,"profit":192.64947064220905},{"Country":"Country59","population":4089795.8227433264,"profit":17.25783064030111},{"Country":"Country60","population":8653627.616818994,"profit":192.65038487501442},{"Country":"Country61","population":10403148.468118161,"profit":114.93289219215512},{"Country":"Country62","population":2290853.307582438,"profit":192.88779124617577},{"Country":"Country63","population":3779206.4007371664,"profit":66.31210050545633},{"Country":"Country64","population":3515909.660141915,"profit":92.55842664279044},{"Country":"Country65","population":10899820.36408037,"profit":85.00939644873142},{"Country":"Country66","population":7885923.927184194,"profit":67.15195467695594},{"Country":"Country67","population":5850340.23411572,"profit":140.4285383876413},{"Country":"Country68","population":3268628.051970154,"profit":66.11516200937331},{"Country":"Country69","population":3532525.130081922,"profit":73.28296769410372},{"Country":"Country70","population":2722276.4785401523,"profit":42.22669331356883},{"Country":"Country71","population":3274944.9987895787,"profit":139.03722232207656},{"Country":"Country72","population":9719916.83728993,"profit":152.64123198576272},{"Country":"Country73","population":7590031.960513443,"profit":55.7105119805783},{"Country":"Country74","population":10570119.08525601,"profit":78.58815276995301},{"Country":"Country75","population":6916278.928052634,"profit":47.5392600055784},{"Country":"Country76","population":10859042.819589376,"profit":25.0794748775661},{"Country":"Country77","population":1917044.8663644493,"profit":172.032477427274},{"Country":"Country78","population":6064348.827581853,"profit":55.23803178220987},{"Country":"Country79","population":7270971.500780433,"profit":112.88067335262895},{"Country":"Country80","population":7023762.687109411,"profit":143.37830590084195},{"Country":"Country81","population":2610948.9323571324,"profit":78.95949590019882},{"Country":"Country82","population":4165334.577206522,"profit":58.83568087592721},{"Country":"Country83","population":4074618.1425638497,"profit":45.29477651230991},{"Country":"Country84","population":2105514.101218432,"profit":75.04097451455891},{"Country":"Country85","population":6714428.094215691,"profit":158.2266241312027},{"Country":"Country86","population":5502196.563407779,"profit":22.14633715339005},{"Country":"Country87","population":10229167.788289487,"profit":165.26614730246365},{"Country":"Country88","population":1977880.4960660636,"profit":61.25644058920443},{"Country":"Country89","population":5690740.604419261,"profit":92.48663033358753},{"Country":"Country90","population":1103295.9716394544,"profit":155.48091460950673},{"Country":"Country91","population":3825813.856907189,"profit":3.556603891775012},{"Country":"Country92","population":1721514.3973007798,"profit":103.47590507008135},{"Country":"Country93","population":2125388.0569711328,"profit":52.21274485811591},{"Country":"Country94","population":9301550.94852671,"profit":77.19580195844173},{"Country":"Country95","population":3731691.8154247105,"profit":58.50409739650786},{"Country":"Country96","population":9794200.67416504,"profit":171.2829413358122},{"Country":"Country97","population":6080574.518069625,"profit":193.9704949501902},{"Country":"Country98","population":9780827.322043478,"profit":59.9241410382092},{"Country":"Country99","population":3132458.675187081,"profit":73.61219003796577},{"Country":"Country100","population":2104999.2218613625,"profit":171.40644644387066},{"Country":"Country101","population":6619536.9199849665,"profit":1.8182622268795967},{"Country":"Country102","population":2266119.657084346,"profit":155.33804381266236},{"Country":"Country103","population":7285438.337363303,"profit":24.510114267468452},{"Country":"Country104","population":8125506.266020238,"profit":154.32897442951798},{"Country":"Country105","population":8344620.630610734,"profit":129.3180180247873},{"Country":"Country106","population":4776153.55886519,"profit":71.36107375845313},{"Country":"Country107","population":7631448.022089899,"profit":173.18723774515092},{"Country":"Country108","population":6035762.791521847,"profit":88.12690102495253}]; | |
| oMassDataModel = new sap.ui.model.json.JSONModel({ | |
| businessData : oMassData | |
| }); | |
| // all charts and the table share the same model, so we set it to a common parent, the shell | |
| oShell.setModel(oModel); | |
| // Page content creation - for each workset the content is defined here | |
| // For demo purposes there is just one button on each page | |
| var mContent = {}; // a map to remember page content once it is created | |
| function getContent(key) { | |
| if (mContent[key]) | |
| return mContent[key]; // if content is already created, return it directly | |
| if (key == "wi_home_pie") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Revenue', | |
| value : { path : 'revenue', formatter : function($) { return 2*$; }} | |
| } ], | |
| data : { | |
| path : "/businessData", | |
| factory : function() { | |
| } | |
| } | |
| }); | |
| var pie = new sap.viz.ui5.Pie({ | |
| id:"pie", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| toolTip :{ | |
| preRender : function(tooltipDomNode){ | |
| //Called before render tooltip. | |
| tooltipDomNode.append('div').text('Append more information in default tooltip.').style({'font-weight': 'bold'}); | |
| }, | |
| postRender : function(tooltipDomNode){ | |
| //Called after tooltip is renderred. | |
| //tooltipDomNode.selectAll('.v-body-measure-value').style({'color': 'red'}); | |
| tooltipDomNode.selectAll('.v-body-measure-value').attr('style', 'color: red;'); | |
| } | |
| }, | |
| /* | |
| title : { | |
| visible : true, | |
| text : 'Revenue By Country' | |
| },*/ | |
| dataset : dataset | |
| }); | |
| // alternative way of setting configuration | |
| pie.getTitle().setVisible(true).setText("Revenue By Country"); | |
| mContent[key] = pie; | |
| } else if (key == "wi_home_donut") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var donut = new sap.viz.ui5.Donut({ | |
| id:"donut", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = donut; | |
| } else if (key == "wi_home_bar") { | |
| var panel = new sap.ui.commons.Panel({ | |
| text : "Additional Screen Content", | |
| content : [], | |
| collapsed : true | |
| }); | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var oCallout = new sap.ui.commons.Callout({ | |
| content : new sap.ui.commons.TextView({ | |
| text : "Hello Chart World!" | |
| }) | |
| }); | |
| var bar = new sap.viz.ui5.Bar({ | |
| id : "bar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| interaction : { | |
| selectability : { | |
| mode : 'single' | |
| }, | |
| decorations : [{ | |
| name : 'showDetail', | |
| fn : function(options){ | |
| var _rootNode = $("#myTooltip"); | |
| var _mode = options.mode; | |
| //update content | |
| _rootNode.find(".summary .number").text(options.selectedNumber); | |
| //_rootNode.find(".mode").text(options.mode); | |
| var dataNode = _rootNode.find(".data"); | |
| dataNode.find(".datum").remove(); | |
| if (options.data && options.data.length) { | |
| for (var i = -1; ++i < options.data.length; ) { | |
| var item = options.data[i]; | |
| var itemNode = $("<div class='datum'><span class='key'>" + item.name + "</span><span class='value'>" + item.value + "</span></div").appendTo(dataNode); | |
| if (item.type === 'measure') { | |
| itemNode.find('.value').css("text-decoration", "underline"); | |
| } | |
| } | |
| } | |
| //show it | |
| _rootNode.css({ | |
| "display": "block", | |
| "left": options.position.x + 4, | |
| "bottom": $(document).height() - options.position.y + 4 //let tooltip showing above mouse point | |
| }); | |
| } | |
| }, { | |
| name : 'hideDetail', | |
| fn : function(options){ | |
| var _rootNode = $("#myTooltip"); | |
| if(_rootNode){ | |
| _rootNode.css("display", "none"); | |
| } | |
| return true; | |
| } | |
| }] | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| noData : new sap.ui.commons.Button({ | |
| text : "No data!" | |
| }), | |
| dataset : dataset, | |
| tooltip : oCallout, // Note: this is the UI5 tooltip | |
| selectData : function(e) { | |
| // event data as provided by the VIZ library | |
| var aSelectData = e.getParameter("data"); | |
| // the FlattenedDataset used by this chart | |
| var oDataset = this.getDataset(); | |
| for(var i=0; i<aSelectData.length; i++) { | |
| var oDataPoint = aSelectData[i]; | |
| for(var j=0; j<oDataPoint.data.length; j++) { | |
| var oPath = oDataPoint.data[j].ctx.path; | |
| var oContext = oDataset.findContext(oPath); | |
| panel.setBindingContext(oContext); | |
| } | |
| } | |
| }, | |
| /* | |
| showTooltip and hideTooltip will be deprected. Please use interaction.decorations to override tooltip | |
| showTooltip : function(o) { | |
| oCallout.setProperty("offset", o.getParameter("data").point.x + " " | |
| + o.getParameter("data").point.y, true); | |
| oCallout.openPopup(bar); | |
| oCallout.adjustPosition(); | |
| jQuery.sap.log.info("showTooltip:" + o.getParameters()); | |
| }, | |
| hideTooltip : function(o) { | |
| oCallout.closePopup(); | |
| jQuery.sap.log.info("hideTooltip:" + o.getParameters()); | |
| } */ | |
| }); | |
| var change = 0; | |
| var button = new sap.ui.commons.Button({ | |
| text : "Modify Dataset", | |
| press : function() { | |
| change++; | |
| if ( change === 1 ) { | |
| dataset.addMeasure(new sap.viz.ui5.data.MeasureDefinition({ | |
| name : 'Populuation', | |
| value : '{population}' | |
| })); | |
| } else if ( change === 2 ) { | |
| dataset.getMeasures()[2].bindProperty('value', { | |
| path : 'population', | |
| formatter : function($) { | |
| return (Math.round($ / 1E4) / 100); | |
| } | |
| }); | |
| } else if ( change === 3 ) { | |
| dataset.removeMeasure(0).destroy(); | |
| } | |
| } | |
| }); | |
| var label1 = new sap.ui.commons.Label({ | |
| text: "Population", | |
| labelFor: "tfBarPopulation" | |
| }); | |
| var field1 = new sap.ui.commons.TextField({ | |
| id: "tfBarPopulation", | |
| value: "{population}" | |
| }); | |
| var label2 = new sap.ui.commons.Label({ | |
| text: "Profit", | |
| labelFor: "tfBarProfit" | |
| }); | |
| var field2 = new sap.ui.commons.TextField({ | |
| id: "tfBarProfit", | |
| value: "{profit}" | |
| }); | |
| var label3 = new sap.ui.commons.Label({ | |
| text: "Revenue", | |
| labelFor: "tfBarRevenue" | |
| }); | |
| var field3 = new sap.ui.commons.TextField({ | |
| id: "tfBarRevenue", | |
| value: "{revenue}" | |
| }); | |
| panel.addContent(label1); | |
| panel.addContent(field1); | |
| panel.addContent(label2); | |
| panel.addContent(field2); | |
| panel.addContent(label3); | |
| panel.addContent(field3); | |
| mContent[key] = [ panel, bar, button ]; | |
| } else if (key == "wi_home_line") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var line = new sap.viz.ui5.Line({ | |
| id : "line", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| xAxis : { | |
| title : { | |
| visible : true | |
| } | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = line; | |
| } else if (key == "wi_home_combination") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var combination = new sap.viz.ui5.Combination({ | |
| id: "combination", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| bar : { | |
| }, | |
| line : { | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = combination; | |
| } else if (key == "wi_home_column") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var column = new sap.viz.ui5.Column({ | |
| id : "column", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = column; | |
| } else if (key == "wi_home_bubble") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Population', | |
| value : '{population}' | |
| }, { | |
| group : 2, | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| group : 3, | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData", | |
| factory : function() { | |
| } | |
| } | |
| }); | |
| var bubble = new sap.viz.ui5.Bubble({ | |
| id : "bubble", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = bubble; | |
| } else if (key == "wi_home_bar") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, { | |
| name : 'Revenue', | |
| value : '{revenue}' | |
| } ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var bar = new sap.viz.ui5.Bar({ | |
| id : "bar", | |
| width : "80%", | |
| height : "400px", | |
| bar : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit and Revenue By Country' | |
| }, | |
| dataset : dataset | |
| }); | |
| mContent[key] = bar; | |
| } else if (key == "wi_home_scatter") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Population', | |
| value : '{population}' | |
| }, { | |
| group : 2, | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var scatter = new sap.viz.ui5.Scatter({ | |
| id : "scatter", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| animation: { | |
| dataLoading : false, | |
| dataUpdating : false, | |
| resizing : false | |
| } | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| legend: { | |
| isScrollable: true | |
| }, | |
| dataset : dataset | |
| }); | |
| scatter.setModel(oMassDataModel); | |
| mContent[key] = scatter; | |
| } else if(key == "wi_home_timeBubble"){ | |
| var values = [ | |
| { Country : "USA", Revenue : 100, Measure : 80 }, | |
| { Country : "Canada", Revenue : 110, Measure : 50 }, | |
| { Country : "South Africa", Revenue : 180, Measure : 20 }, | |
| { Country : "France", Revenue : 210, Measure : 110 }, | |
| { Country : "China", Revenue : 190, Measure : 150 }, | |
| { Country : "India", Revenue : 90, Measure : 50 }, | |
| { Country : "Japan", Revenue : 120, Measure : 120 }, | |
| { Country : "Spain", Revenue : 150, Measure : 200 } | |
| ]; | |
| var start = new Date(); | |
| start.setFullYear(2013); | |
| start.setMonth(0); | |
| start.setDate(1); | |
| start.setHours(22); | |
| start.setMinutes(51); | |
| start.setSeconds(10); | |
| var end = new Date(); | |
| end.setFullYear(2013); | |
| end.setMonth(10); | |
| end.setDate(20); | |
| end.setHours(16); | |
| end.setMinutes(39); | |
| end.setSeconds(31); | |
| var range = end.getTime() - start.getTime(); | |
| var timeArr = []; | |
| for (var i = 0; i < values.length; i++) { | |
| var t = parseInt(range * i * 0.1) + start.getTime(); | |
| values[i]['Time'] = t; | |
| } | |
| var oModel = new sap.ui.model.json.JSONModel({ | |
| data : values | |
| }); | |
| var oDataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ | |
| { axis : 1, name : "Country", value : "{Country}" } | |
| ], | |
| measures : [ | |
| { group : 2, name : "Revenue", value : "{Revenue}" }, | |
| { group : 3, name : "Measure", value : "{Measure}" }, | |
| { group : 1, name : "Time", value : "{Time}"} | |
| ], | |
| data : { | |
| path : "/data" | |
| } | |
| }); | |
| oDataset.setModel(oModel); | |
| var timeBubbleChart = new sap.viz.ui5.TimeBubble({ | |
| id : "timeBubble", | |
| width : "80%", | |
| height : "400px", | |
| dataset: oDataset | |
| }); | |
| mContent[key] = timeBubbleChart; | |
| } else if (key == "wi_home_stvbar" || key == "wi_home_custstvbar") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{country}" | |
| }, { | |
| axis : 1, | |
| name : 'Year', | |
| value : "{year}" | |
| }, { | |
| axis : 2, | |
| name : 'Product', | |
| value : "{product}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| } ], | |
| data : { | |
| path : "/data", | |
| factory : function() { | |
| } | |
| } | |
| }); | |
| var column; | |
| // for the customized vertical stack bar, we attach a listener to "createViz" and modify some options | |
| if (key == "wi_home_custstvbar") { | |
| column = new sap.viz.ui5.StackedColumn({ | |
| id: "custstvbar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| xAxis:{ | |
| title:{visible:true} , | |
| label:{hideSubLevels:true}, | |
| }, | |
| yAxis:{ | |
| title:{visible:true}, | |
| label:{visible:false}, | |
| }, | |
| dataset : dataset | |
| }); | |
| column.attachBeforeCreateViz(function(e) { | |
| var usrOptions = e.getParameter("usrOptions"); | |
| // make the vertical stacked bar a horizontal stacked bar | |
| usrOptions.type = "viz/stacked_bar"; | |
| // add a feeding definition to show MND | |
| usrOptions.feeding = [ { | |
| "feedId" : "axisLabels", | |
| "binding" : [ { | |
| "type" : "measureNamesDimension" | |
| }, { | |
| "type" : "analysisAxis", | |
| "index" : 1 | |
| } ] | |
| }, { | |
| "feedId" : "regionColor", | |
| "binding" : [ { | |
| "type" : "analysisAxis", | |
| "index" : 2 | |
| } ] | |
| }, { | |
| "feedId" : "primaryValues", | |
| "binding" : [ { | |
| "type" : "measureValuesGroup", | |
| "index" : 1 | |
| } ] | |
| } ]; | |
| }); | |
| }else{ | |
| column = new sap.viz.ui5.StackedColumn({ | |
| id: "stvbar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| xAxis:{ | |
| title:{visible:true} , | |
| label:{hideSubLevels:true}, | |
| }, | |
| yAxis:{ | |
| title:{visible:true}, | |
| label:{visible:false}, | |
| }, | |
| dataset : dataset | |
| }); | |
| } | |
| column.setModel(oModel2D); | |
| mContent[key] = column; | |
| } else if (key == "wi_home_pstvbar") { | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{country}" | |
| }, { | |
| axis : 1, | |
| name : 'Year', | |
| value : "{year}" | |
| }, { | |
| axis : 2, | |
| name : 'Product', | |
| value : "{product}" | |
| } ], | |
| measures : [ { | |
| name : 'Profit', | |
| value : '{profit}' | |
| } ], | |
| data : { | |
| path : "/data" | |
| } | |
| }); | |
| var vbar = new sap.viz.ui5.StackedColumn100({ | |
| id: "pstvbar", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| dataset : dataset | |
| }); | |
| vbar.setModel(oModel2D); | |
| mContent[key] = vbar; | |
| }else if(key === 'wi_home_heatmap'){ | |
| var dataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'Country', | |
| value : "{Country}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Population', | |
| value : '{population}' | |
| }, { | |
| group : 2, | |
| name : 'Profit', | |
| value : '{profit}' | |
| }, ], | |
| data : { | |
| path : "/businessData" | |
| } | |
| }); | |
| var vbar = new sap.viz.ui5.Heatmap({ | |
| id: "heatmap", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| //'colorPalette' : d3.scale.category20().range() | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| dataset : dataset | |
| }); | |
| vbar.setModel(oMassDataModel); | |
| mContent[key] = vbar; | |
| } else if(key === 'wi_home_treemap'){ | |
| var generateUI5data = function(){ | |
| var rs = [],item = {}; | |
| var iNum = 90; | |
| for(var i = 1; i<=iNum; i++){ | |
| item = { | |
| 'R1': "N + 10, N <= 90", | |
| 'R2': i*10 +"", | |
| 'Size': i*10, | |
| 'Color': i*10 | |
| }; | |
| rs.push(item); | |
| } | |
| for(var i = 1; i<=iNum; i++){ | |
| item = { | |
| 'R1' : "N ^ 1.1, N <= 90", | |
| 'R2' : Math.pow(1.1,i)+"", | |
| 'Size' : Math.pow(1.1,i), | |
| 'Color' : Math.pow(1.1,i) | |
| }; | |
| rs.push(item); | |
| } | |
| return rs; | |
| }; | |
| var treeDS = generateUI5data(); | |
| var treeModel = new sap.ui.model.json.JSONModel({ | |
| data: treeDS | |
| }); | |
| var treeDataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ { | |
| axis : 1, | |
| name : 'R1', | |
| value : "{R1}" | |
| },{ | |
| axis : 1, | |
| name : 'R2', | |
| value : "{R2}" | |
| } ], | |
| measures : [ { | |
| group : 1, | |
| name : 'Size', | |
| value : '{Size}' | |
| },{ | |
| group : 2, | |
| name : 'Color', | |
| value : '{Color}' | |
| } ], | |
| data : { | |
| path : "/data" | |
| } | |
| }); | |
| var vbar = new sap.viz.ui5.Treemap({ | |
| id : "treemap", | |
| width : "80%", | |
| height : "400px", | |
| plotArea : { | |
| "endColor":"#3300c0", | |
| "startColor":"#a9f0ff" | |
| }, | |
| title : { | |
| visible : true, | |
| text : 'Profit By Country & Population' | |
| }, | |
| dataset : treeDataset | |
| }); | |
| vbar.setModel(treeModel); | |
| mContent[key] = vbar; | |
| }else if(key === 'wi_home_dualbar' || key === 'wi_home_dualline' || key=== 'wi_home_dualvbar' | |
| || key === 'wi_home_dualcolumn' || key === 'wi_home_dualcombination' | |
| || key === 'wi_home_dualstvbar' || key === 'wi_home_dualpstvbar' | |
| || key === 'wi_home_area' || key === 'wi_home_parea' | |
| || key === 'wi_home_horizontalarea' || key === 'wi_home_phorizontalarea'){ | |
| var a1a2m1m2m3Model = { | |
| data:[ | |
| {Region: "Asia", Company: "FJ", Revenue: 10, Measure: 110, Population: 1200}, | |
| {Region: "Asia", Company: "KI", Revenue: 5, Measure: 180, Population: 1900}, | |
| {Region: "Asia", Company: "LA", Revenue: 17, Measure: 105, Population: 1680}, | |
| {Region: "Europe", Company: "FJ", Revenue: 2, Measure: 130, Population: 1003}, | |
| {Region: "Europe", Company: "KI", Revenue: 22, Measure: 80, Population: 1312}, | |
| {Region: "Europe", Company: "LA", Revenue: 24, Measure: 40, Population: 1453}, | |
| {Region: "Africa", Company: "FJ", Revenue: 37, Measure:88, Population: 1335}, | |
| {Region: "Africa", Company: "KI", Revenue: 15, Measure: 55, Population: 1859}, | |
| {Region: "Africa", Company: "LA", Revenue: 44, Measure:140, Population: 1879} | |
| ] | |
| }; | |
| var a1a2m1m2Data = { | |
| dimensions : [ | |
| {axis : 1, name: "Region", value: "{Region}"}, | |
| {axis : 2, name: "Company", value: "{Company}"}, | |
| ], | |
| measures : [ | |
| {group: 1, name : "Revenue", value : "{Revenue}"}, | |
| {group: 2, name : "Measure", value : "{Measure}"} | |
| ], | |
| data : { | |
| path : "/data" | |
| } | |
| }; | |
| var oDataset = new sap.viz.core.FlattenedDataset(a1a2m1m2Data); | |
| var oModel = new sap.ui.model.json.JSONModel(a1a2m1m2m3Model); | |
| oDataset.setModel(oModel); | |
| // var oProperties = { | |
| // width : "80%", | |
| // height : "400px", | |
| // title: { | |
| // visible : true, | |
| // text : 'Profit & Measure By Region & Company' | |
| // }, | |
| // dataset: oDataset | |
| // }; | |
| var oDualChart; | |
| switch(key){ | |
| case 'wi_home_dualbar': | |
| oDualChart = new sap.viz.ui5.DualBar( | |
| { | |
| id: "dualbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualline': | |
| oDualChart = new sap.viz.ui5.DualLine( | |
| { | |
| id: "dualline", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualcombination': | |
| oDualChart = new sap.viz.ui5.DualCombination( | |
| { | |
| id: "dualcombination", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualstvbar': | |
| oDualChart = new sap.viz.ui5.DualStackedColumn( | |
| { | |
| id: "dualstvbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualpstvbar': | |
| oDualChart = new sap.viz.ui5.DualStackedColumn100( | |
| { | |
| id: "dualpstvbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_dualvbar': | |
| oDualChart = new sap.viz.ui5.DualColumn( | |
| { | |
| id: "dualvbar", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_area': | |
| oDualChart = new sap.viz.ui5.Area( | |
| { | |
| id: "area", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_parea': | |
| oDualChart = new sap.viz.ui5.Area100( | |
| { | |
| id: "parea", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_horizontalarea': | |
| oDualChart = new sap.viz.ui5.HorizontalArea( | |
| { | |
| id: "horizontalarea", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| case 'wi_home_phorizontalarea': | |
| oDualChart = new sap.viz.ui5.HorizontalArea100( | |
| { | |
| id: "phorizontalarea", | |
| width : "80%", | |
| height : "400px", | |
| title: { | |
| visible : true, | |
| text : 'Profit & Measure By Region & Company' | |
| }, | |
| dataset: oDataset | |
| } | |
| ); | |
| break; | |
| } | |
| mContent[key] = oDualChart; | |
| } else if(key == 'wi_home_bullet'){ | |
| var oModel = new sap.ui.model.json.JSONModel({ | |
| data:[ | |
| { Country : "Canada", profit: 10, forecast: 13, target: 10, refer1: 5, refer2: 8, refer3: 10}, | |
| { Country : "China",profit: 18, forecast: 25, target: 8, refer1: 3, refer2: 4, refer3: 5}, | |
| { Country : "France",profit: 13, forecast: 16, target: 15, refer1: 6, refer2: 8, refer3: 15}, | |
| { Country : "Germany",profit: 14, forecast: 20, target: 20, refer1: 6, refer2: 8, refer3: 15}, | |
| { Country : "India",profit: 8, forecast: 13, target: 16, refer1: 4, refer2: 8, refer3: 16}, | |
| { Country : "United States", profit: 20, forecast: 23, target: 22, refer1: 8, refer2: 12, refer3: 20} | |
| ] | |
| }); | |
| var oDataset = new sap.viz.ui5.data.FlattenedDataset({ | |
| dimensions : [ | |
| { axis : 1, name : 'Country', value : "{Country}"} | |
| ], | |
| measures : [ | |
| { group: 1, name : 'Profit', value : '{profit}' }, | |
| { group: 1, name: 'Forecast', value: '{forecast}' }, | |
| { group: 2, name: 'Target', value: '{target}' }, | |
| { group: 3, name: 'Refer1', value: '{refer1}'}, | |
| { group: 3, name: 'Refer2', value: '{refer2}'}, | |
| { group: 3, name: 'Refer3', value: '{refer3}'} | |
| ], | |
| data : { path : "/data" } | |
| }); | |
| var oBulletChart = new sap.viz.ui5.Bullet("bullet", { | |
| id: "bullet", | |
| width : "80%", | |
| height : "500px", | |
| css : '.v-m-yAxis2 .viz-axis-label.v-label{fill: #3778c7; font-size: 18px; font-weight : bold;}', | |
| dataset : oDataset | |
| }); | |
| oBulletChart.setModel(oModel); | |
| mContent[key] = oBulletChart; | |
| } else if (key == "wi_home_table") { | |
| var oTable = new sap.ui.table.Table({ | |
| columns : [ new sap.ui.table.Column({ | |
| label : "Country", | |
| template : new sap.ui.commons.TextView({ | |
| text : "{Country}" | |
| }), | |
| sortProperty : "Country", | |
| filterProperty : "Country", | |
| width : "200px" | |
| }), new sap.ui.table.Column({ | |
| label : "profit", | |
| template : new sap.ui.commons.TextView({ | |
| text : "{profit}" | |
| }), | |
| sortProperty : "profit", | |
| filterProperty : "profit", | |
| width : "200px" | |
| }), new sap.ui.table.Column({ | |
| label : "revenue", | |
| template : new sap.ui.commons.TextView({ | |
| text : "{revenue}" | |
| }), | |
| sortProperty : "revenue", | |
| filterProperty : "revenue", | |
| width : "200px" | |
| }) ], | |
| rows : "{/businessData}", | |
| visibleRowCount : 6 | |
| }); | |
| mContent[key] = oTable; | |
| } | |
| return mContent[key]; | |
| } | |
| // when the user selects a workset, put the respective content into the shell's main area | |
| oShell.attachWorksetItemSelected(function(oEvent) { | |
| var key = oEvent.getParameter("key"); | |
| oShell.setContent(getContent(key)); | |
| }); | |
| // set the initial content of the Shell - the line chart is selected initially | |
| oShell.addContent(getContent("wi_home_line")); | |
| // place the Shell into the <div> element defined below | |
| oShell.placeAt("shellArea"); | |
| }); | |
| <\/script> | |
| </head> | |
| <body class="sapUiBody"> | |
| <style> | |
| .sapUiUx3ShellContent{ | |
| /*overflow: visible;*/ | |
| } | |
| #myTooltip { | |
| position: absolute; | |
| display: none; | |
| border: #007dc0 solid 2px; | |
| background: #f2f2f2; | |
| padding: 8px; | |
| z-index: 1000; | |
| border-radius: 8px; | |
| color : #000000; | |
| } | |
| #myTooltip .summary { | |
| border-bottom: gray solid 1px; | |
| margin-bottom: 5px; | |
| padding-bottom: 5px; | |
| } | |
| #myTooltip .summary .number { | |
| font-weight: bold; | |
| } | |
| #myTooltip .summary .mode { | |
| font-style: italic; | |
| } | |
| #myTooltip .title { | |
| font-weight: bold; | |
| } | |
| #myTooltip .key { | |
| display: inline-block; | |
| font-weight: bold; | |
| width: 100px; | |
| } | |
| </style> | |
| <\!-- This is where the Shell will live --> | |
| <div id="shellArea"></div> | |
| <div id="myTooltip"> | |
| <div style='font-weight:bold; color: #007dc0; padding-bottom: 5px;'>This is a override Tooltip.</div> | |
| <div class="summary"><span class="number"></span> Bars Selected.</div> | |
| <div class="data"> | |
| <div class="datum"> | |
| <span class="key">key</span>: <span class="value">value</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment