nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Toggle curve fitting line

mogwai

<p>Is there a way to toggle the visibility of the curve fitting line in a chart. I thought of invoking a script on the mouse click event of the value series, but I'm not sure what script to use to do this, or if it is even possible to toggle the curve fitting line visibility without toggling the actual value series line.</p>

Find more posts tagged with

Comments

kclark

<p>I can think of a few ways to do this in BD Pro, are you using open source? If so, what version?</p>

mogwai

<p>I am. BIRT Designer Version 4.3.2</p>

kclark

<p>In the onRender() of your chart I think you can do something like this</p>
<pre class="_prettyXprint _lang-">
function beforeDrawFittingCurve( curveFitting, icsc ){
curveFitting.eUnset(curveFitting.eContainingFeature())
}

</pre>
<p>(Untested)</p>
<p> </p>
<p>So, if you did something like this, then you can enable it by default, the toggle it off in a way like this with a parameter. If you're wanting to do this on the fly with something like an HTML button then I think you'll need to modify the SVG data with some JavaScript. Let me know which way you were wanting to implement this and I'll try to write an example. Also, take a look at this <a data-ipb='nomediaparse' href='http://help.eclipse.org/indigo/index.jsp?topic=/org.eclipse.birt.chart.doc.isv/chart/api/org/eclipse/birt/chart/model/component/CurveFitting.html'>API doc page.</a></p>

mogwai

<p>Thanks Kris. I'm hoping to add a script to the interactive behaviour of the value series, i.e. every time I click on the value series line in the line chart, the curve fitting line visibility toggles. Using a parameter would require re-running the report. I'm hoping to avoid that. How would I achieve that?</p>

kclark

<p>I don't have any examples off hand, but I'll try to write something to mimic this functionality. Like I said in my first reply though, BD Pro does this out of the box and can deploy to F-Type so it defiantly makes things easier, it's worth checking out since there are a lot of fun features. I'll try to get you an example report of this in OS soon though.</p>

kclark

mogwai, I've attached an example that shows one quick way that you can do this, you won't be able to click on the curve fitting line itself, but wanted to share this with you in case it'll work for your report. I made two charts, one with the curve fitting line, the other without and placed them in a grid. I then bookmarked each of the grid rows and was able to swap between the charts using this script.<br><br><pre class="_prettyXprint _lang-auto _linenums:0">
<script>
var chartWithLine = true;

var chartWithCurve = document.getElementById('ChartWithCurve').innerHTML;
var chartWithoutCurve = document.getElementById('ChartWithoutCurve').innerHTML;

document.getElementById('ChartWithCurve').style.display = 'none';
document.getElementById('ChartWithoutCurve').style.display = 'none';

document.getElementById('userdisplay').innerHTML = chartWithCurve;

function toggleCharts() {
if (chartWithLine == true) {
document.getElementById('userdisplay').innerHTML = chartWithoutCurve;
chartWithLine = false;
} else {
document.getElementById('userdisplay').innerHTML = chartWithCurve;
chartWithLine = true;
}
}
</script>

<button type="button" onClick="toggleCharts()">Toggle Curve Fitting Line</button>

<div id="userdisplay"></div>
</pre>

mogwai

<p>Thank you Kris. Ingenious. I hadn't thought of swapping out the whole chart. I will look into BD Pro.</p>