FS
Como gerar usando a C3.js via template
Olá.. Estou querendo usar esse template html do gráfico
de barras da biblioteca c3.js que o Adianti Builder utiliza.
Minha dúvida é na passagem dos dados da array data..
onde tem a variável graphData que recebe a array e a função
renderBarChart recebe esse vetor. Eu tentei adicionar
o vetor que tem no próprio site do c3.js.. exemplo:
Mudei esse parâmetro {$data|raw} por
var graphData = {$data|raw}
var graphData = ['data1', 30, 200, 100, 400, 150, 250]
Ao executar não mostrou nada em tela..
dai surgiu a dúvida.. como usar e funcionar certinho
essa geração do gráfico passando o vetor.
Os gráficos do Google Chart funciona certinho..
só esse desse template do c3.js que não consegui..
Quem puder ajudar com alguma dica.. ou testar..
eu agradeço.. Obrigado!
Site oficial: https://c3js.org/samples/chart_bar.html
Segue o template do gráfico citado:
Observação: Eu adicionei o js e css da biblioteca no <head>
Mesmo assim não mostra nada.. : (
de barras da biblioteca c3.js que o Adianti Builder utiliza.
Minha dúvida é na passagem dos dados da array data..
onde tem a variável graphData que recebe a array e a função
renderBarChart recebe esse vetor. Eu tentei adicionar
o vetor que tem no próprio site do c3.js.. exemplo:
Mudei esse parâmetro {$data|raw} por
var graphData = {$data|raw}
var graphData = ['data1', 30, 200, 100, 400, 150, 250]
Ao executar não mostrou nada em tela..
dai surgiu a dúvida.. como usar e funcionar certinho
essa geração do gráfico passando o vetor.
Os gráficos do Google Chart funciona certinho..
só esse desse template do c3.js que não consegui..
Quem puder ajudar com alguma dica.. ou testar..
eu agradeço.. Obrigado!
Site oficial: https://c3js.org/samples/chart_bar.html
Segue o template do gráfico citado:
Observação: Eu adicionei o js e css da biblioteca no <head>
Mesmo assim não mostra nada.. : (
<!--[main]-->
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='c3.min.css'>
<script src='d3.min.js' type='text/javascript'></script>
<script src='c3.min.js' type='text/javascript'></script>
</head>
<body>
<div id='chart-box' style="margin: auto; float: none; width: 100%">
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title" id='title'>TÍTULO DO GRÁFICO</div>
</div>
<div class="panel-body no-padding">
<div id='chart-container' height='280px'>
</div>
</div>
</div>
</div>
<script>
var graphData = {$data|raw};
renderBarChart(graphData);
function renderBarChart(data){
c3.generate({
bindto: '#chart-container',
legend: {
show: {$showLegend}
},
size: {
height: {$height}
},
data: {
x : 'x',
columns: data,
type: 'bar',
labels: {
format: function (v, id, i, j) {
if(v == null)
return null
return 'R$ '+number_format(v, 2, ',', '.');
}
}
},
axis: {
rotated: {$barDirection},
x: {
type: 'category'
},
y: {
tick: {
format: function(d){
if(d == null)
return null
return 'R$ '+number_format(v, 2, ',', '.');
}
}
}
}
});
}
</script>
</body>
</html>
<!--[/main]-->
Resolvido.. o colega Helder ajudou passando a dica..
desde já agradeço a ele.. Obrigado!
Git: https://gist.github.com/fabricio-dev-code/b7ebc1289e560c1723e71478d84f74f2