D3 Bubble Chart in BIRT OS

<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>

<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>

<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>

<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>