sparqapi/api/application/docs/temp.html

<p><span style='color:#27ae60'>My </span><span style='color:#27ae60'>html</span><span style='color:#27ae60'> content</span></p><p style='color: #ddd; font-size: 20px;'>Hi Karthi Raj,</p>
  <p>This is Karthi Raj, I am form 50, 2 , your Qualification number (2), has been activated,</p>
  <p>can you please verify with your local branch.</p>
  <p>Hope will get reply soon!!</p>
  <p><strong>Regards,</strong></p>
  <p onclick='alert()'>Sriram,</p>
  <p style='font-weight: bold;'>Main Raw Materials are Listed Below</p>
  <p>check checkcheck</p>
  
  <p style='font-weight: bold;'>Suppliers are Listed Below</p>
  
	  <table style='height: 9px; margin-left: auto; margin-right: auto;' border=1 width='401'>
	<tbody>
	<tr>
	<td style='width: 192.5px;'>Resico</td>
	<td style='width: 192.5px;'>test</td>
	<td style='width: 192.5px;'>9685471122</td>
	<td style='width: 192.5px;'>3</td>
	<td style='width: 192.5px;'>1</td>
	</tr>
	</tbody>
	</table>
  
  
  <hr>
  <svg class='chart' width='420' height='150' aria-labelledby='title desc' role='img'>
  <title id='title'>A bar chart showing information</title>
  <desc id='desc'>4 apples; 8 bananas; 15 kiwis; 16 oranges; 23 lemons</desc>
  <g class='bar'>
    <rect width='40' height='19'></rect>
    <text x='45' y='9.5' dy='.35em'>4 apples</text>
  </g>
  <g class='bar'>
    <rect width='80' height='19' y='20'></rect>
    <text x='85' y='28' dy='.35em'>8 bananas</text>
  </g>
  <g class='bar'>
    <rect width='150' height='19' y='40'></rect>
    <text x='150' y='48' dy='.35em'>15 kiwis</text>
  </g>
  <g class='bar'>
    <rect width='160' height='19' y='60'></rect>
    <text x='161' y='68' dy='.35em'>16 oranges</text>
  </g>
  <g class='bar'>
    <rect width='230' height='19' y='80'></rect>
    <text x='235' y='88' dy='.35em'>23 lemons</text>
  </g>
</svg>
<svg viewBox='0 0 500 100' class='chart'>
  
  <polyline
     fill='none'
     stroke='#0074d9'
     stroke-width='2'
     points='
       00,120
       20,60
       40,80
       60,20
       80,80
       100,80
       120,60
       140,100
       160,90
       180,80
       200, 110
       220, 10
       240, 70
       260, 100
       280, 100
       300, 40
       320, 0
       340, 100
       360, 100
       380, 120
       400, 60
       420, 70
       440, 80
     '
   ></polyline>
  
</svg>

<style>
.bar {
  fill: red; /* changes the background */
  height: 21px;
  transition: fill .3s ease;
  cursor: pointer;
  font-family: Helvetica, sans-serif;
}
.bar text {
  color: black;
}
.bar:hover,
.bar:focus {
  fill: black;
}
.bar:hover text,
.bar:focus text {
  fill: red;
}
.chart {
  background: white;
  width: 500px;
  height: 100px;
  border-left: 1px dotted #555;
  border-bottom: 1px dotted #555;
  padding: 20px 20px 20px 0;
}
</style>
<script>
var total = 158,
    buttons = document.querySelector('.buttons'),
    pie = document.querySelector('.pie'),
    activeClass = 'active';

var continents = {
  asia: 60,
  northAmerica : 5,
  southAmerica: 9,
  oceania: 1,
  africa: 15,
  europe: 12
};

// work out percentage as a result of total
var numberFixer = function(num){
  var result = ((num * total) / 100);
  return result;
}

// create a button for each country
for(property in continents){
  var newEl = document.createElement('button');
  newEl.innerText = property;
  newEl.setAttribute('data-name', property);
  buttons.appendChild(newEl);
}

// when you click a button setPieChart and setActiveClass
  buttons.addEventListener('click', function(e){
    if(e.target != e.currentTarget){
      var el = e.target,
          name = el.getAttribute('data-name');
      setPieChart(name);
      setActiveClass(el);
    }
    e.stopPropagation();
  });

var setPieChart = function(name){
  var number = continents[name],
      fixedNumber = numberFixer(number),
      result = fixedNumber + ' ' + total;
  
  pie.style.strokeDasharray = result;
}

var setActiveClass = function(el) {
  for(var i = 0; i < buttons.children.length; i++) {
    buttons.children[i].classList.remove(activeClass);
    el.classList.add(activeClass);
  }
}

// Set up default settings
setPieChart('asia');
setActiveClass(buttons.children[0]);
</script>