Olá, quero aprofundar meu conhecimento em programação, e gostaria de saber se é possível criar um grafico com 3 pontas com um botão em cada uma, e quando clicar em um deles o gráfico aumentasse naquela direção.
Estou trabalhando em um dashbord baseado em boostrap, estou deixando ele bastante dinâmico, e nele coloquei um gráfico de rosca, o problema que não manjo como fazer o JS buscar os dados de forma dinâmica no banco de dados.
HTML:
<!-- Grafico -->
<div class="card-body">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart"></canvas>
</div>
<div class="mt-4 text-center small">
<span class="mr-2">
<i class="fas fa-circle text-primary"></i> Anúncio
</span>
<span class="mr-2">
<i class="fas fa-circle text-success"></i> Site
</span>
<span class="mr-2">
<i class="fas fa-circle text-info"></i> Outros
</span>
</div>
</div>
</div>
</div>
</div>
JS:
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Anuncio", "Site", "Outros"],
datasets: [{
data: [55, 30, 15], // *os dados deverão ser impressos aqui*
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
hoverBorderColor: "rgba(234, 236, 244, 1)",
}],
},
options: {
maintainAspectRatio: false,
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
},
legend: {
display: false
},
cutoutPercentage: 80,
},
});
Os dados precisam ser somados a cada cadastro no BD, sou seja, a cada cadastro o cliente indicara que a OS veio de um anuncio por exemplo, os campos deveram somar quantas OS vieram de anuncio, site e outros.
Bom dia,
Tenho um exemplo de gráfico e gostaria de saber como eu passo valores vindo do banco para as variaveis do grafico (elas estao inseridas manualmente no arquivo) e eu gostaria de forma dinamica via PHP pegando do meu banco MySQL.
já pesquisei mas o que fiz não consegui puxar os valores, ate tentei colocar em session mas ai trouxe somente o ultimo valor e nao todos.
var $visitorsChart = $('#movimentacao')
var visitorsChart = new Chart($visitorsChart, {
data : {
labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
datasets: [{
type : 'line',
data : [100, 120, 170, 167, 180, 177, 160],
backgroundColor : 'transparent',
borderColor : '#007bff',
pointBorderColor : '#007bff',
pointBackgroundColor: '#007bff',
fill : false
// pointHoverBackgroundColor: '#007bff',
// pointHoverBorderColor : '#007bff'
},
{
type : 'line',
data : [60, 80, 70, 67, 80, 77, 100],
backgroundColor : 'tansparent',
borderColor : '#ced4da',
pointBorderColor : '#ced4da',
pointBackgroundColor: '#ced4da',
fill : false
// pointHoverBackgroundColor: '#ced4da',
// pointHoverBorderColor : '#ced4da'
}]
},
meu PHP esta assim:
$busca = mysqli_query($con,"SELECT EXTRACT(MONTH FROM DATA) mes, SUM(quantidade) AS qtd FROM dosagem_usina WHERE operacao='saida' GROUP BY mes");
Prezados,
Estou testando meu primeiro cartão virtual interativo. Que nada mais é que um PDF com alguns códigos (a maioria basicão) que faz abrir alguns comandos no celular. Porém, estou empacado em três coisas que gostaria de pedir ajuda de vocês:
01) Colocando o endereço URL do Facebook no PDF, ele abre o facebook no browser do celular, mas eu gostaria que abrisse o APP do celular.
02) Gostaria de colocar um botão "Share" onde a pessoa clica e abre o "encaminhar" do Whatsap
03) Queria colocar um "salvar Contato", onde a pessoa clica no botão e abre aquela tela de salvar o contato no celular com tudo preenchido.
Essas minhas dúvidas são possíveis de serem feitas?
(Na imagem eu coloquei um exemplo do layout que estou fazendo. A linha de cima eu consegui fazer com: tel - WhasatApi - Mailto e URL. A parte de baixo que eu estou pastando, rs)
Sou iniciante em prgramação web e estou com uma dúvida. Tenho um gráfico que é gerado em uma página js e chamado a partir de uma página php, porém como o arquivo é de um exemplo e está com valores fixos, preciso saber como alterá-lo passando informações de uma consulta sql .
Este é o trecho do meu código que está no index.php e que chama o gráfico
<div class="row">
<div class="col-md-4">
<div class="card card-chart">
<div class="card-header card-header-success">
<div class="ct-chart" id="dailySalesChart"></div>
</div>
<div class="card-body">
<h4 class="card-title">Abertura de Chamados</h4>
<p class="card-category">
<span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
</div>
<div class="card-footer">
<div class="stats">
<i class="material-icons">access_time</i> updated 4 minutes ago
</div>
</div>
</div>
</div>
e este é o código que está no dashboard.js e que cria o gráfico
]
};
optionsDailySalesChart = {
lineSmooth: Chartist.Interpolation.cardinal({
tension: 0
}),
low: 0,
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
chartPadding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
}
var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
md.startAnimationForLineChart(dailySalesChart);
Boa noite. Gostaria de ajuda com a formatação desse gráfico!
É possível ajustar a width dele, sem que seja através da fullwidth?
Eu gostaria de diminuir o espaço final, após a coluna dezembro
Olá, quero aprofundar meu conhecimento em programação, e gostaria de saber se é possível criar um grafico com 3 pontas com um botão em cada uma, e quando clicar em um deles o gráfico aumentasse naquela direção.
Compartilhar este post
Link para o post
Compartilhar em outros sites