Search code examples
svgtitlerectobiee

Add title element to SVG rect through js/javascript or jquery?

OBIEE generates line bar chart and showing data labels as below

It is a partial code. I am looking for to add tooltip on each rect element from It is respective data labels shown and hide the data label shown on each bar.

Following things are challenging

  1. How to add <title><title> in between <rect> eg. <rect><title></title></rect>
  2. Need to pick dynamically pick it is respective data labels for title.

I am not much familiar with JQuery or Javscript and able to pick your solution. Looking for dynamic code

line Bar Chart

enter image description here

find the code : 

<svg viewBox="0 -1 583 169">
<g>
  <g>
    <rect fill="#ffffff" x="0" y="0" width="583" height="168" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted"></rect>
    <rect fill="none" x="50" y="7" width="523" height="76" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted" shape-rendering="crispEdges"></rect><text fill="#333333" x="93" y="113" font-family="Courier New" aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 115,109)" pointer-events="visiblePainted">31-Dec-15</text><text fill="#333333" x="224" y="113" font-family="Courier New"
      aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 246,109)" pointer-events="visiblePainted">31-Dec-16</text><text fill="#333333" x="354.5" y="113" font-family="Courier New" aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 377,109)"
      pointer-events="visiblePainted">28-Feb-17</text><text fill="#333333" x="485.5" y="113" font-family="Courier New" aria-hidden="true" fill-opacity="1" font-size="9" transform="rotate(315 508,109)" pointer-events="visiblePainted">16-Apr-17</text>
    <text
      fill="#333333" x="39" y="86" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">0</text><text fill="#333333" x="18" y="73" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">4,000</text><text fill="#333333" x="18" y="61" font-family="tahoma, sans-serif"
        aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">8,000</text><text fill="#333333" x="12" y="48" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11"
        transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">12,000</text><text fill="#333333" x="12" y="36" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">16,000</text>
      <text
        fill="#333333" x="12" y="23" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">20,000</text><text fill="#333333" x="12" y="10" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">24,000</text>
        <line fill="none" x1="50" y1="83" x2="573"
          y2="83" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted" stroke="#9e9e9e" stroke-opacity="1" stroke-width="1" stroke-linecap="round" shape-rendering="crispEdges"></line>
        <line fill="none" x1="50" y1="83" x2="50" y2="7" aria-hidden="true" fill-opacity="0" pointer-events="visiblePainted" stroke="#9e9e9e" stroke-opacity="1" stroke-width="1" stroke-linecap="round" shape-rendering="crispEdges"></line>
        <rect fill="#2e87c1" x="66" y="66" width="49" height="17" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <rect fill="#7dc25b" x="115" y="39" width="49" height="44" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <rect fill="#2e87c1" x="197" y="81" width="49" height="2" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <rect fill="#7dc25b" x="246" y="76" width="49" height="7" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <rect fill="#2e87c1" x="328" y="67" width="49" height="16" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <rect fill="#7dc25b" x="377" y="33" width="49" height="50" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <rect fill="#2e87c1" x="459" y="67" width="49" height="16" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <rect fill="#7dc25b" x="508" y="33" width="49" height="50" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></rect>
        <polyline fill="none" points="115 23 246 74 377 17 508 17" aria-hidden="true" pointer-events="visiblePainted" stroke="#99ccff" stroke-opacity="1" stroke-width="3" stroke-linejoin="round" clip-path="url(#plotAreaClip_sawc_3x4$cp3)"></polyline>
        <ellipse fill="#99ccff" aria-hidden="true" cx="115" cy="23" rx="3" ry="3" fill-opacity="1" pointer-events="visiblePainted" cursor="pointer"></ellipse>
        <ellipse fill="#99ccff" aria-hidden="true" cx="246" cy="74" rx="3" ry="3" cursor="pointer" pointer-events="visiblePainted" fill-opacity="1"></ellipse>
        <ellipse fill="#99ccff" aria-hidden="true" cx="377" cy="17" rx="3" ry="3" cursor="pointer" pointer-events="visiblePainted" fill-opacity="1"></ellipse>
        <ellipse fill="#99ccff" aria-hidden="true" cx="508" cy="17" rx="3" ry="3" cursor="pointer" pointer-events="visiblePainted" fill-opacity="1"></ellipse><text fill="#3b3b3b" x="72.5" y="67" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">5,083.3</text><text fill="#3b3b3b"
          x="208" y="81" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">634.5</text><text fill="#3b3b3b" x="333.5" y="67" font-family="tahoma, sans-serif"
          aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">5,047.0</text><text fill="#3b3b3b" x="464.5" y="67" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1"
          font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">5,047.0</text><text fill="#3b3b3b" x="119" y="39" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)"
          pointer-events="visiblePainted" cursor="pointer">13,675.4</text><text fill="#3b3b3b" x="252.5" y="76" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted"
          cursor="pointer">1,946.1</text><text fill="#3b3b3b" x="380" y="33" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">15,606.2</text>
        <text
          fill="#3b3b3b" x="511" y="33" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted" cursor="pointer">15,606.2</text><text fill="#3b3b3b" x="98.5" y="23" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">18,759</text><text fill="#3b3b3b" x="232" y="74"
            font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">2,581</text><text fill="#3b3b3b" x="360.5" y="17" font-family="tahoma, sans-serif" aria-hidden="true"
            fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">20,653</text><text fill="#3b3b3b" x="491.5" y="17" font-family="tahoma, sans-serif" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)"
            pointer-events="visiblePainted">20,653</text>
          <rect fill="none" x="98" y="149" width="387" height="13" aria-hidden="true" fill-opacity="0" stroke="#ffffff" stroke-opacity="0" stroke-width="1" pointer-events="visiblePainted" shape-rendering="crispEdges"></rect>
          <rect fill="#2e87c1" aria-hidden="true" x="102" y="151" width="10" height="10" fill-opacity="1" pointer-events="visiblePainted"></rect>
          <rect fill="#7dc25b" aria-hidden="true" x="228" y="151" width="10" height="10" fill-opacity="1" pointer-events="visiblePainted"></rect>
          <line fill="#7dc25b" x1="355" y1="156" x2="364" y2="156" aria-hidden="true" fill-opacity="1" pointer-events="visiblePainted" stroke="#99ccff" stroke-opacity="1" stroke-width="2"></line>
          <ellipse fill="#99ccff" aria-hidden="true" cx="360" cy="156" rx="3" ry="3" fill-opacity="1" pointer-events="visiblePainted"></ellipse><text fill="#333333" x="115" y="159" font-family="Arial" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">Category1</text><text fill="#333333" x="242" y="159" font-family="Arial"
            aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)" pointer-events="visiblePainted">Category2</text><text fill="#333333" x="368" y="159" font-family="Arial" aria-hidden="true" fill-opacity="1" font-size="11" transform="matrix(1,0,0,1,0,0)"
            pointer-events="visiblePainted">Overall Category</text></g>
</g>
</svg>

Solution

  • The following jQuery used to add tooltip to bar charts. Since text on bar is not in sequence, I followed add tooltip separately. We don't have to really change standard code instead just a wrapper code(static view contains html) on top of existing chart.

    This should have mutation observer to avoid unneccessary addition when page refresh happens. 

    //Adding tooltip for Green color rect

$.each(

$('svg g g > rect[fill="#2e87c1"]:nth-of-type(odd)') , function( key, value ) 
{ 

  var iter =  key;
  var titleforrect = document.createElementNS("http://www.w3.org/2000/svg","title")
  
  var objText = $('svg g g > text[fill="#3b3b3b"]');
  var szText = objText.length;
  var szTextSet = szText / 3;
  
  var datalabel = objText.slice(0,szText-szTextSet).eq(iter).text();
  
  //console.log(datalabel);
  
  titleforrect.textContent = datalabel
  
  value.append(titleforrect);
}
  
);

// Adding tooltip for Green color rect
$.each(

$('svg g g > rect[fill="#7dc25b"]:nth-of-type(even)') , function( key, value ) 
{ 

  var iter = $('svg g g > rect[fill="#7dc25b"]:nth-of-type(even)').length + key;
  var titleforrect = document.createElementNS("http://www.w3.org/2000/svg","title")
  
  var objText = $('svg g g > text[fill="#3b3b3b"]');
  var szText = objText.length;
  var szTextSet = szText / 3;
  
  var datalabel = objText.slice(0,szText-szTextSet).eq(iter).text();
  
  //console.log(datalabel);
  
  titleforrect.textContent = datalabel
  
  value.append(titleforrect);
}
  
);