Home
Analytics
D3.js Bubble Chart
Mr_Data
<p>Hi,<br>
<br>
I want to show bubble chart of D3.js as the below link onto the BIRT OS. Can you help me please?<br>
<br><a data-ipb='nomediaparse' href='
http://bl.ocks.org/nbremer/61cd485e399b6a71d5fb2b1072fbc6c1'>http://bl.ocks.org/nbremer/61cd485e399b6a71d5fb2b1072fbc6c1</a><br>
;
<br>
<br>
Thanks,<br>
<br>
Best Regards,</p>
Find more posts tagged with
Comments
Mr_Data
<p>Hi,</p>
<p> </p>
<p>I can get the report except its design totally. How can I arrange the CSS?</p>
<p> </p>
<p>You can see my report at the attachment.</p>
<p> </p>
<p>Best Regards,</p>
Clement Wong
<p>In order to include the CSS that's defined in the <style>...</style> definition with a BIRT report, you'll either need to either:</p>
<p> </p>
<p>1. Externalize the CSS and include it in your head.js argument</p>
<p> </p>
<p>OR</p>
<p> </p>
<p>2. Add the CSS dynamically in the callback function. </p>
<p> </p>
<p>For example:</p>
<pre class="_prettyXprint _lang-">
function showBubble () {
$("<style type='text/css'>axis path, .axis line { fill: none; stroke: #B3B3B3; shape-rendering: crispEdges; } .axis text { font-size: 10px; fill: #6B6B6B; } .countries { pointer-events: none; } .circle-wrapper { fill: none; pointer-events: all; } .guide { pointer-events: none; font-size: 14px; font-weight: 600; } .popover { pointer-events: none; } .legendCircle { stroke-width:1; stroke:#999; stroke-dasharray:2 2; fill:none; } .legendLine { stroke-width: 1; stroke: #D1D1D1; shape-rendering: crispEdges; } .legendTitle { fill: #1A1A1A; color: #1A1A1A; text-anchor: middle; font-size: 10px; } .legendText { fill: #949494; text-anchor: start; font-size: 9px; }
@media
(min-width: 500px) { .col-sm-3, .col-sm-9 { float: left; } .col-sm-9 { width: 75%; } .col-sm-3 { width: 25%; } }</style>").appendTo("head");
...
}
</pre>
Mr_Data
<p>Hi Clement,</p>
<p> </p>
<p>It works. Thanks.</p>
<p> </p>
<p>Best Regards,</p>
