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 Guilherme Costa Lopes
      Estou usando o AgmCoreModule, para marcar endereços no google maps.
      No module, no import
           imports: [
               AgmCoreModule.forRoot({
                 apiKey: 'xxxxxxxxxxx'
              }),
           ]
      no export
            exports: [
                  AgmCoreModule
           ]
      No ts
           texto = 'teste';
             lat = -19.91506;
             lng = -44.00752;
             zoom = 15;
      No html
           <agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng">
             <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
           </agm-map>
      A principio ele mostra
       
      Mas depois dá este erro

      Ou este erro

      No servidor está dando este erro.

       
      O Chave key está  liberada
       
          main.cb562ea7df40e3f09b5f.bundle.js:2 Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=quarterly&callback=agmLazyMapsAPILoader&key=AIzaSyCD54jiJhEBda5MtJkgFJB-hfR6dv5V9jw&language=pt' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
       
           main.cb562ea7df40e3f09b5f.bundle.js:2 ERROR Error: Uncaught (in promise): Event: {"isTrusted":true}
               at x (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at x (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at main.cb562ea7df40e3f09b5f.bundle.js:2
               at e.invokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at Object.onInvokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at e.invokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at t.runTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at y (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at t.invokeTask [as invoke] (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at u (main.cb562ea7df40e3f09b5f.bundle.js:2)
      O  que pode ser ?
       
       
       
    • By Guilherme Costa Lopes
      component
           download(idArquivo: number): void {
               this.arquivosService.downloadArquivoOrcamento(idArquivo).subscribe(
                 data => {
                   const blob = new Blob([data.arquivo], { type: 'text/json; charset=utf-8' });
                   const url= window.URL.createObjectURL(blob);
                   window.open(url);
                 },
                 err => {
                   console.error(err);
                 }
               )
             }
      Service
           import { HttpClient, HttpHeaders } from '@angular/common/http';
           import { Injectable } from '@angular/core';
           import { SERVER_API_URL } from 'app/app.constants';
           import { Observable } from 'rxjs';
           @Injectable({
               providedIn: 'root'
           })
           export class ArquivosService {
               constructor(
                   private http: HttpClient
               ) {}
               downloadArquivoOrcamento(id: number, tipo: string): Observable<any> {
                   return this.http.get(SERVER_API_URL + '/api/orcamento-anexo/' + id, 
                   {
                       responseType: 'blob',
                       headers: new HttpHeaders().append('Content-Type', tipo)
                   });
               }
           }
      Retorno do backend

      Não retorna o arquivo conforme imagem anterior

       
      Dowload com erro

       
       
      Já pesquisei e fiz alguma alteração, mas não achei a solução. O que quero é simples. O arquivo vem do backend em bytesm nome e content-type. Só quero fazer o dowload.
      O que pode ser ?
       
    • By AlexandrePrezzi
      Olá ...
       
      Hospedamos uma aplicação feita em NODEJS  e REACT e ela esta em HTTPS  ,  porem essa aplicação consome uma API REST que esta em HTTP. 
       
      Com isso o navegador indica Mixed Content,  porem não temos como alterar essa API para HTTPS ....
       
      Existe alguma solução para esse caso  ?   Trabalhar com conteúdo misto ....
    • By rdavisp
      Senhores, boa tarde.

      Pesquisei muito antes de abrir esse post, inclusive aqui, neste fórum. Encontrei dúvidas parecidas as quais tentei adaptar ao meu caso porem sem sucesso.

      A questão é a seguinte:

      Foi desenvolvida uma API em ASP.NET Core 2.0, mas por algumas solicitações do cliente, necessitei migrar para a versão 3.1. Existe uma SPA em Angular 7 que faz a requisição à API através de um método POST passando os parâmetros para a API que retornava um conjunto de dados para aplicação montar a tela. Após a atualização parou de funcionar! Por isso, gostaria de pedir a ajuda de vocês, por que, eu já esgotei as minhas tentativas.

      **No Controller da API está da seguinte maneira:**
       
      1 2 3 4 5 6 7 8 [HttpPost] [Route("api/[controller]")] public IGResult Post(Filtro filtro) {     Console.WriteLine("filtro: " + filtro);     var app = new IgApplication();     return app.getInstrucoes(filtro); }
      **E no angular se encontra dessa forma:**
       
      1 return this._http.post<IgResult>(environment.url + 'api/IG',  this.Filtro, options)

      Ao debugar a API, percebo que os dados do parâmetro **body** chegam nulos. Já tentei das seguintes maneiras abaixo, mudar a implementação do POST na API porém sem sucesso:
       
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 > //public async Task<IActionResult> Post([FromBody] Filtro pessoa) >         //public HttpResponseMessage Post(Filtro pessoa) >         //public async Task<ActionResult<IList<Todo>>> Create([FromBody]TodoCreateViewModel model) >         //public Task<IActionResult> Post([FromBody] Filtro filtro) >         //public ActionResult<Filtro> Post([FromBody] Filtro filtro) >         //public HttpResponseMessage Post(Filtro filtro) >         //public string Post([FromBody] Filtro filtro) >         //public IActionResult Post([FromBody] Filtro filtro) >         //{ >         //var app = new IgApplication(); >         //return app.getInstrucoes(filtro); >         //return null;// Json(filtro); >         //} >         //public async System.Threading.Tasks.Task<string> Post(HttpRequestMessage request) >         //{ >         //    string body = await request.Content.ReadAsStringAsync(); >         //    return body; >         //}

      Por isso se possível, gostaria muito de contar com a colaboração de vocês.

      Desde já muito obrigado!
    • By BrendonPawn
      Olá a todos! Venho através desta postagem, solicitar a ajuda de alguém que conheça o Sequelize, e que possa me ajudar com a seguinte dúvida. Baseado no código a seguir:
      import { Sequelize, Model, DataTypes } from 'sequelize'; import { config } from '../config/config'; const sequelize = new Sequelize(config); export class Vehicle extends Model { public model!: string; public plate!: string; public owner!: string; } Vehicle.init({ model: DataTypes.STRING(32), plate: DataTypes.STRING(16), owner: DataTypes.INTEGER // id do dono }, { sequelize }); export class User extends Model { public name!: string; public email!: string; } User.init({ name: DataTypes.STRING(32), email: DataTypes.STRING }, { sequelize }); Vehicle.belongsTo(User, { foreignKey: 'vehicles', targetKey: 'id', as: 'user' }); User.hasMany(Vehicle, { foreignKey: 'owner', sourceKey: 'id', onUpdate: 'cascade', onDelete: 'set null' }); Ao efetuar uma consulta geral com o código:
      User.findAll({ raw: true, nest: true, include: [Vehicle] }).then((data) => { console.log(data); }); Eu esperava receber algo semelhante com isso:
      [{ id: 1, name: 'Brendon', email: 'mail@mail.com', vehicles: [{ // 2 veículos encontrados para o usuário 1 id: 1, model: 'GOL', plate: 'ABC 1234' },{ id: 2, model: 'SAVEIRO', plate: 'QWE 7890' }] },{ id: 2, name: 'Ricardo', email: 'mail@mail.com', vehicles: [] // nenhum veículo encontrado para o usuário 2 }] Porém, o que estou recebendo no meu console é o seguinte:
      [{ id: 1, name: 'Brendon', email: 'mail@mail.com', 'Vehicles.id': 1, 'Vehicles.model': 'GOL', 'Vehicles.plate': 'ABC 1234' },{ id: 1, name: 'Brendon', email: 'mail@mail.com', 'Vehicles.id': 2, 'Vehicles.model': 'SAVEIRO', 'Vehicles.plate': 'QWE 7890' },{ id: 2, name: 'Ricardo', email: 'mail@mail.com', 'Vehicles.id': null, 'Vehicles.model': null, 'Vehicles.plate': null }]  
×

Important Information

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