"Canvas Funnel"
Bootstrap 3.3.0 Snippet by ricardolara

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2

Questions / Comments: