Ir para conteúdo
  • 0
Antonio Carlos Cruz Junior

Entrar com valores e retornar em Graficos

Pergunta

E aí pessoal.

 

Estou com uma dúvida. 

 

Sou novato na programação. Estou tentando escrever um script para quando o usuário entrar com os valores fazer uns cálculos e retornar os dados em gráficos do Chart.JS.

Alguém tem algum material para que eu possa acompanhar essa parte de entrada de dados?

 

Agradeço

Compartilhar este post


Link para o post
Compartilhar em outros sites

0 respostas a esta questão

Recommended Posts

Até agora não há respostas para essa pergunta

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por DarthEduu
      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>  

    • Por DarthEduu
      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>

       

    • Por rflanon
      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 !

    • Por maya10
      Estou tentando carregar uma arquivo, o qual gera um gráfico da biblioteca ChartJs. Abrindo o arquivo separadamente, funciona normalmente, mas quando faço o carregamento via AJAX, não funciona. Já pesquisei bastante, tentei de tudo e nada. A pagina carrega mais o gráfico não é gerado.

      Se alguém tiver alguma dica.

      Segue código abaixo:

      Código responsável pelo carregamento:
      //função grafico barra1 function atualizar7() { if (window.XMLHttpRequest) { x7 = new XMLHttpRequest(); } else if (window.ActivexObject) { x7 = new ActivexObject("Microsoft.XMLHTTP"); } if (x7 != undefined) { x7.onreadystatechange = function() { if (x7.readyState == 4) { if (x7.status == 200) { document.getElementById("grafico_barra1").innerHTML = x7.responseText; } } }; x7.open("GET", "__grafico_barra1.php", true); x7.send(""); } } var checar7 = setInterval(function() { atualizar7(); }, 7000);//atualiza a cada 7 segundos Código da pagina que gera o gráfico:
      <?php require "funcoes.php"; ?> <link href="../0_graficos/ChartJs/css/demo.css" rel="stylesheet" type="text/css"> <script src="../0_graficos/ChartJs/legenda/legend.js"></script> <script src="../0_graficos/ChartJs/Chart.js"></script> <div style="width:100%;float:left;"> <canvas id="barsChart1" width="100%" height="46%"></canvas> </div> <div id="barsLegend1" style="width:15%;float:right; position: absolute;"></div> <script> if(!!(window.addEventListener)) window.addEventListener('DOMContentLoaded', main); else window.attachEvent('onload', main); function main() { barsChart1(); } function barsChart1() { var data = { labels : [<?php $data_2 = mktime(23, 59, 59, date('m')-1, date("t"), date('Y')); //ultimo dia do mes //$lastmonth = mktime (0, 0, 0, date("m")-1, date("d"), date("Y")); //$primeiro_dia=date('Y/m/d',$data_1); //$ultimo_dia=date('d',$data_2); //$dia_30=date('d',$data_2); $ultimo_dia=$data_h; $primeiro_dia=date('Y-m-d', strtotime("-15 days",strtotime($data_h))); $dia_1=date('d', strtotime( $primeiro_dia ) ); $z=$primeiro_dia; while($z <= $ultimo_dia) { $dia=date('N', strtotime( $z ) ); if($dia==1){$d="S";}else if ($dia==2){$d="T";}else if ($dia==3){$d="Q";}else if ($dia==4){$d="Q";}else if ($dia==5){$d="S";}else if ($dia==6){$d="S";}else if ($dia==7){$d="D";} echo ("'".$d ."',"); $z=date('Y-m-d', strtotime("+1 days",strtotime($z))); } ?> ], datasets : [ { fillColor : "rgba(205, 102, 0,0.8)", strokeColor : "rgba(205, 102, 0,0.8)", pointColor : "rgba(205, 102, 0,0.8)", // pointStrokeColor : "#fff", data : [<?php //codigo de elevado na tabela tipo ocorrencia $elevador=15; // $data_1 = mktime(0, 0, 0, date('m') , 1 , date('Y')); //primeiro dia do mes // $data_2 = mktime(23, 59, 59, date('m'), date("t"), date('Y')); //ultimo dia do mes $ultimo_dia=$data_h; $primeiro_dia=date('Y-m-d', strtotime("-15 days",strtotime($data_h))); $z=$primeiro_dia; while($z <= $ultimo_dia) { //total $sql_ocor_1 = "SELECT * FROM TB_OCORRENCIAS where COD_TIPO='".$elevador."' and DATA='".$z."'" ; $rs_ocor_1 = mysqli_query($conn_operacao, $sql_ocor_1); $res_ocor_1 = mysqli_fetch_assoc($rs_ocor_1) ; $total_ocor_1 = mysqli_num_rows($rs_ocor_1); echo ($total_ocor_1 .","); $z=date('Y-m-d', strtotime("+1 days",strtotime($z))); } ?> ], label : 'Elevadores' }, { fillColor : "rgba(255, 165, 0,0.8)", strokeColor : "rgba(255, 165, 0,0.8)", pointColor : "rgba(255, 165, 0,0.8)", // pointStrokeColor : "#fff", data : [<?php //codigos de escadas no tabela tipo atividades $escada1=39; $escada2=41; $cod_ocor1=array(39,41); $cod_ocor= implode(",",$cod_ocor1); $ultimo_dia=$data_h; $primeiro_dia=date('Y-m-d', strtotime("-15 days",strtotime($data_h))); $z=$primeiro_dia; while($z <= $ultimo_dia) { //total $sql_ocor_2 = "SELECT * FROM TB_OCORRENCIAS where COD_TIPO IN(".$cod_ocor.") and DATA='".$z."'" ; $rs_ocor_2 = mysqli_query($conn_operacao, $sql_ocor_2); $res_ocor_2 = mysqli_fetch_assoc($rs_ocor_2) ; $total_ocor_2 = mysqli_num_rows($rs_ocor_2); echo ($total_ocor_2 .","); $z=date('Y-m-d', strtotime("+1 days",strtotime($z))); } ?> ], label : 'Escadas' } ] }; var ctx = document.getElementById("barsChart1").getContext("2d"); new Chart(ctx).Bar(data); responsive: true; legend(document.getElementById("barsLegend1"), data); } </script>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.