Jump to content
  • 0
D Design

Gráfico interativo

Question

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.

Screenshot_17.png

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rapagael
      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)

    • By Zarddy77
      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
       
      Desde já, muito obrigado!
       
      new Chartist.Line('#ct-visits', {
      labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
      series: [
      [5, 2, 7, 4, 5, 3, 5, 4, 2, 3, 4, 5]
      , [2, 5, 2, 6, 2, 5, 2, 4, 5, 2, 4, 7]
      ]
      }, {
      top: 0,
      low: 1,
      showPoint: true,
      //fullWidth: true,
      plugins: [
      Chartist.plugins.tooltip()
      ],
      axisY: {
      labelInterpolationFnc: function (value) {
      return (value / 1) + '$';
      }
      },
      showArea: true,
      //resize: true
      });
       
    • By Rodrigo Ferreira Santos
      Salve lista, senhores estou montando um dashboard e ele tem varios graficos com a seguinte estrutura:
       
      try {
          //Sales chart
          var ctx = document.getElementById("sales-chart");
          if (ctx) {
            ctx.height = 150;
            var myChart = new Chart(ctx, {
              type: 'line',
              data: {
                labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],
                type: 'line',
                defaultFontFamily: 'Poppins',
                datasets: [{
                  label: "Foods",
                  data: [0, 30, 10, 120, 50, 63, 10],
                  backgroundColor: 'transparent',
                  borderColor: 'rgba(220,53,69,0.75)',
                  borderWidth: 3,
                  pointStyle: 'circle',
                  pointRadius: 5,
                  pointBorderColor: 'transparent',
                  pointBackgroundColor: 'rgba(220,53,69,0.75)',
                }, {
                  label: "Electronics",
                  data: [0, 50, 40, 80, 40, 79, 120],
                  backgroundColor: 'transparent',
                  borderColor: 'rgba(40,167,69,0.75)',
                  borderWidth: 3,
                  pointStyle: 'circle',
                  pointRadius: 5,
                  pointBorderColor: 'transparent',
                  pointBackgroundColor: 'rgba(40,167,69,0.75)',
                }]
              },
              options: {
                responsive: true,
                tooltips: {
                  mode: 'index',
                  titleFontSize: 12,
                  titleFontColor: '#000',
                  bodyFontColor: '#000',
                  backgroundColor: '#fff',
                  titleFontFamily: 'Poppins',
                  bodyFontFamily: 'Poppins',
                  cornerRadius: 3,
                  intersect: false,
                },
                legend: {
                  display: false,
                  labels: {
                    usePointStyle: true,
                    fontFamily: 'Poppins',
                  },
                },
                scales: {
                  xAxes: [{
                    display: true,
                    gridLines: {
                      display: false,
                      drawBorder: false
                    },
                    scaleLabel: {
                      display: false,
                      labelString: 'Month'
                    },
                    ticks: {
                      fontFamily: "Poppins"
                    }
                  }],
                  yAxes: [{
                    display: true,
                    gridLines: {
                      display: false,
                      drawBorder: false
                    },
                    scaleLabel: {
                      display: true,
                      labelString: 'Value',
                      fontFamily: "Poppins"
                    },
                    ticks: {
                      fontFamily: "Poppins"
                    }
                  }]
                },
                title: {
                  display: false,
                  text: 'Normal Legend'
                }
              }
            });
          }

        } catch (error) {
          console.log(error);
        }
      Todos em um aquivo main.js eu chamo ele no html assim:
       
                                      <div class="col-lg-6">
                                          <div class="au-card m-b-30">
                                              <div class="au-card-inner">
                                                  <h3 class="title-2 m-b-40">Comparativo Visitante/Membros</h3>
                                                  <canvas id="sales-chart"></canvas>
                                              </div>
                                          </div>
                                      </div>
       
       
      Meu problema e que estou usando um modelo ja pronto de dashboard e preciso setar dados neste grafico eu nao sei como fazer, vi na internet que eu preciso criar um arquivo json mas como faço para incorporar no js !
    • By igorpmf
      Eu tenho uma tabela PAGAMENTO que contem a data que o pagamento foi realizado:

       
      só que eu queria gerar um gráfico que separasse os pagamentos por montantes, por exemplo:
      MÊS 05 - R$ 1,600
      MÊS 07 - R$ 1,350
      MÊS 08 - R$ 900
       

       
       
    • By 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>  

×

Important Information

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