D3.js Bubble Chart



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






Best Regards,

2.JPG 48.4K


  • edited June 19



    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




    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.