<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<title>Canvas Funnel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet">
</head>
<table id="tabela1" border="1">
<tr class="primeiraLinha">
<td>
<div class="titulo1">PASSO 1</div>
<div class="titulo2">Página Principal</div>
</td>
<td>
<div class="titulo1">PASSO 2</div>
<div class="titulo2">Preços</div>
</td>
<td>
<div class="titulo1">PASSO 3</div>
<div class="titulo2">Registro</div>
</td>
<td>
<div class="titulo1">PASSO 4</div>
<div class="titulo2">Registro Passo 2</div>
</td>
<td>
<div class="titulo1">PASSO 5</div>
<div class="titulo2">Dashboard</div>
</td>
</tr>
<tr class="segundaLinha">
<td>
<div class="titulo1">SESSIONS</div>
<div class="titulo3">4,029</div>
<div class="titulo4">0% a 55.3%</div>
</td>
<td>
<div class="titulo1">SESSIONS</div>
<div class="titulo3">5,942</div>
<div class="titulo4">55.3% a 33.7%</div>
</td>
<td>
<div class="titulo1">SESSIONS</div>
<div class="titulo3">3,627</div>
<div class="titulo4">33.7% a 41%</div>
</td>
<td>
<div class="titulo1">SESSIONS</div>
<div class="titulo3">886</div>
<div class="titulo4">41% a 70.6%</div>
</td>
<td>
<div class="titulo1">SESSIONS</div>
<div class="titulo3">548</div>
<div class="titulo4">70.6% a 10.9%</div>
</td>
</tr>
<tr class="terceiraLinha">
<td>
<div class="infoColuna">
<i class="fa fa-arrow-down red" aria-hidden="true"></i>
<div class="titulo1 red">PREJUÍZO</div>
<div class="titulo3 red">35.3%</div>
<div class="titulo4 red">(4,029)</div>
</div>
</td>
<td>
<div class="infoColuna">
<i class="fa fa-check green" aria-hidden="true"></i>
<div class="titulo1 green">LUCRO</div>
<div class="titulo3 green">65.3%</div>
<div class="titulo4 green">(7,089)</div>
</div>
</td>
<td>
<div class="infoColuna">
<i class="fa fa-arrow-down red" aria-hidden="true"></i>
<div class="titulo1 red">PREJUÍZO</div>
<div class="titulo3 red">15.3%</div>
<div class="titulo4 red">(4,029)</div>
</div>
</td>
<td>
<div class="infoColuna">
<i class="fa fa-arrow-down red" aria-hidden="true"></i>
<div class="titulo1 red">PREJUÍZO</div>
<div class="titulo3 red">25.3%</div>
<div class="titulo4 red">(1,009)</div>
</div>
</td>
<td>
<div class="infoColuna">
<i class="fa fa-check green" aria-hidden="true"></i>
<div class="titulo1 green">LUCRO</div>
<div class="titulo3 green">85.3%</div>
<div class="titulo4 green">(9,829)</div>
</div>
</td>
</tr>
</table>
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
body{
font-family: 'Roboto', sans-serif;
}
table {
border-collapse: collapse;
border:1px solid #e6e6e6;
}
#myCanvas{
top: 8px;
position: absolute;
z-index: -1;
}
.primeiraLinha td{
height: 80px;
width: 150px;
vertical-align:top;
}
.segundaLinha td{
height: 200px;
vertical-align:top;
}
.terceiraLinha td{
height: 50px;
text-align: center;
}
.titulo1{
padding-left: 7px;
padding-top: 7px;
font-size: 10px;
color: #999999;
font-weight: 700;
}
.titulo2{
padding-top: 10px;
padding-left: 7px;
font-size: 14px;
color: #333333;
font-weight: 700;
}
.titulo3{
padding-top: 10px;
padding-left: 7px;
font-size: 20px;
color: #404040;
font-weight: 700;
}
.titulo4{
padding-top: 3px;
padding-left: 7px;
font-size: 12px;
color: #999999;
font-weight: 700;
}
i.red{
border-radius: 60px;
padding: 5px;
border: 3px solid #fff;
background-color: #d9534f;
font-size: 13px !important;
color: white;
}
i.green{
border-radius: 60px;
padding: 5px;
border: 3px solid #fff;
background-color: #5cb85c;
font-size: 13px !important;
color: white;
}
.infoColuna{
top: -30%;
position: relative;
}
.red{
color: #d9534f;
padding-left: 0;
}
.green{
color: #5cb85c;
padding-left: 0;
}
$(function(){
// Id Canvas
var idCanvas = 'myCanvas';
// Cor que será usado no preenchimento do gráfico.
var corGrafico = 'gold';
// iD tabela
var idTabela = 'tabela1';
// Pontos de Inicio em cada coluna, mandar porcentagem de 0 a 100.
var pontos = [0, 55.3, 33.7, 41, 70.6, 20];
// Criar Gráfico
criarGrafico(idCanvas, pontos, corGrafico, idTabela);
});
function criarGrafico(idCanvas, pontos, corGrafico, idTabela){
var canvas = document.getElementById(idCanvas);
var ctx = canvas.getContext('2d');
// Seta Valores de altura e largura da tabela para o canvas
ctx.canvas.width = $('#' + idTabela).width();
ctx.canvas.height = $('#' + idTabela).height();
//Pega informações da tabela
var larguraColuna = $('#' + idTabela +' td').outerWidth();
var numColunas = $('#' + idTabela +' tr:first td').size();
var alturaPrimeiraLinha = $('.primeiraLinha').outerHeight();
var alturaSegundaLinha = $('.segundaLinha').outerHeight();
ctx.beginPath();
ctx.moveTo(0, (((1 - (pontos[0] / 100)) * alturaSegundaLinha) + alturaPrimeiraLinha)); // altura e largura do ponto inicial
// Seta linhas
for(var cont = 1; cont < pontos.length; cont++){
ctx.lineTo((larguraColuna * cont), (((1 - (pontos[cont] / 100)) * alturaSegundaLinha) + alturaPrimeiraLinha));
}
// Pega a soma da primeira e segunda linha, assim é possível descobrir qual o ponto final do gráfico
var pontoFinal = $('.primeiraLinha').height() + $('.segundaLinha').height();
// Fecha lado direito
ctx.lineTo(larguraColuna * numColunas, pontoFinal);
// Fecha Parte de baixo
ctx.lineTo(0, pontoFinal);
//Pinta novo "Quadrado"
ctx.fillStyle= corGrafico;
ctx.fill();
// Muda cor das linhas
ctx.strokeStyle='lightgray';
// Desenha propriedades definidas
ctx.stroke();
}
