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 ckcesar
      Alguém poderia me ajudar com rotas no Angular cli...
       
      Eu preciso descobrir um evento que trata a seta voltar do Android, exemplo estou na minha home e se eu for na seta do Android eu volto na minha outra tela de navegação e eu não quero que isso aconteça, quando clicar em voltar eu quero que permaneça na mesma home..
       
      As rotas de trocar de tela eu já fiz, o meu problema mesmo é no voltar.
       
       
    • By SilvioHC
      Olá estou começando a a prender node js mas já no primeiro teste algo de errado não está certo 
      const express = require('express'); const app = express(); app.listen(934); //Sempre Na Ultima Linha não sei dizer se é só o tutorial q é antigo 

    • By Hulkstar
      Boa tarde,estou seguindo um tutorial do DevMedia de como configurar um chat nodejs (Link tutorial Aqui),porém na "Listagem 8. Incluindo o módulo Socket.IO." quando eu faço a alteração do script de acordo com o tutorial e tento rodar o aplicativo no servidor,me aparece o seguinte erro, "http://prntscr.com/ow7kd4",caso eu retire o seguinte script "var io = require('socket.io')(app);",já dei uma pesquisada na internet,porém até agora não consegui achar uma solução para o erro,se alguém souber e poder me ajudar por favor,ficarei muito grato.
       
      Abaixo tem o arquivo app.js
      var app = require('http').createServer(resposta); var fs = require('fs'); var io = require('socket.io')(app); app.listen(3000); console.log("Aplicação está em execução..."); function resposta (req, res) { var arquivo = ""; if(req.url == "/"){ arquivo = __dirname + '/index.html'; }else{ arquivo = __dirname + req.url; } fs.readFile(arquivo, function (err, data) { if (err) { res.writeHead(404); return res.end('Página ou arquivo não encontrados'); } res.writeHead(200); res.end(data); } ); } Abaixo tem o arquivo indes.html
      <!DOCTYPE html> <html> <head> <title>ChatJS - FrontEnd Magazine - DevMedia</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="historico_mensagens"></div> <form id=’chat’> <input type='text' id='texto_mensagem' name='texto_mensagem' /> <input type='submit' value='Enviar mensagem!' /> </form> </body> </html>  
    • By Good
      Boa tarde,
      eu estou estudando como funciona um sistema de API  + Postback e estou com dúvidas...
      A linguagem mais prática para isto é NodeJS? 
       
      Por exemplo, vou liberar permissão para os usuários pegarem informações da conta de cadastro dele.. E por exemplo, quando eles atualizarem as informações de cadastro como nome, cidade, estado,  etc.. o sistema deve enviar no mesmo momento um postback com as informações..
       
      Como vocês fariam este sistema? Os grandes portais utilizam como? Tipo o mercado livre, google...
       
      aguardo resposta, 
      att
    • By Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
×

Important Information

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