Dynamic Chart Size HTML (window.innerwidth/ width grid)

<p>I created a BIRT Report with a chart which should be displayed in fullscreen format in the Report Viewer. My problem is that charts don't use the auto layout. So I created a text field in which I can get the necessary information: window.innerwidth. Is it possible to store this value in a parameter to use it for rendering the chart? Another idea is to put the chart in a grid, to get the width of the grid (it uses auto layout) and to set the chart width to the same value? I need the value before rendering because of using drill through options.</p>
<p> </p>
<p>Did anyone realized my ideas or is there a better way to solve my problem?</p>
<p> </p>
<p>Thanks a lot!</p>

Find more posts tagged with

Comments

Clement Wong

<p>Are you using open source BIRT, or commercial BIRT? Also, what version of BIRT?</p>
<p> </p>
<p>With commercial BIRT, and HTML5 charts, we can dynamically resize the chart on the initial size of the browser window, and on the manual resize of the window. Attached is an example. The client side resize code is in <em>clientScripts > onContentUpdate</em>.</p>
<pre class="_prettyXprint _lang-">
function resizeChart() {
var myViewer = actuate.getViewer("actuateViewerContainercontainer");
var reportWidth = myViewer.getWidth();
var chart = myViewer.getChart();
var chartHeight = $("div", $(chart.getHtmlDom())).height();
chart.getClientChart().setSize(reportWidth - 20, chartHeight);
};

resizeChart();

$(window).resize(function() {
resizeChart();
});

</pre>

steffen1234

Thanks for your answer! Is there also a solution for the open source BIRT 4.6.0? The output format of my chart is svg.

Clement Wong

<p>I may have misunderstood your initial requirement. To clarify, do you have a report parameter in your report with a chart, and you want to use the parameter to resize that chart?</p>
<p> </p>
<p>If so, then you can you can first give your chart a name (example names it 'myChart', and then add code in the beforeFactory event to resize it:</p>
<pre class="_prettyXprint">
this.getReportElement("myChart").setWidth( params["newChartWidth"].value + "pt" );</pre>
<p>This will work in OS BIRT. Attached is a sample.</p>
<p> </p>
<p>In OS BIRT, it is not possible to resize a chart post-generation. In commercial BIRT, yes.</p>

steffen1234

<pre class="_prettyXprint _lang-html">
<html>
<head>
<title>Hier steht der Seitentitel</title>
<script language="JavaScript">
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
//alert(width);
//alert(height);
var tmp = document.getElementById("mychart");
tmp.style.width = width+"px";
tmp.style.height = "auto";
</script>
</head>
<body>
</body>
</pre>
<p>I adjusted my report to 1920*1080px. So everything is fine on my Desktop PC, but if I want to use the report on my laptop my chart is too big. Therefore I'm searching for a solution to resize the chart to the browser width (window.innerWidth).</p>
<p>The code above works fine but with this solution it isn't possible to resize the imagemap behind the image which I need for the drill down option (also I lose quality).</p>
<p>So my idea is to store the var heigth and var width of the html code to a variable which I can use in the report. Is this possible or are there any better solutions to solve my problem?</p>

Clement Wong

<p>So here's a workaround and you'll need to fiddle around with the width/height ratio that works best for you chart. This is pure client side code all contained within the report. The image map for the drill down will be retained.</p>
<p> </p>
<p>Attached is a sample for OS BIRT use only. This currently resizes on the initial view only, and doesn't change on a user window resize event.</p>
<p> </p>
<p>You'll see a HTML text report item with the following script that contains the magic:</p>
<pre class="_prettyXprint _lang-">
<script>
var checkExist = setInterval(function() {

// Wait until the chart is ready
//

if (document.getElementById("myChart")) {

clearInterval(checkExist);

// Change the size of the parent element of the #document SVG (<EMBED>)
//

//document.documentElement.clientWidth
//window.innerWidth
//document.documentElement.clientHeight
//window.innerHeight

document.getElementById("myChart").style["width"] = window.innerWidth +"px";
document.getElementById("myChart").style["height"] = (window.innerHeight * .4) + "px";

// Change the size of the SVG so that it can dynamically scale
//

//var svg = document.querySelectorAll("#myChart")[0].getSVGDocument().childNodes[0];
var svg = document.getElementById("myChart").getSVGDocument().childNodes[0]

var w = svg.width.baseVal.value;
var h = svg.height.baseVal.value;

svg.setAttribute('viewBox', '0 0 '+w+' '+h);

svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
}

}, 100);

</script>
</pre>

steffen1234

<p>Thank you! But your code isn't working. Both codes show exactly the same result. If I use the BIRT Viewer especially the option "View Report as HTML" both codes are working.The imagemap is resized automatically.</p>
<p>I'm using a Tomcat server and with your code the imagemap isn't resized, too.</p>
<pre class="_prettyXprint _lang-js">
<script>
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
//alert(width);
//alert(height);
var tmp = document.getElementById("myChart");
tmp.style.width = width*0.5+"px";
tmp.style.height = height*0.5+"px"
</script>
</pre>
<pre class="_prettyXprint _lang-js">
<script>
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

//change chart size
document.getElementById("myChart").style["width"] = width*0.5 +"px";
document.getElementById("myChart").style["height"] = height*0.5 +"px";

//var svg = document.querySelectorAll("#myChart")[0].getSVGDocument().childNodes[0];

//change imagemap size
var svg = document.getElementById("myChart").getSVGDocument().childNodes[0];
var w = svg.width.baseVal.value;
var h = svg.height.baseVal.value;
svg.setAttribute('viewBox', '0 0 '+w+' '+h);
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
</script>
</pre>

steffen1234

<p>I found out that the run and framset option with Tomcat resizes automatically. But I'm using the preview option because this option is much faster.</p>
<p>I'm able to resize the chart but not the imagemap which I need for the drill down.</p>

steffen1234

<p>I added the option __svg=true in my link and now everything is fine:) The imagemap is resized automatically by changing the image size with my code.</p>
<p> </p>
<p>Thanks for your help!</p>

suresh@anumolu

<p>Hi Clement Wong,</p>
<p> </p>
<p>I am using the following BIRT commercial version and i am not able to make this script working on my end for either html5/svg chart type. Do i need to make any changes to work on earlier versions? <br>
</p>
<div>Actuate BIRT Designer Professional </div>
<div>Version: 4.2.3</div>
<div>Build id: v20131216</div>
<div> </div>
<div>thanks</div>
<div>suresh</div>

reportBirt_user

<blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="144490" data-time="1467319462">
<div>
<p> </p>
<p>So here's a workaround and you'll need to fiddle around with the width/height ratio that works best for you chart. This is pure client side code all contained within the report. The image map for the drill down will be retained.</p>
<p> </p>
<p>Attached is a sample for OS BIRT use only. This currently resizes on the initial view only, and doesn't change on a user window resize event.</p>
<p> </p>
<p>You'll see a HTML text report item with the following script that contains the magic:</p>
<pre class="_prettyXprint _lang-">
<script>
var checkExist = setInterval(function() {

// Wait until the chart is ready
//

if (document.getElementById("myChart")) {

clearInterval(checkExist);

// Change the size of the parent element of the #document SVG (<EMBED>)
//

//document.documentElement.clientWidth
//window.innerWidth
//document.documentElement.clientHeight
//window.innerHeight

document.getElementById("myChart").style["width"] = window.innerWidth +"px";
document.getElementById("myChart").style["height"] = (window.innerHeight * .4) + "px";

// Change the size of the SVG so that it can dynamically scale
//

//var svg = document.querySelectorAll("#myChart")[0].getSVGDocument().childNodes[0];
var svg = document.getElementById("myChart").getSVGDocument().childNodes[0]

var w = svg.width.baseVal.value;
var h = svg.height.baseVal.value;

svg.setAttribute('viewBox', '0 0 '+w+' '+h);

svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
}

}, 100);

</script>
</pre>
</div>
</blockquote>
<p> </p>
<p>Where you link the information of script (text label) with the size of the chart ?<br>
Because i saw that if i change the vales of width and height the size chart change too. <br>
I try to recreate the new report with this functionality but i can't understand where you link this information.</p>
<p> </p>
<p>Thanks for the help.<br>
</p>

Clement Wong

<blockquote class="ipsBlockquote" data-author="suresh@anumolu" data-cid="145924" data-time="1479082661">
<div>
<p> </p>
<p>Hi Clement Wong,</p>
<p> </p>
<p>I am using the following BIRT commercial version and i am not able to make this script working on my end for either html5/svg chart type. Do i need to make any changes to work on earlier versions? <br>
</p>
<div>Actuate BIRT Designer Professional </div>
<div>Version: 4.2.3</div>
<div>Build id: v20131216</div>
<div> </div>
<div>thanks</div>
<div>suresh</div>
<p> </p>
</div>
</blockquote>
<p> </p>
<p> </p>
<p>My reply in post #2 (<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/39379-dynamic-chart-size-html-windowinnerwidth-width-grid/?p=144466'>http://developer.actuate.com/community/forum/index.php?/topic/39379-dynamic-chart-size-html-windowinnerwidth-width-grid/?p=144466</a>) has a solution for commercial BIRT's HTML5 Chart. It can resize on the initial view as well as a browser resize. </p>

Clement Wong

<blockquote class="ipsBlockquote" data-author="reportBirt_user" data-cid="145957" data-time="1479225406">
<div>
<p>Where you link the information of script (text label) with the size of the chart ?<br>
Because i saw that if i change the vales of width and height the size chart change too. <br>
I try to recreate the new report with this functionality but i can't understand where you link this information.</p>
<p> </p>
<p>Thanks for the help.<br>
</p>
</div>
</blockquote>
<p> </p>
<p>I'm not sure what you meant by link? The only thing I think you are referring to is to the use of naming the chart report item in the Chart's <em>Property > Bookmark</em>. In my OS BIRT example, there is a bookmark for the chart report item "myChart".</p>
<p> </p>
<p>That should be the step that you are missing.</p>

reportBirt_user

<blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="145961" data-time="1479235807">
<div>
<p>I'm not sure what you meant by link? The only thing I think you are referring to is to the use of naming the chart report item in the Chart's <em>Property > Bookmark</em>. In my OS BIRT example, there is a bookmark for the chart report item "myChart".</p>
<p> </p>
<p>That should be the step that you are missing.</p>
</div>
</blockquote>
<p> </p>
<p>Yes is exactly this property that i was looking for. Thanks for the support. Nice tip for the future.<br><br>
Best Regards</p>

PHN

<blockquote class="ipsBlockquote" data-author="Clement Wong" data-cid="144466" data-time="1467231360">
<div>
<p> </p>
<p>Are you using open source BIRT, or commercial BIRT? Also, what version of BIRT?</p>
<p> </p>
<p>With commercial BIRT, and HTML5 charts, we can dynamically resize the chart on the initial size of the browser window, and on the manual resize of the window. Attached is an example. The client side resize code is in <em>clientScripts > onContentUpdate</em>.</p>
<pre class="_prettyXprint _lang-">
function resizeChart() {
var myViewer = actuate.getViewer("actuateViewerContainercontainer");
var reportWidth = myViewer.getWidth();
var chart = myViewer.getChart();
var chartHeight = $("div", $(chart.getHtmlDom())).height();
chart.getClientChart().setSize(reportWidth - 20, chartHeight);
};

resizeChart();

$(window).resize(function() {
resizeChart();
});

</pre>
</div>
</blockquote>
<p> </p>
<p>Hi Clement,</p>
<p> </p>
<p>This code don't work for me and i don't see the method .setSize() on ClientChart in JsDoc Reference.</p>
<p> </p>
<p>Do you have perhaps an idea?</p>
<p> </p>
<p>Best regards</p>

Clement Wong

<p>Sorry, I have been out of the office, and have not been able to reply to the threads.</p>
<p> </p>
<p>The code works in commercial BIRT, and I have tested in iHub 3.1, 3.1.1, and 16.</p>
<p> </p>
<p>What version are you using?</p>