JSFiddle - React, Tailwind, and code Playground
HTML
<div id="holder" style="width:500px; height:400px;"></div>
JavaScript
var x_data1 = 100;
var y_data1 = 100;
var data1 = [10,40,70,20,30];
var x_data2 = 150;
var y_data2 = 150;
var data2 = [20,60,100,20];
graph_circ(data1,x_data1,y_data1); //call function
graph_circ(data2,x_data2,y_data2); //call function
function graph_circ(data,x_circle,y_circle){
var color = ["red", "green", "blue", "yellow", "pink", "gray","black"];
var paper;
var arc;
var sectorAngleArr = [];
var total = 0;
var startAngle = 0;
var endAngle = 0;
var x1,x2,y1,y2 = 0;
paper = Raphael("holder"); //circle
//CALCULATE THE TOTAL
for(var k=0; k < data.length; k++){
total += data[k];
}
//CALCULATE THE ANGLES THAT EACH SECTOR SWIPES AND STORE IN AN ARRAY
for (var i = 0; i < data.length; i++) {
var angle = Math.ceil(360 * data[i] / total);
sectorAngleArr.push(angle);
}
//drawArcs();
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]);
return el;
}
//**************create table dynamicaly****************
var table = document.createElement('table');
table.style.position = "absolute"
table.style.top = y_circle+"px";
table.style.left = x_circle*2+"px";
var tr = document.createElement('tr');
var roww = table.insertRow(0);
var cell0 = roww.insertCell(0); //coluna1
cell0.innerHTML = "Graph ";
cell0.colSpan = "3";
for(i=0;i<data.length;i++){
var tr = document.createElement('tr');
var row = table.insertRow(1);
var cell1 = row.insertCell(0); //coluna1
var cell2 = row.insertCell(1); //coluna2
var cell3 = row.insertCell(2); //coluna3
//coluna 1
cell1.style.backgroundColor = color[i];
cell1.width="20px";
cell1.heigth = "10px";
//coluna 2
cell2.innerHTML =...