D3.js Bubble Chart

Hi,

 

I want to show  bubble chart of D3.js as the below link onto the BIRT OS. Can you help me please?

 
http://bl.ocks.org/nbremer/61cd485e399b6a71d5fb2b1072fbc6c1

 

 

Thanks,

 

Best Regards,


2.JPG 48.4K

Comments

  • edited June 19

    Hi,


     


    I can get the report except its design totally. How can I arrange the CSS?


     


    You can see my report at the attachment.


     


    Best Regards,


  • edited June 20

    In order to include the CSS that's defined in the <style>...</style> definition with a BIRT report, you'll either need to either:


     


    1. Externalize the CSS and include it in your head.js argument


     


    OR


     


    2. Add the CSS dynamically in the callback function. 


     


    For example:



    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");

    ...
    }

    Clement Wong
    Principal Analytics Architect

    OpenText Corporation
    http://www.actuate.com | http://www.opentext.com

  • Hi Clement,


     


    It works. Thanks.


     


    Best Regards,


Sign In or Register to comment.