0

Estou tentando resolver um problema com minha página web. Abaixo coloco algumas informações sobre ela:

  1. A página é para gerar graficos em diferentes modelos (area,linha,barra);
  2. O usuário, a partir de um select escolhe qual tipo de grafico deseja criar (area,linha,barra);
  3. Os dados para geração dos gráficos encontram-se em um arquivo json externo. Só que cada usuário tem seu arquivo json com dados diferentes um do outro;
  4. Atualmente, faço os graficos com MorrisJs, mas por conta de algumas limitações estou tentando migrar para o ChartJs.
  5. Com o Morrisjs era assim:

app.controller('GraphCtrl', function ($scope) {

$scope.changeGraph = function () {
    $('#graphs').empty();
    $scope.init($scope.graphType)
}

$scope.init = function (type) {
    $.getJSON('/data/data4.json', function (json) {
        Morris[type]({
            pointSize: 2,
            element: 'graphs',
            data: json,
            xkey: 'y',
            ykeys: ['a','b','c', 'd', 'e'],
            ymax: 345,
            gridTextColor: ['black'],
            gridTextSize: 14,
            //legendTextSize: [50],
            //legend: { fontSize: [30]},
            //legend:{fontSize: 20},
            lineColors:['red','green','purple','orange','blue'],
            labels: ['CPU (% utilização)', 'Memória (% utilização)', 'Power (W)', 'CPU Temp0 (ºC)', 'CPU Temp1 (ºC)']
        });
    }); }  });

O que estou tentando fazer para usar o chartjs está assim:


$scope.init = function (type) {

    $.getJSON('/data/data4.json', function (json) {
       var ctx = document.getElementById(["graphs"]).GetContext("2d");
       var graphs = new Chart(ctx)[type](data, options); }); }  });

Porém, acredito que tenha alguma coisa errada, pois não está funcionando. Estou aprendendo agora a trabalhar com programação para web. Se alguém puder me ajudar agradeço

3
  • Qual mensagem de erro você está recebendo do ChartJS?
    – OnoSendai
    5/09/2017 às 15:10
  • Nenhuma, o gráfico simplesmente não é desenhado e não aparece nenhuma mensagem de erro
    – DutraS
    6/09/2017 às 13:15
  • Confirmando algumas coisas então: O arquivo JSON está sendo corretamente recebido? (Você pode obter essa informação na aba 'network' do modo de desenvolvedor.) a var ctx contém algum valor, ou falha ao tentar obter o contexto? Sua inicialização do Chart (via var graphs) está passando 2 parâmetros, data e options. Quais são seus valores?
    – OnoSendai
    6/09/2017 às 13:27

1 Resposta 1

0

Fui pesquisando aqui e acho que ficaria assim:

$scope.init = function (type) {
        $.getJSON('/data/data4.json', function (json) {
            var ctx = document.getElementById(['graphs']);
            var drawgraphs = new Chart(ctx, {
            type: [type],
            data: {
                labels: ["Red", "Green", "Purple", "Orange", "Blue"],
                datasets: [{
                    label: ['CPU (% utilização)', 'Memória (% utilização)', 'Power (W)', 'CPU Temp0 (ºC)', 'CPU Temp1 (ºC)'],
                    data: json,
                    backgroundColor: [ 'rgba(255, 99, 132, 0.2)',
                                       'rgba(54, 162, 235, 0.2)',
                                       'rgba(255, 206, 86, 0.2)',
                                       'rgba(75, 192, 192, 0.2)',
                                       'rgba(153, 102, 255, 0.2)'],
                    borderColor: [ 'rgba(255,99,132,1)',
                                   'rgba(54, 162, 235, 1)',
                                   'rgba(255, 206, 86, 1)',
                                   'rgba(75, 192, 192, 1)',
                                   'rgba(153, 102, 255, 1)'],
                    borderWidth: 1
                            }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
    });
        }
});

O meu arquivo json esta assim:

[{"y": "17-07-27 00:00:00.00", "a": 0.0, "b": 0.0, "c": 176, "d": 23.00, "e": 24.00}, {"y": "17-07-27 00:00:01.50", "a": 0.0, "b": 0.0, "c": 204, "d": 23.00, "e": 24.00}, {"y": "17-07-27 00:00:02.13", "a": 0.0, "b": 0.0, "c": 204, "d": 24.00, "e": 25.00}, {"y": "17-07-27 00:00:02.82", "a": 0.0, "b": 0.0, "c": 204, "d": 24.00, "e": 25.00},{"y": "17-07-27 00:00:03.46", "a": 0.0, "b": 0.0, "c": 204, "d": 24.00, "e": 25.00}];

não apresenta nenhum erro, só que não desenha o gráfico

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .