Jump to content

BIRT Developer Center Download


Photo
- - - - -

D3.js Bubble Chart

d3.js birt os birt d3 bubble charts

  • Please log in to reply
3 replies to this topic

#1 Mr_Data

Mr_Data

    Member

  • Members
  • PipPip
  • 18 posts

Posted 18 June 2017 - 08:22 AM

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/n...5fb2b1072fbc6c1
 
 
Thanks,
 
Best Regards,

Attached Files

  • Attached File  2.JPG   48.45KB   0 downloads


#2 Mr_Data

Mr_Data

    Member

  • Members
  • PipPip
  • 18 posts

Posted 19 June 2017 - 11:12 AM

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,

Attached Files



#3 Clement Wong

Clement Wong

    Senior Member

  • BIRT Experts
  • 1160 posts

Posted 20 June 2017 - 10:32 AM

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

...
}

  • Mr_Data likes this

Clement Wong
Principal Analytics Architect

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


#4 Mr_Data

Mr_Data

    Member

  • Members
  • PipPip
  • 18 posts

Posted Today, 09:22 PM

Hi Clement,

 

It works. Thanks.

 

Best Regards,







Also tagged with one or more of these keywords: d3.js, birt os, birt, d3, bubble, charts