Ir para conteúdo
  • 0
Pedroalves

problema com chart no angular

Pergunta

 

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

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

    • Por 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 
    • Por JoaoVituBR
      Olá. eu estou refazendo meu sistema de login só que eu me deparei com um problema e eu não estou conseguindo resolver!
      eu estou tentando fazer o callback na função de fora da pesquisa do mysql.

      Codigo:
      socket.on('auth_login', (data, callback) => { if (!data['user']) callback('user_fail'); if (!data['pass']) callback('pass_fail'); var Query = "SELECT * FROM usuarios WHERE user = ? OR email = ?" mysql.query(Query, [data['user'], data['user']], function(error, results) { if (error) return console.log(error); // [...] callback('value'); // [...] }); }); Quando eu dou callback dentro do mysql.query está dando o erro: this._callback.apply is not a function
      Obrigado!
×

Informação importante

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