Search code examples
javascriptreportingbirt

How to display an overlay label on a chart?


I have a chart created with Birt and I want to add some label on it to specify the 4 regions delimited by the 2 red markers (see image below), one label in each quadrant (centered if possible).

I am looking for a solution to do that, directly using birt chart editor or by using a javascript (like I have done for the red markers).

alt text


Solution

  • In order to dynamically center some type of label in each quadrant of the graph, you'll have to have some way of calculating the coordinates. Of course, I'm not really familiar with Birt and I'm making the assumption that the graph's red markers will vary.

    Anyway, assuming that you can get the coordinates, you could write a function that would dynamically generate the label based on a couple of parameters:

    function generateLabel(sContent, iXoffset, iYoffset) {
    
      var eLabel = document.createElement('span');
      eLabel.appendChild(document.createTextNode(sContent));
    
      var eDivision = document.createElement('div');
      eDivision.appendChild(eLabel);
    
      eDivision.style.left = iXoffset + 'px';
      eDivision.style.top = iYoffset + 'px';
      // include other styles here...
    
      return eDivision;
    
    }
    

    and then from there, you can call this function with the set label content and offset coordinates:

    var eQuadrantOneLabel = generateLabel('Quadrant One', 10, 25);
    // and so on...
    

    Then just add the element to the graph's container (assuming that is has an id of, say, graph):

    var eGraphContainer = document.getElementById('graph');
    eGraphContainer.appendChild(eQuadrantOneLabel);
    // and so on for each label...