How to display two charts side by side

[Former Member]

hello Experts,

i have two charts , which is defined in a single XML view and these two charts are displaying one below another in my output

Is there any way to display these two charts side by side .??

if yes can anyone suggest me ?

Thanks in Advance,

Bharath

[saxos · Accepted solution]

Hi Bharath,

have you tried using a MatrixLayout? Love this Layout.

For example:

<MatrixLayout width="100%" widths="50%,50%">

     <MatrixLayoutRow>

          <MatrixLayoutCell>

               Insert here your Chart 1

          </MatrixLayoutCell>

          <MatrixLayoutCell>

               Insert here your Chart 2

          </MatrixLayoutCell>

     </MatrixLayoutRow>

</MatrixLayout>

now your charts should be side by side

Regards,

Samuel

[Former Member · Accepted solution]

No Luck Samuel

here is My view code

<script id="view1" type="sapui5/xmlview">

    <core:View controllerName="demovizframe.V_chart" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" 

  xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m"> 

  <App>

  <Page title="Houlry Temperature"> 

  <content> 

   <HBox justifyContent="SpaceAround">

            <HBox>

              <Label text="LOCATION:" class="LabelStyle" />

              <ComboBox id="idCombo" placeholder="Slect Your Location" items="{OdataModel>/Location_details}" selectionChange="onChange">

                <core:Item text="{OdataModel>LM_LOCATION_ID_PK}"/>

              </ComboBox>

            </HBox>

            <HBox>

              <Label text="DATE:" class="LabelStyle" />

              <ComboBox id="oComboBox" selectionChange="onSelect">

   </ComboBox>

            </HBox>

          </HBox>

           <Label text="Temperature trend"/> 

  <ScrollContainer focusable="true" height="100%" horizontal="true" vertical="false" width="100%"> 

  <viz:Popover id="idPopOver"></viz:Popover> 

  <viz:VizFrame height="700px" id="idcolumn" uiConfig="{applicationSet:'fiori'}" vizType="line" width="50%"></viz:VizFrame> 

  </ScrollContainer>

<ScrollContainer focusable="true" height="100%" horizontal="true" vertical="false" width="100%"> 

  <viz:Popover id="idPopOver1"></viz:Popover> 

  <viz:VizFrame height="700px" id="idcolumn1" uiConfig="{applicationSet:'fiori'}" vizType="column" width="50%"></viz:VizFrame> 

  </ScrollContainer>

  </content> 

  </Page>

  </App>

</core:View> 

  </script>

any suggestions now ??

Thanks in Advance,

Bharath

[saxos · Accepted solution]

Could you try this code:

I'm not sure if the MatrixLayout is compatible with the sap.viz.* and the ScrollContainer. If you get an error that the scrollcontainer isnt compatible with the matrix just try to replace the scroll with an panel. It's scrollable too.

<script id="view1" type="sapui5/xmlview">

  <core:View controllerName="demovizframe.V_chart" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml"

  xmlns:mvc="sap.ui.core.mvc" xmlns:viz="sap.viz.ui5.controls" xmlns="sap.m">

  <App>

  <Page title="Houlry Temperature">

  <content>

  <HBox justifyContent="SpaceAround">

  <HBox>

  <Label text="LOCATION:" class="LabelStyle"/>

  <ComboBox id="idCombo" placeholder="Slect Your Location" items="{OdataModel>/Location_details}" selectionChange="onChange">

  <core:Item text="{OdataModel>LM_LOCATION_ID_PK}"/>

  </ComboBox>

  </HBox>

  <HBox>

  <Label text="DATE:" class="LabelStyle"/>

  <ComboBox id="oComboBox" selectionChange="onSelect"></ComboBox>

  </HBox>

  </HBox>

  <Label text="Temperature trend"/>

  <MatrixLayout width="100%" widths="50%,50%">

  <MatrixLayoutRow>

  <MatrixLayoutCell>

  <ScrollContainer focusable="true" height="100%" horizontal="true" vertical="false" width="100%">

  <viz:Popover id="idPopOver"></viz:Popover>

  <viz:VizFrame height="700px" id="idcolumn" uiConfig="{applicationSet:'fiori'}" vizType="line" width="50%"></viz:VizFrame>

  </ScrollContainer>

  </MatrixLayoutCell>

  <MatrixLayoutCell>

  <ScrollContainer focusable="true" height="100%" horizontal="true" vertical="false" width="100%">

  <viz:Popover id="idPopOver1"></viz:Popover>

  <viz:VizFrame height="700px" id="idcolumn1" uiConfig="{applicationSet:'fiori'}" vizType="column" width="50%"></viz:VizFrame>

  </ScrollContainer>

  </MatrixLayoutCell>

  </MatrixLayoutRow>

  </MatrixLayout>

  </content>

  </Page>

  </App>

  </core:View>

</script>

[Former Member · Accepted solution]

Replaced with the Panel, again its not working

Regards,

Bharath

[saxos · Accepted solution]

Which error do you get?

[Former Member · Accepted solution]

Regards,

Bharath

[saxos · Accepted solution]

Sorry, add in your <core: ...> xmlns:l="sap.ui.commons.layout"

and write before every ..MatrixLayout:

<l:MatrixLayout>

     <l:MatrixLayoutRow>

     <l:/MatrixLayoutRow>

and so on.

sap.m.* does not provide a MatrixLayout so we have to use the sap.ui.commons.layout.MatrixLayout

Hope it will work now

check also:

MatrixLayout - SAPUI5 Demo Kit

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.commons.layout.MatrixLa...

[Former Member · Accepted solution]

Again Error, See this Below Code .!!

<script id="view1" type="sapui5/xmlview">

  <core:View controllerName="demovizframe.V_chart" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml"

  xmlns:mvc="sap.ui.core.mvc" xmlns:viz="sap.viz.ui5.controls" xmlns:l="sap.ui.commons.layout" xmlns="sap.ui.commons.layout.MatrixLayout">

  <App>

  <Page title="Houlry Temperature">

  <content>

  <HBox justifyContent="SpaceAround">

  <HBox>

  <Label text="LOCATION:" class="LabelStyle"/>

  <ComboBox id="idCombo" placeholder="Slect Your Location" items="{OdataModel>/Location_details}" selectionChange="onChange">

  <core:Item text="{OdataModel>LM_LOCATION_ID_PK}"/>

  </ComboBox>

  </HBox>

  <HBox>

  <Label text="DATE:" class="LabelStyle"/>

  <ComboBox id="oComboBox" selectionChange="onSelect"></ComboBox>

  </HBox>

  </HBox>

  <Label text="Temperature trend"/>

  <l:MatrixLayout width="100%" widths="50%,50%">

  <l:MatrixLayoutRow>

  <l:MatrixLayoutCell>

  <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:Popover id="idPopOver"></viz:Popover>

  <viz:VizFrame height="700px" id="idcolumn" uiConfig="{applicationSet:'fiori'}" vizType="line" width="50%"></viz:VizFrame>

  </ScrollContainer>

  </l:MatrixLayoutCell>

  <l:MatrixLayoutCell>

  <ScrollContainer focusable="true" height="100%" horizontal="false" vertical="true" width="100%">

  <viz:Popover id="idPopOver1"></viz:Popover>

  <viz:VizFrame height="700px" id="idcolumn1" uiConfig="{applicationSet:'fiori'}" vizType="column" width="50%"></viz:VizFrame>

  </ScrollContainer>

  </l:MatrixLayoutCell>

  </l:MatrixLayoutRow>

  </l:MatrixLayout>

  </content>

  </Page>

  </App>

  </core:View>

</script>

[saxos · Accepted solution]

replace xmlns="sap.ui.commons.layout.MatrixLayout" with xmlns="sap.m"

but keep the xmlns:l="sap.ui.commons.layout"

[Former Member · Accepted solution]

Thank you Samuel,

Its Worked

Regards,

Bharath

[saivellanki]

Hi Bharath,

Use a horizontal container, something like HBox / Horizontal Layout.

API: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.HBox

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.layout.HorizontalLayout

Regards,

Sai Vellanki.