{"id":12346,"date":"2013-07-31T13:31:50","date_gmt":"2013-07-31T12:31:50","guid":{"rendered":"http:\/\/timoelliott.com\/blog\/?p=5602"},"modified":"2013-07-31T13:31:50","modified_gmt":"2013-07-31T12:31:50","slug":"how-to-use-and-adapt-sap-lumira-visualization-extensions","status":"publish","type":"post","link":"https:\/\/timoelliott.com\/blog\/2013\/07\/how-to-use-and-adapt-sap-lumira-visualization-extensions.html","title":{"rendered":"How To Use And Adapt SAP Lumira Visualization Extensions"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"sap lumira visualization extensions banner\" alt=\"sap lumira visualization extensions banner\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/sap-lumira-visualization-extensions-banner.jpg?resize=690%2C310&#038;ssl=1\" width=\"690\" height=\"310\" border=\"0\" \/><\/p>\n<p>The latest version of <a href=\"http:\/\/www.saphana.com\/community\/learn\/solutions\/sap-lumira\/sap-lumira-desktop\" target=\"_blank\">SAP Lumira<\/a>, SAP\u2019s newish desktop-and-cloud Data Exploration software supports <a href=\"http:\/\/scn.sap.com\/community\/lumira\/blog\/2013\/06\/05\/sap-lumira-10-sp11-new-features-at-a-glance-part-2\" target=\"_blank\">HTML5 visualization extensions<\/a>. This post is to give you a flavor of what I\u2019ve found out about them so far (I\u2019m using version SP11).<\/p>\n<p>Since <a href=\"http:\/\/store.businessobjects.com\/store\/bobjamer\/en_US\/Content\/pbPage.sap-lumira?resid=Ufj4hAoHArEAADCBHTEAAAAI&amp;rests=1375271044355\" target=\"_blank\">the personal edition of SAP Lumira is now free<\/a>, don\u2019t hesitate to download it, install it, and follow along.<\/p>\n<h3>Installing SAP Lumira Visualization Extensions<\/h3>\n<p>First, enable the extension samples by copying them to the right folder \u2013 follow the video or the steps below. You will need Administrator rights.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/eyL9KoO1cw0\" height=\"360\" width=\"640\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>1. Go to the folder C:\\Program Files\\SAP Lumira\\Desktop\\samples (or equivalent), and copy the folder \u201cchartExtensions\u201d<\/p>\n<p>2. Go to the folder C:\\Program Files\\SAP Lumira\\Desktop\\ and paste the folder you just copied.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"chartExtensions-folder\" alt=\"chartExtensions-folder\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/chartExtensions-folder.png?resize=629%2C435&#038;ssl=1\" width=\"629\" height=\"435\" border=\"0\" \/><\/p>\n<p>A new \u201cE\u201d icon will be available in <a href=\"http:\/\/www.saphana.com\/community\/learn\/solutions\/sap-lumira\/sap-lumira-desktop\" target=\"_blank\">SAP Lumira<\/a> next time it is launched:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"visualization_extensions_icon_bar\" alt=\"visualization_extensions_icon_bar\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/visualization_extensions_icon_bar.png?resize=482%2C39&#038;ssl=1\" width=\"482\" height=\"39\" border=\"0\" \/><\/p>\n<h3>Testing The Extensions<\/h3>\n<p><strong>FlagBar Extension.\u00a0<\/strong>First, let\u2019s take a look at the Flagbar Extension.<\/p>\n<p>Create a new document using data from the provided sample file:<\/p>\n<p>C:\\Program Files\\SAP Lumira\\Desktop\\chartExtensions\\viz.ext.flagbar\\data\\sampledata_flagbar.xls<\/p>\n<p>Use the \u201cEnrich All\u201d button to create measures.\u00a0 Click on the \u201cVisualize\u201d Tab, then click on the arrow by the \u201cE\u201d and choose \u201cFlagbar Sample\u201d<\/p>\n<p>Drag the dimensions and measures \u201cCountry\u201d, \u201cMedal Type\u201d, and \u201cAthens (2004)\u201d as shown:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/flabbar-example.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"flabbar-example\" alt=\"flabbar-example\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/flabbar-example_thumb.png?resize=640%2C480&#038;ssl=1\" width=\"640\" height=\"480\" border=\"0\" \/><\/a><\/p>\n<p>If you switch \u201cMedal Type\u201d and \u201cCountry\u201d you\u2019ll get this:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/flagbar_visual_extension_2.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"flagbar_visual_extension_2\" alt=\"flagbar_visual_extension_2\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/flagbar_visual_extension_2_thumb.png?resize=640%2C480&#038;ssl=1\" width=\"640\" height=\"480\" border=\"0\" \/><\/a><\/p>\n<p>You can also change the Primary Values to \u201cBeijing (2008)\u201d \u2013 but that\u2019s about it. It\u2019s graphical, but not very flexible.<\/p>\n<p><strong>Sample Bar Chart Extension.\u00a0<\/strong>The Sample Bar Chart Extension is more flexible, and a more useful basis for experimentation.<\/p>\n<p>For some reason, a spreadsheet is not provided for the samplesbar sample. Here\u2019s the file I\u2019ll be using for the rest of this example: <a href=\"https:\/\/timoelliott.com\/blog\/docs\/sampledata_samplesbar.xlsx\" target=\"_blank\">download sample excel file<\/a> (note, figures completely made up).<\/p>\n<p>As before, create a new document, Enrich All, and go to the Visualize tab. This time, choose the \u201cSample Bar Chart\u201d option, and drag the elements as shown below.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/samplebar.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"samplebar\" alt=\"samplebar\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/samplebar_thumb.png?resize=640%2C480&#038;ssl=1\" width=\"640\" height=\"480\" border=\"0\" \/><\/a><\/p>\n<p>This samples works with any set of two-dimensional data. Save the visualization, and save the document, and close Lumira to start adapting these samples.<\/p>\n<h3>Adapting The Sample Bar Visualization Version 1<\/h3>\n<p>Let\u2019s do something more interesting, and change the underlying code. The Visualization Extensions use the powerful, open source <a href=\"http:\/\/d3js.org\/\" target=\"_blank\">d3.js<\/a> code, and there\u2019s lots of <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Tutorials\" target=\"_blank\">tutorials<\/a> available on the web on how to use it.<\/p>\n<p>Unfortunately, debugging extensions are currently a little tricky. If you have access to the underlying SAP visualization libraries, you can do your coding and testing directly in a web browser, but without them, you have to launch Lumira each time, and it\u2019s hard to know what the problem is. I trust this is something that will become easier in the future.<\/p>\n<p>And before we start, yes, I know this these examples exhibit appallingly bad visualization practice. If you have a problem with that, I say \u201c<a href=\"https:\/\/timoelliott.com\/blog\/2013\/04\/data-visualization-bling-it-on.html\" target=\"_blank\">Bling it On<\/a>!\u201d (note, I published that post on April Fool\u2019s Day).<\/p>\n<p>The core code for the samplebar is in the file \u201cviz.ext.samples.bar.viversion.js\u201d located in the folder C:\\Program Files\\SAP Lumira\\Desktop\\chartExtensions\\viz.ext.samplesbar\\libs.<\/p>\n<p>Open it up in an editor like Notepad++ (with Administrator rights, or you won\u2019t be able to save it) and paste the code below on line 130, after the section \u201cbars\u201d.<\/p>\n<p><span style=\"font-family: 'Courier New'; font-size: small;\">\/\/Add overlay image to each bar<br \/>\ngroups.selectAll(&#8216;image&#8217;)<br \/>\n.data(function(d, i) {return d})<br \/>\n.enter()<br \/>\n.append(&#8216;image&#8217;)<br \/>\n.attr(&#8216;xlink:xlink:href&#8217;, function(d, i) {return imagePath + dates[i] + &#8216;.png&#8217;;}) \/\/&#8217;dates&#8217; has the image values<br \/>\n.attr(&#8216;preserveAspectRatio&#8217;, &#8216;none&#8217;)<br \/>\n.attr(&#8216;width&#8217;, x2.rangeBand() + 1)<br \/>\n.attr(&#8216;height&#8217;, h)<br \/>\n.attr(&#8216;x&#8217;, function(d, i) {return x2.rangeBand() * i-1;})<br \/>\n.attr(&#8216;y&#8217;, 0)<br \/>\n\/\/mouseovers copied from bars above<br \/>\n.on(&#8216;mouseover&#8217;, function(d, i) {<br \/>\ntip.showAt(this.parentNode, dates[i],\u00a0 d3.format(&#8216;,.2f&#8217;)(d), {x:x2.rangeBand() * i + (x2.rangeBand() &#8211; 1)\/2 , y:y(d)});<br \/>\n})<br \/>\n.on(&#8216;mouseout&#8217;, function(d, i) {<br \/>\ntip.hide();<br \/>\n})<br \/>\n;<\/span><\/p>\n<p>Alternatively, you can download and install the <a href=\"https:\/\/timoelliott.com\/blog\/docs\/viz.ext.samples.bar.viversion_sample_1.zip\" target=\"_blank\">updated version of the file<\/a>. I won\u2019t go into all the details here (see the d3.js tutorials!) but basically, for each value, this code finds an image with the same name as the value in question and overlays it on top of the existing bars (don\u2019t be confused by the fact that the variable is called \u201cdates\u201d \u2013 it just represents the variable shown in the bars\/legend).<\/p>\n<p>To complement the code, I created an image for each value (\u201cBurgundy\u201d, \u201cChina\u201d, etc.) and stored them in a new folder C:\\Program Files\\SAP Lumira\\Desktop\\chartExtensions\\viz.ext.samplesbar\\images. Each image has a transparent section that lets through the color of the underlying bar &#8212; the \u201cinside\u201d of the bottle (the background is solid white), and the area around the flags.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"bottles-and-flags\" alt=\"bottles-and-flags\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/bottles-and-flags.jpg?resize=640%2C522&#038;ssl=1\" width=\"640\" height=\"522\" border=\"0\" \/><\/p>\n<p>You can download the <a href=\"https:\/\/timoelliott.com\/blog\/docs\/samplebar images 1.zip\" target=\"_blank\">images as a zipped folder<\/a> \u2013 unzip it in the \u201cvis.ext.samplebar\u201d folder to create the \u201cimage\u201d subfolder. Alternatively, you can just download a whole <a href=\"https:\/\/timoelliott.com\/blog\/docs\/viz.ext.samplesbar_overlay.zip\" target=\"_blank\">replacement samplesbar folder<\/a> (save the old one somewhere, and rename this one by taking off the \u201c_overlay\u201d).<\/p>\n<p>We can now relaunch Lumira and open up the same document as above. You should get something like the following (I also changed the color palette in this version):<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/bottles.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"bottles\" alt=\"bottles\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/bottles_thumb.png?resize=640%2C376&#038;ssl=1\" width=\"640\" height=\"376\" border=\"0\" \/><\/a><\/p>\n<p>And if you swap the axes, you get the flags instead:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/flags.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"flags\" alt=\"flags\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/flags_thumb.png?resize=640%2C376&#038;ssl=1\" width=\"640\" height=\"376\" border=\"0\" \/><\/a><\/p>\n<p>This version, while only a few extra lines of code, isn\u2019t that flexible, and it\u2019s hard to control the colors of the background. With some more code, we can be more ambitious.<\/p>\n<h3>Adapting The Sample Bar Visualization Version 2.<\/h3>\n<p>Download <a href=\"https:\/\/timoelliott.com\/blog\/docs\/viz.ext.samplesbar_images.zip\" target=\"_blank\">this version of the extension<\/a> (again, copy the old samplebar folder somewhere, and delete the \u201c_images\u201d part to get this one to work), fire up Lumira again, using the same file, and you\u2019ll get this:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/nicer_bottles.jpg?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"nicer_bottles\" alt=\"nicer_bottles\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/nicer_bottles_thumb.jpg?resize=640%2C376&#038;ssl=1\" width=\"640\" height=\"376\" border=\"0\" \/><\/a><\/p>\n<p>This works in a similar way to Donald McCormack\u2019s Old <a href=\"http:\/\/xcomponents.blogspot.fr\/\" target=\"_blank\">XProgressImage extension<\/a> for SAP Dashboards (Xcelsius).<\/p>\n<p>The code takes the value that is being charted, but instead of creating a bar, overlays an \u201cempty\u201d version of the picture, and then overlays that with a \u201cfull\u201d version of the picture clipped to the right height. For example, here are the images for Burgundy \u2013 these images have transparent backgrounds outside the bottle:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border: 0px;\" title=\"burgundy-full-and-empty\" alt=\"burgundy-full-and-empty\" src=\"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/burgundy-full-and-empty.jpg?resize=414%2C279&#038;ssl=1\" width=\"414\" height=\"279\" border=\"0\" \/><\/p>\n<p>This version of the extension will work for whatever values you choose, as long as there are equivalent empty and full pictures available.<\/p>\n<p>It\u2019s still a little limited, though &#8212; I haven\u2019t done all the hard work that would be required to make sure that the sizing is appropriate \u2013 for example, if you have lots of bottles, you\u2019ll end up with very tall skinny images. And like the original sample, it only works for two-dimensions-plus-a-measure.<\/p>\n<p>I hope these samples were useful, and I look forward to seeing what others come up with!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>First steps towards installing, using, and adapting the SAP Lumira Visualization Extensions<\/p>\n","protected":false},"author":2,"featured_media":5585,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10,15],"tags":[95,160,204,254,324,362,474,706,878,879,911,920,936,1124],"class_list":["post-12346","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-products","category-dataviz-2","tag-analtyics","tag-bi","tag-business-intelligence","tag-cloud","tag-dashboards","tag-dataviz","tag-exploration","tag-lumira","tag-reporting","tag-reports","tag-sap","tag-sap-lumira","tag-saplumira","tag-visualization"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/timoelliott.com\/blog\/wp-content\/uploads\/2013\/07\/sap-lumira-visualization-extensions-banner-1.jpg?fit=690%2C310&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3X9RF-3d8","_links":{"self":[{"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/posts\/12346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/comments?post=12346"}],"version-history":[{"count":0,"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/posts\/12346\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/media\/5585"}],"wp:attachment":[{"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/media?parent=12346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/categories?post=12346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timoelliott.com\/blog\/wp-json\/wp\/v2\/tags?post=12346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}