I would like to place a quadrant chart in one of our reports and created one in D3.
It works fine when placed in a html page, and it also works fine when i enter the html code and script inside a text element from the palette in Birt Designer Pro (and generate the report as html).
However… when i place the script, html and css in a custom visualization element the chart does not show up.
What is wrong and how do I fix this?


In your Custom Visualization Report Item, for the Script subtab under the Template tab, I noticed that you have a head.load with a callback function. However, there isn’t a “callback” function defined.

  • 1. In the HTML, replace:
    $(function(){

    With:
    var callback = function() {

    And the D3.js chart is rendered.

    You’ll want to change is the ID that the SVG is rendered to because currently it is set to target the body, and it will be cutoff at the top part of the viz:

    2. In the HTML, change:
    <div class=’chart’></div>

    To:
    <div class=’chart’ id=’theChart’></div>

    In the Script, change:
    var id = ‘body’,

    To:
    var id = ‘#theChart’,

    3. You have some extraneous test <svg>…</svg> under the HTML subtab that you’ll want to remove after <div <div class=’chart’ id=’theChart’></div> .