Jump to content

Search the Community

Showing results for tags 'chartjs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 5 results

  1. DarthEduu

    Valores chartJS não se repetir

    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>
  2. 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>
  3. 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 !
  4. Antonio Carlos Cruz Junior

    Entrar com valores e retornar em Graficos

    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
  5. 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>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.