SAPUI5 Viz Chart Print - How Do I fit to page when printing?

[former_member239819]

I'm displaying a chart in SAPUI5, which is responsive and works fine.

I have an onclick event which executes window.print(), opening up the Chrome print Dialog.

ALL Works great, but how to fit the image to the page? Currently, it only cuts most of it off.

[former_member593328]

Hi,

Try with attached code snippet, hope it helps.

P.S. In sample code snippet, i'm printing only the chart (viz) data and not the entire page.

Regards,

Vinod

	onPrint: function (oEvent) {
	        var ctrlString = "width=800px, height=600px"; // control page size
	        var wind = window.open("","Print",ctrlString);
		var sContent = this.getView().byId("idVizFrame").exportToSVGString({ // read content and fit with page size
			width: 800,
			height: 600
		});
		wind.document.write(sContent);
		wind.print();
	}

[former_member239819]

Thank you. I can see how that could work for html.

However a RadialMicroChart doesn't have access to the exportToSVGString() function, so it can't be printed in this way.

When I place the content using outerHTML directly, or indeed access the svg element directly, I get a black circle as opposed to the Radial Chart.

[former_member593328]

Hi Adam,

Sorry. I didn't try for RadialMicroChart. Let me try, if I find some solution, I will post it here.

Interesting question, thanks for posting.

Regards,

Vinod

[former_member593328]

Hi Adam,

I have a work around; but its not a solution, hence I have put it in the comment section.

Why don't you try converting to Canvas (Img) while printing?

Below is the work around:

In View

<mvc:View controllerName="sap.viz.sample.Column.Column" xmlns="sap.m" xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc" xmlns:micro="sap.suite.ui.microchart" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds"
	xmlns:viz.data="sap.viz.ui5.data" height="100%">
	<App id="idAppControl">
		<pages>
			<Page id="Page">
				<content>
					<layout:FixFlex id='chartFixFlex' minFlexSize="250">
						<!--Below is the setting panel -->
						<layout:fixContent>
							<Panel id='settingsPanel' class="panelStyle" expandable="true" expanded="true" headerText="Settings" width="auto">
								<content>
									<HBox>
										<VBox class="vBoxRight">
											<Title text="Overall Score"/>
											<FlexBox width="6rem" height="5rem" alignItems="Center" justifyContent="SpaceBetween">
												<micro:RadialMicroChart id="radialChart" percentage="45"/>
											</FlexBox>
										</VBox>
									</HBox>
									<Toolbar>
										<Button text='Print' press="onPrint"/>
									</Toolbar>
								</content>
							</Panel>
						</layout:fixContent>
						<layout:flexContent>
							<viz:Popover id="idPopOver"></viz:Popover>
							<viz:VizFrame id="idVizFrame" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='column'>
								<viz:dataset>
									<viz.data:FlattenedDataset data="{/milk}">
										<viz.data:dimensions>
											<viz.data:DimensionDefinition name="Week" value="{Week}"/>
										</viz.data:dimensions>
										<viz.data:measures>
											<viz.data:MeasureDefinition name="Revenue" value="{Revenue}"/>
											<viz.data:MeasureDefinition name="Cost" value="{Cost}"/>
										</viz.data:measures>
									</viz.data:FlattenedDataset>
								</viz:dataset>
								<viz:feeds>
									<viz.feeds:FeedItem id='valueAxisFeed' uid="valueAxis" type="Measure" values="Revenue"/>
									<viz.feeds:FeedItem id='categoryAxisFeed' uid="categoryAxis" type="Dimension" values="Week"/>
								</viz:feeds>
							</viz:VizFrame>
						</layout:flexContent>
					</layout:FixFlex>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>
<br>

//In Controller
onPrint: function (oEvent) {
			
			var sOriginalContent = document.body.innerHTML;
			if (!this.sContent) {
				this.sContent = this.getView().byId("idVizFrame").exportToSVGString({ 
					width: 800,
					height: 300
				});
			}
			var sContent1 = this.getView().byId("chartFixFlex");
			var $domTarget = sContent1.$()[0];
            var sTargetContent = $domTarget.innerHTML;
			document.body.innerHTML = sTargetContent + this.sContent;
			window.print();
			document.body.innerHTML = sOriginalContent;
		}
	});
<br>

If you find a better solution, please post it, I would be interested :), thank you.

Regards,

Vinod

[former_member593328]

Hi,

You can achieve it by reading the elements from DOM (sample code attached).

Example code: document.getElementById("__xmlview0--chartFixFlex-Fixed").outerHTML;

You will get a static code check error in SAPUI5 if you perform a direct dom access, You can live with this for the time being, if you don't find any other solution.

note: while using document.getElementById("your control id"), you need to provide the DOM ID of the UI element, to get the DOM ID, right click on your UI control, inspect and obtain the DOM ID. Refer dom-id.png attached.

There may be a better way of doing this, If i find a better solution, I will post it.

Thank you for posting the question, hope it helps.

appln.png

print.png

Regards,

Vinod

onPrint: function (oEvent) {
	var ctrlString = "width=800px, height=600px";
	var wind = window.open("","Print",ctrlString);
	var sContent = this.getView().byId("idVizFrame").exportToSVGString({ // UI5 predefined method
		width: 800,
		height: 600
	});
	
	var sContent1 = document.getElementById("__xmlview0--chartFixFlex-Fixed").outerHTML; // header area
	wind.document.write(sContent1 + sContent);
	wind.print();
}

[former_member239819]

Thanks a lot for this.

It prints my SVG viz charts out perfectly!

The issue now is, how do I display other elements of the SAPUI5 view? E.g I have an HBox I want to display, but obviously can't use exportToSVGString for that.

Also, I have a new RadialMicrocChart which I would like to display but again exportToSVGString is not allowed.

What is the the syntax for the above?

Basically, I need to combine my graphs with other HTML elements from my SAPUI5 view.

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml"  xmlns:micro="sap.suite.ui.microchart" xmlns:viz="sap.viz.ui5.controls" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="rsa-action-plan.rsa-action-plan.controller.Main" displayBlock="true">
	<App id="idAppControl">
		<pages>
			<Page title="{i18n>title}">
				<content>
					<HBox id="idHeader" class="sapUiSmallMargin">
					<VBox class="vBoxLeft">
						<Text text="text" />
					</VBox>
					<VBox class="vBoxRight">
						<Title text="Overall Score" />
						<FlexBox width="6rem" height="5rem" alignItems="Center" justifyContent="SpaceBetween">
							<micro:RadialMicroChart id="radialChart" percentage="45"/>
						</FlexBox>
					</VBox>
					</HBox>
				
				
					
  
					<viz:VizFrame xmlns="sap.viz" id="idStackedChart" legendVisible="false" class="vizChart" vizType="stacked_column" height="25%" width="100%">
					</viz:VizFrame>
		
					<viz:VizFrame xmlns="sap.viz" id="idStackedChart2" legendVisible="false" class="vizChart" vizType="stacked_column"  height="25%" width="100%">
					</viz:VizFrame>
				
					<viz:VizFrame xmlns="sap.viz" id="idStackedChart3" legendVisible="false" class="vizChart" vizType="stacked_column"  height="25%" width="100%">
					</viz:VizFrame>
			
					
				</content>
			<footer>
			    <Bar id="bar0">
			        <contentRight>
			            <Button xmlns="sap.m" text="Print" id="button0" press="onPrint"/>
			        </contentRight>
			    </Bar>
			</footer>
			</Page>
		</pages>
	</App>
</mvc:View>