Ola pessoal,
 
Alguém pode de dar uma força.
 
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.
 
Obrigado!
 
 

Bom dia Pessoal,
Será que alguém pode me ajudar? Estou com problema com o chartjs. estou gerando grafico ok, porem quando eu preciso gerar o mesmo pela segunda vez passando outros parametros ao invés de substituir ele sobrepõe sobre o antigo, e quando eu passo o mouse sobre o grafico ele fica intercalando entre o antigo e o novo, como faço para limpar o grafico antes de criar o novo? tentei diretamente no canvas mas qualquer metodo de limpeza faz com que pare de funcionar. abaixo meu código.
 
<script> function montaGraficoProducao() { var ctx; var myChart; var dt1 = document.getElementById("data_pd1").value; var dt2 = document.getElementById("data_pd2").value; $.ajax({ type: "POST", url: "processa/processa_grafico_producao.jsp", data: { data1: dt1, data2: dt2 } }).done(function (msg) { if (msg.replace(/\s/g, '') !== "erro") { var info = msg.trim().split("*"); var l = info[0]; var l1 = l.split(","); var s = info[1]; var s1 = s.split(","); var labels = []; var series = []; l1.forEach(function (mes) { labels.push(mes); }); s1.forEach(function (vl) { series.push(vl); }); ctx = document.getElementById('prodChart').getContext('2d'); myChart = new Chart(ctx, { type: $("#c_tipo_graf").val(), responsive: true, hoverMode: 'index', stacked: true, data: { labels: labels, datasets: [{ label: 'Ton/Mês', fill: false, backgroundColor: "rgba(1, 150, 249, 1)", borderColor: "rgba(1, 150, 249, 1)", data: series }] } }); } else { alert("erro"); } }); } </script>  

Pessoal, bom dia! 
Tô com um problema aqui, seguinte, tenho esse gráfico, os valores já estão funcionando belezinha, mas os valores em tempo, por exemplo no final onde ambos são 98, ou qualquer outro valor que se repita, tipo: 10 > 10 > 30 > 50 > 90 > 60 > 60 ele fique em um ponto só eliminando o repetido, ou seja, onde está 10 ou 60 vire apenas 10 ou 60 e não se repetindo.
Não sei se fui claro kkk mas aqui está um print e meu código.

 
<script language="javascript" type="text/javascript"> function rampa_mostura() { //temperaturas var temperatura_glucanase = form_eficiencia_epata_1.glucasane.value; var valor_1 = form_eficiencia_epata_1.glucasane.value; var valor_2 = valor_1; var valor_3 = form_eficiencia_epata_1.protease.value; var valor_4 = valor_3; var valor_5 = form_eficiencia_epata_1.beta_amilase.value; var valor_6 = valor_5; var valor_7 = form_eficiencia_epata_1.alfa_amilase.value; var valor_8 = valor_7; var valor_9 = form_eficiencia_epata_1.inativacao.value; var valor_10 = valor_9; //tempos var tempo_1 = 0; var tempo_2 = parseInt(tempo_1)+parseInt(form_eficiencia_epata_1.glucanase_min.value); var tempo_3 = parseInt(tempo_2)+parseInt(valor_3-valor_2); var tempo_4 = parseInt(tempo_3)+parseInt(form_eficiencia_epata_1.protease_min.value); var tempo_5 = parseInt(tempo_4)+parseInt(valor_5-valor_3); var tempo_6 = parseInt(tempo_5)+parseInt(form_eficiencia_epata_1.beta_amilase_min.value); var tempo_7 = parseInt(tempo_6)+parseInt(valor_7-valor_6); var tempo_8 = parseInt(tempo_7)+parseInt(form_eficiencia_epata_1.alfa_amilase_min.value); var tempo_9 = parseInt(tempo_8)+parseInt(valor_9-valor_8); var tempo_10 = parseInt(tempo_9)+parseInt(form_eficiencia_epata_1.inativacao_min.value); var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { //tempo labels: [tempo_1,tempo_2,tempo_3,tempo_4,tempo_5,tempo_6,tempo_7,tempo_8,tempo_9,tempo_10], datasets: [{ label: "Rampa de temperatura - Mostura", backgroundColor: 'transparent', borderColor: '#FFB22B', borderWidth: 3, radius: 5, //temperatura data: [valor_1,valor_2,valor_3,valor_4,valor_5,valor_6,valor_7,valor_8,valor_9,valor_10], }] }, // Configuration options go here options: { elements: { line: { tension: 0, // disables bezier curves } }, title:{ display: true, fontSize: 20, text: "RAMPA DE TEMPERATURA" }, labels:{ fontStyle: "bold" }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Tempo em minutos' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Temperatura em ºC' } }] } } }); } </script>  

Pessoal, primeiramente boa tarde!
Seguinte, estou utilizando o chartJS para manipular um gráfico, mas estou com um problema, os valores que eu seto no data dele, forjam valores automáticos na temperatura, mas eu queria setar manualmente esses valores da temperatura, alguém sabe como faço para manipular esses dados? (apenas da temperatura).

Esse é meu código JS
<script> var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { // The type of chart we want to create type: 'line', // The data for our dataset data: { labels: ["0", "5", "10", "15", "20", "25", "30", "35","40","45","50","55","60","65","70","75","80","85","90","95","100","105","110","115","120","125","130","135"], datasets: [{ label: "Rampa de temperatura - mostura", backgroundColor: 'transparent', borderColor: '#FFB22B', borderWidth: 3, radius: 5, data: [102, 130, 201, 340,220,150,450,560,670,560,810,150,160,150,105,103,120,110,180,310,410,510,310,110,310,410,510,110,], }] }, // Configuration options go here options: { title:{ display: true, fontSize: 20, text: "RAMPA DE TEMPERATURA" }, labels:{ fontStyle: "bold" }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Tempo em minutos' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Temperatura em ºC' } }] } } }); </script>

 

Boa tarde,
Amigos tenho uma dúvida, estou utilizando um componente para geração de gráficos em Javascript (ChartJS) que consiste em 
gerar um gráfico baseado em um combo select (Pedidos Gerados, Remessas Geradas) pois bem a minha função ao realizar a troca
de opção no select gera o gráfico porém o parâmetro data da função não está atualizando. Segue o código HTML e Javascript utilizado: 

 
<div class="col-sm-6"style="width:45%;"> <div class="col-sm-5"> <select id="mySelect" class="form-control" onchange="myFunction()"> <option value="1">Pedidos Gerados</option> <option value="2">Remessas Geradas</option> <option value="3">Remessas Baixadas</option> <option value="4">Remessas Entregues</option> </select> </div> <canvas id="GraficoBarra" ></canvas> </div> O código Javascript é esse: 

 
<script type="text/javascript"> var valores = ['1','2','3','4','5','6','7','8','9','10','11','12']; var options = { responsive:true }; var data = { labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"], datasets: [ { label: "Dados primários", fillColor: "rgba(0, 179, 0, 0.9)", strokeColor: "rgba(0, 190, 0, 0.8)", highlightFill: "rgba(0, 179, 0, 0.55)", highlightStroke: "rgba(0, 190, 0,55)", data: [valores[0], valores[1],valores[2], valores[3], valores[4],valores[5],valores[6], valores[7], valores[8],valores[9],valores[10],valores[11],valores[12]] }, { label: "Dados secundários", fillColor: "rgba(207, 20, 0, 0.9)", strokeColor: "rgba(180, 20, 0, 0.8)", highlightFill: "rgba(207, 20, 0, 0.55)", highlightStroke: "rgba(207, 20, 0,55)", data: [10, 50, 35, 15, 18,9,11, 22, 33,55,32,33] } ] }; function myFunction() { var x = document.getElementById("mySelect").value; if(x == '1'){ var valores = ['2','4','6','8','10','12','7','8','9','10','11','5']; var ctx = document.getElementById("GraficoBarra").getContext("2d"); var BarChart = new Chart(ctx).Bar(data, options); } else if(x == '2'){ var valores = ['8','4','12','8','10','6','7','8','9','10','11','1']; var ctx = document.getElementById("GraficoBarra").getContext("2d"); var BarChart = new Chart(ctx).Bar(data, options); } else if(x == '3'){ var valores = ['3','9','6','8','10','11','7','8','9','10','11','8']; var ctx = document.getElementById("GraficoBarra").getContext("2d"); var BarChart = new Chart(ctx).Bar(data, options); } else if(x == '4'){ var valores = ['4','7','6','8','10','6','11','8','9','10','11','6']; var ctx = document.getElementById("GraficoBarra").getContext("2d"); var BarChart = new Chart(ctx).Bar(data, options); } } window.onload = function(){ var ctx = document.getElementById("GraficoBarra").getContext("2d"); var BarChart = new Chart(ctx).Bar(data, options); } </script> Eu deixei os parâmetros da segunda barra chumbado porque estou tentando fazer a primeira barra funcionar primeiro para esclarecer melhor para todos. 

Aos que puderem me auxiliar, desde já muito obrigado !