Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

camargoa

Gráficos dinâmicos -

Recommended Posts

Boa noite pessoal, 

 

Não tenho conhecimento apurado em JS, por isso peço desculpas antecipadamente. Estou fazendo uma apresentação para um grande projeto, e queria apresentar um chart em que se tenha uma evolução constante dos dados. No excel, essa trajetória ficaria muito mal feita, então queria utilizar outro método no qual a apresentação ficasse mais fluída e assim melhor apresentavel ao cliente. Gostaria de montar um chart de 10 elementos e que evoluissem ao decorrer do tempo. Um exemplo simples pode ser visto no video abaixo

 

https://www.youtube.com/watch?v=T6iFHM-kjks

 

Existe algum site que já me traga o chart, sendo possível só inserir os números, ou um site com os códigos já escritos ?

 

Agradeço antecipadamente a atenção

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • 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 ZecaLoteiro
      Bom dia, preciso fazer o alinhamento de um grid com os eixos de um gráfico e estou tendo dificuldade em obter o posicionamento dos elementos do gráfico.
       
      Ex: A chartarea(0) mesmo quando definido como 100 não ocupa 100% da largura do chart. Ou seja é 100% do que?
      Coloquei umas bordas para facilitar a visualização.
      Alguém já passou por isso? Poderia dar um help? 
      Saberia informar em relação a qual objeto é a largura do chartarea?
       
       
      grafico.ChartAreas(0).BorderColor = Color.Red grafico.ChartAreas(0).Position.Width = 100 grafico.ChartAreas(0).Position.Height = 100 grafico.ChartAreas(0).BorderDashStyle = ChartDashStyle.Solid grafico.ChartAreas(0).BorderWidth = 2 https://prnt.sc/jqo3bv

    • Por leonardo-benitez
      Boa noite,
      Estou usando este plugin para construir um diagrama em forma de árvore:
      http://www.jqueryscript.net/demo/Animated-Organization-Chart-Tree-Diagram-Plugin-Stiff-Chart/
       
      Gostaria que um dos "ramos" (data-parent) já estivesse aberto ao carregar a página.
      Alguém tem alguma ideia de como fazer isso? 
    • Por marcossantana10
      Fala galera. Comecei a usar o Google Chart para gerar gráficos a partir dos dados do meu banco. Ótima ferramenta, mas esbarrei num problema aqui e queria saber se alguém já passou por ele e se conseguiu resolver.
       
      Quando coloco um gráfico, funciona normal.
      O problema é quando eu quero colocar mais de um gráfico na mesma página, já que os gráficos chamam o mesmo método. Tentei renomear mas não funcionou.
      Segue o código dos gráficos:
       
       
      <script type="text/javascript" src="https://www.google.com/jsapi"></script> //gráfico 1 <script type="text/javascript"> google.load("visualization", "1.1", {packages:["bar"]}); google.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', '%'], ["Masculino", <?php echo $percent_masc ?>], ['Feminino', <?php echo $percent_fem ?>] ]); var options = { title: 'Percentual de pacientes', width: 380, legend: { position: 'none' }, chart: { subtitle: 'Divisão por sexo' }, axes: { x: { 0: { side: 'top', label: ''} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> //gráfico2 <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Effort', 'Amount given'], ['My all', 100], ['My all', 50], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> O erro é o seguinte: You called the draw() method with the wrong type of data rather than a DataTable or DataView
×

Informação importante

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