Jump to content
  • 0
Pedroalves

problema com chart no angular

Question

 

o problema é o seguinte eu criei um gráfico e agora quero buscar dados mas so consigo por a funcionar se por assim estou a usar o angular 7, nodejs e mongodb

let TotalSell = function() {
    var data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            label: 'My First dataset',
            fillColor: 'rgba(220,220,220,0.2)',
            strokeColor: 'rgba(220,220,220,1)',
            pointColor: 'rgba(220,220,220,1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(220,220,220,1)',
      data: [65, 59, 80, 81, 56, 55, 40, 84, 64, 120, 132, 87]
        }]
    };
var options = {

        maintainAspectRatio: false,

        // Sets the chart to be responsive
        responsive: true,

        ///Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: true,

        //String - Colour of the grid lines
        scaleGridLineColor: 'rgba(0,0,0,.05)',

        //Number - Width of the grid lines
        scaleGridLineWidth: 1,

        //Boolean - Whether the line is curved between points
        bezierCurve: false,

        //Number - Tension of the bezier curve between points
        bezierCurveTension: 0.4,

        //Boolean - Whether to show a dot for each point
        pointDot: true,

        //Number - Radius of each point dot in pixels
        pointDotRadius: 4,

        //Number - Pixel width of point dot stroke
        pointDotStrokeWidth: 1,

        //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
        pointHitDetectionRadius: 20,

        //Boolean - Whether to show a stroke for datasets
        datasetStroke: true,

        //Number - Pixel width of dataset stroke
        datasetStrokeWidth: 2,

        //Boolean - Whether to fill the dataset with a colour
        datasetFill: true,

        // Function - on animation progress
        onAnimationProgress: function() {
        },

        // Function - on animation complete
        onAnimationComplete: function() {
        },

        //String - A legend template
        legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
    };
    // Get context with jQuery - using jQuery's .get() method.
    var ctx = $("#TotalSell").get(0).getContext("2d");
    // This will get the first returned node in the jQuery collection.
    var chart1 = new Chart(ctx).Line(data, options);
    //generate the legend
    var legend = chart1.generateLegend();
    //and append it to your page somewhere
    $('#TotalSellLegend').append(legend);
};

<div class="col-sm-6">
            <h5 class="over-title margin-bottom-15" style="text-align:center;">Total Sell</h5>
            <canvas id="TotalSell" class="full-width"></canvas>
            <div class="margin-top-20">
              <div class="inline pull-left">
                <div id="TotalSellLegend" class="chart-legend"></div>
              </div>
            </div>
          </div>

o meu problema é como ponho a mostrar dados sem inserir dados aqui data: [65, 59, 80, 81, 56, 55, 40, 84, 64, 120, 132, 87] }] o meu objectivo é quando por a minha base de dados ele for buscar los a minha base de dados ou seja não quero ter que inserir manualmente no data:[] basicamente quero passar de dados staticos para dinamicos o que estou a fazer de errado

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 waguinho
      Boa tarde !!
      Minha dúvida é a seguinte.
       
      Estou chamando uma função que está em outro módulo do Nodejs usando Try / Cacth, nessa função é fazer um INSERT no DB, porém nessa função existe outro try /cacth que se o INSERT falhar 
      ele irá tentar novamente o INSERT, no máximo 3 vezes, se der erro essas 3 vezes, quero mandar um Throw para quem chamou a função que é outro módulo. Mas a sintaxe :
      return throw não existe, então tem alguma opção que posso usar, ou retorno um objeto tipo  { erro: 'insert falhou' } e trato manualmente com um IF() ?
       
      Obrigado
    • By Bisnaguitos
      Estou tentando pegar dados de algumas ordens de uma API. Primeiro preciso pesquisar todas as ordens com uma requisição e depois de pegar o id dessas ordens fazer outra requisição para outra uri da API para pegar os dados de cada ordem. O problema é que não consigo resgatar os dados de retorno através de um array.
      Segue uma tentativa sem sucesso
      // request de busca const data = await request.get("api.com/search", async(err, data, body)=>{ var arr = [] for(i=0;i<data.length;i++){ const result = await request.get("api.com/order/"+data.id, (e, d, b)=>{ arr.push(d.title) return arr }) } return result; }) console.log(data) Fiz esse código pelo celular só pra exemplificar um dos métodos. Alguém sabe como posso fazer isso funcionar ou se tem uma maneira mais fácil? Obrigado
    • By DeAngelis84
      Estou começando no desenvolvimento Angular com Node js, e estou preocupado com a seguinte questão:
       
      Para sites que necessitam de atualização e acréscimo de conteúdo constante como em um portal de noticias ou um e-commerce de porte médio para grande, 
      Ter que ficar dando Build em toda aplicação sempre que tiver um pequena alteração no site, é meio despendioso não acham? Qual seria a solução para isso?
      ou não existe solução e o melhor é partir para sites Multi-Pages?
    • By Guilherme Costa Lopes
      Estou fazendo assim:
       
      paginacao.service.ts
          import { Injectable, EventEmitter } from '@angular/core';     @Injectable({       providedIn: 'root'     })     export class PaginacaoService {       public static modelo = new EventEmitter<any>();       public static primeiraPagina = new EventEmitter<any>();       public static paginaAnterior = new EventEmitter<any>();       public static proximaPagina = new EventEmitter<any>();       public static ultimaPagina = new EventEmitter<any>();       public static paginaAtual = new EventEmitter<any>();       public static totalPagina = new EventEmitter<any>();       public static totalRegistros = new EventEmitter<any>();     }  
      paginacao.component.ts
        import { Component, OnInit } from '@angular/core';     import { PaginacaoService } from '../../../service/paginacao/paginacao.service';     @Component({       selector: 'app-paginacao',       templateUrl: './paginacao.component.html',       styleUrls: ['./paginacao.component.css']     })     export class PaginacaoComponent implements OnInit {       /**        * variáveis de paginação        */       public totalPagina: number;       public totalRegistros: number;       public paginaAtual: number;       public modelo: any;       constructor(         protected paginacaoService: PaginacaoService       ) {}       ngOnInit() {         this.preencherVariaveisComponente();       }       private preencherVariaveisComponente() {         PaginacaoService.paginaAtual.subscribe(           paginaAtual => {             this.paginaAtual = paginaAtual;           }         );       }     }  
      paginacao.component.html
       
          Página <b>{{paginaAtual}}</b> de <b>{{totalPagina}}</b> -                Total de Registros: <b>{{totalRegistros}}</b>  
      A variável nunca é atualizada, mesmo o serviço trazer o valor, conforme imagem:
       
      Se preencho valor assim:
          this.paginaAtual = 1;         PaginacaoService.paginaAtual.subscribe(           paginaAtual => {             this.paginaAtual = paginaAtual;           }         );  
      Funciona, mas se o valor vier pelo servico, conforme imagem, não funciona. O que pode ser ?

    • By lucasvilela01
      Olá a todos. Preciso de algum direcionamento sobre um aplicativo similar a uma rede social (é uma rede social), um projeto da equipe que eu trabalho. Preciso fazer o envio de fotos e vídeos para um servidor de arquivos (por exemplo, um Apache da vida) e atualmente estou usando somente Node JS e Express nesse projeto.
       
      Meus companheiros (desenvolvedores Android e iOS) enviam no momento as imagens como Base64 codificado e o banco MongoDB recebe e traz essa informação para eles. Na última reunião com os donos do projeto, nos notificaram a necessidade do envio de vídeos também.
       
       Sabendo que Base64 demora para ser decodificado e pesa muito nas queries, como posso fazer o envio de arquivos para servidores, sem passar necessariamente por HTML (como todos os tutoriais que eu vi na internet mostram)?
       
        Tem jeito? Agradeço desde já! <3 
×

Important Information

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