D3 Bubble Chart in BIRT OS

Mr_Data

<p>Hi,</p>
<p> </p>
<p>I want to show Bubble Chart by using D3 's properties.</p>
<p> </p>
<p>I added a sample report but I could not show the graph. I think my problem is data showing. </p>
<p> </p>
<p>Can you help me please?</p>
<p> </p>
<p>Best Regards,</p>

Clement Wong

<p>What version of BIRT are you using?  Open source, or commercial?</p>
<p> </p>
<p>To use D3.js in Open Source BIRT, you should use head.js to load the D3 libraries.</p>
<p> </p>
<p>Then you can use a callback, or use head.ready to call the function to render the D3.js content.</p>
<pre class="_prettyXprint">
head.ready (
    function () {
        showCalendar();
    });
</pre>
<p>You can look at this DevShare example:</p>
<p><a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1065-d3-calendar-view-in-a-birt-report/'>http://developer.actuate.com/community/forum/index.php?/files/file/1065-d3-calendar-view-in-a-birt-report/</a></p&gt;
<p> </p>
<p> </p>
<p>A few things... did you get this working in a JSFiddle?  It seems that you might have copied code from a D3.js v4 implementation because I see this line of code only available in v4:</p>
<pre class="_prettyXprint _lang-">
color = d3.scaleOrdinal(d3.schemeCategory20c);
</pre>
<p>Second, when you put it in a BIRT report, you'll need to change the target DOM element of the D3.js chart from "body" to "#chart".</p>
<pre class="_prettyXprint _lang-">
var svg = d3.select("#chart").append("svg")
</pre>
<p>If you are using commercial BIRT, you can use the Custom Visualization report item instead.  Here are some DevShare examples:</p>
<p><em><a class="bbc_url" href="http://developer.actuate.com/community/forum/index.php?/files/file/1120-ihub-31-custom-visualization-examples/">http://developer.actuate.com/community/forum/index.php?/files/file/1120-ihub-31-custom-visualization-examples/</a><br><br><a class="bbc_url" href="http://developer.actuate.com/community/forum/index.php?/files/file/1129-ihub-31-custom-visualization-google-map-with-heatmap-layer/">http://developer.actuate.com/community/forum/index.php?/files/file/1129-ihub-31-custom-visualization-google-map-with-heatmap-layer/</a><br><br><a class="bbc_url" href="http://developer.actuate.com/community/forum/index.php?/files/file/1124-ihub-31-custom-visualization-bipartite-graph-via-d3js/">http://developer.actuate.com/community/forum/index.php?/files/file/1124-ihub-31-custom-visualization-bipartite-graph-via-d3js/</a></em></p&gt;
<p> </p>
<p>In particular, the first link has a zoomable circle packing D3.js example.</p>

Mr_Data

<p>Hi Clement,</p>
<p> </p>
<p><span style="color:rgb(0,0,0);font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;background-color:rgb(244,244,244);">I am using BIRT 4.6.0.v2, Open Source.  I have changed field of code  "</span><span style="color:rgb(0,0,136);">var</span><span> svg </span><span style="color:rgb(102,102,0);">=</span><span> d3</span><span style="color:rgb(102,102,0);">.</span><span style="color:rgb(0,0,136);">select</span><span style="color:rgb(102,102,0);">(</span><span style="color:rgb(0,136,0);">"#chart"</span><span style="color:rgb(102,102,0);">).</span><span>append</span><span style="color:rgb(102,102,0);">(</span><span style="color:rgb(0,136,0);">"svg"</span><span style="color:rgb(102,102,0);">)" and D3.v4 version. But I still do not see the any charts on the screen.</span></p>
<p> </p>
<p><span style="color:rgb(102,102,0);">Thanks for your reply and help,</span></p>
<p><span style="color:rgb(102,102,0);">Best Regards,</span></p>

Clement Wong

<p>Can you confirm that the D3.js DevShare example works in your environment?</p>
<p><a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/1065-d3-calendar-view-in-a-birt-report/'>http://developer.actuate.com/community/forum/index.php?/files/file/1065-d3-calendar-view-in-a-birt-report/</a></p&gt;
<p> </p>
<p>If the example works, and your report design does not, please attach your .rptdesign so that we can troubleshoot it.</p>

Mr_Data

<p>Hi Clement,</p>
<p> </p>
<p>Yes, your report is working in my computer.</p>
<p> </p>
<p>I have sent my report in the attachment.</p>
<p> </p>
<p>Thank you very much.</p>
<p> </p>
<p>Best Regards,</p>

Clement Wong

<p><span style="color:#000000;">Please refer back to post #2 (<a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/40186-d3-bubble-chart-in-birt-os/?p=147314'>http://developer.actuate.com/community/forum/index.php?/topic/40186-d3-bubble-chart-in-birt-os/?p=147314</a>) for the recommended changes to your report. </span></p>
<p> </p>
<p><span style="color:#000000;">First, you cannot load via <script> the D3.js library in the HTML code report item.  Please use head.js.</span></p>
<p> </p>
<p><span style="color:#000000;">Second, the target DOM element should be d3.select "#chart" instead of "chart".</span></p>
<p> </p>
<p><span style="color:#000000;">Third, d3.json takes a JSON stream, not a variable that contains JSON.  All you would need to do here is remove the d3.json surrounding call.</span></p>
<p> </p>
<p><span style="color:#000000;">Fourth, there was a syntax error -- extra ";" causing the var root line to fail.  Before change:</span></p>
<pre class="_prettyXprint _lang-">
var root = JSON.parse('<VALUE-OF>BirtStr.left(vars["g_data"], BirtStr.charLength(vars["g_data"])-2) + '}] }'</VALUE-OF>');
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
</pre>
<p>First, that leads to the actual g_data JSON text.   In the D3 Bubble Chart example (<a data-ipb='nomediaparse' href='https://bl.ocks.org/john-guerra/0d81ccfd24578d5d563c55e785b3b40a'>https://bl.ocks.org/john-guerra/0d81ccfd24578d5d563c55e785b3b40a</a>), the flare.json has a size component.  You'll need to build that into your JSON string.</p>
<p> </p>
<p>Attached is a working D3.js Bubble Chart using the hard-coded data defined in the flare.json example.  You will need to figure out what the size you want to plot in the 5th step and populate g_data.  You are then good to go!</p>

Mr_Data

<p>Hi Clement,</p>
<p> </p>
<p>Thank you very much, report is working well. I have a question. How can we imlement CSS Code in script.</p>
<p> </p>
<p>I have sent another report by working by D3 in the attachment. CSS is not working so interactivity for chart does not work.</p>
<p> </p>
<p>Best Regards,</p>

Clement Wong

<p>If you had commercial BIRT, you would be able to use the Custom Visualization Report Item that has a tab for CSS, HTML and Script with the ability to bind to a data set, and export to PDF/Excel/etc... retaining the (static version of) output of the visualization.</p>
<p> </p>
<p>In your case with OS BIRT, you can add external CSS via the head.js.</p>
<p> </p>
<p>Remove this:</p>
<pre class="_prettyXprint">
<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/></pre>
<p>Change the head.js to include the CSS file as part of the resources your D3.js visualization needs, like this:</p>
<pre class="_prettyXprint _lang-">
head.js ( 'https://dc-js.github.io/dc.js/css/dc.css'... );
</pre>
<p>With those edits, I can see the D3.js visualization example (<a data-ipb='nomediaparse' href='http://dc-js.github.io/dc.js/examples/area.html'>http://dc-js.github.io/dc.js/examples/area.html</a>) in the BIRT Viewer. </p>

Drax

Hello Guys,
could you send me please a working example of bubble chart, in my Birt it doesn't work.
Thanks in advance!
Dragan

jfranken

I attached an example I got from Clement. It was created in Birt Pro 3.1.1. I don't have an OS Birt example, but maybe this will help.

Drax

Hello Jeff,
unfortunately your rptdesign doesn't work at me, I have an OS Birt version.
Do you have the D3.jsp bubbles of Clement, which he posted at April 24, 2017??
It would help me.

Thanks in advance!
Best,
Dragan

jfranken

The forums were moved since Clement's post and unfortunately the attachments were lost. I found the following post in the Eclipse forum that has reports attached:

https://eclipse.org/forums/index.php/t/516684/

Drax

I just try to drive bubble diagramms with d3. Attached is my rptdesign file as well as the Javascript for Bubbles (unnamed in .txt because .js is not allowed as attachment) with integrated data. Unfortunately it does not work, could someone help please?
Best
Dragan

Drax

Hello,
it works now .

Drax

Here is my Example with Bubbles d3 from https://bl.ocks.org/john-guerra/0d81ccfd24578d5d563c55e785b3b40a.

FSCode

Hi,
I use BIRT 4.4 and I must develop a plugin to insert a new chart type in BIRT. everyone can help me ?

Best regards

jfranken

I found this link:

https://forums.opentext.com/forums/discussion/61273/adding-a-chart-type-to-birt

I have not tested the example.

FSCode

Hello Jeff F.
Thanks you for your answer.