Create Chartjs chart inside another js file controller

Asked

Viewed 92 times

0

I am trying to solve a problem with my web page. Below I put some information about it:

  1. The page is to generate graphs in different models (area, line, bar);
  2. The user, from a select chooses which type of chart he wants to create (area, line, bar);
  3. The data for graph generation is found in an external json file. Only each user has his or her json file with data different from each other;
  4. Currently, I do the Graphics with Morrisjs, but because of some limitations I’m trying to migrate to the Chartjs.
  5. With Morrisjs it was like this: 
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)']
        });
    }); }  });

What I’m trying to do to use the chartjs is like this:

$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); }); }  });

But I think there’s something wrong, because it’s not working. I’m learning now to work with web programming. If anyone can help me, I’d appreciate it

angularjs json

  • What error message you are getting from Chartjs?

  • None, the graph is simply not drawn and no error message appears

  • Confirming a few things then: Is the JSON file being correctly received? (You can get this information from the developer mode 'network' tab.) var ctx contains some value, or fails to get context? Your Chart startup (via var graphs) is passing 2 parameters, data and options. What are your values?

1 answer

0

I’ve been researching here and I think I’d look like this: 

$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
                        }
                    }]
                }
            }
        });
    });
        }
});

My json file looks like this:

[{"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}];

does not show any error, only does not draw the graph

Browser other questions tagged angularjs json

You are not signed in. Login or sign up in order to post.