Create graph with Chartjs inside the controller of another js file

Question

Create graph with Chartjs inside the controller of another js file

Navigation

#1 by (0 votes)

0

I'm trying to solve a problem with my web page. Here is some information about it:

The page is to generate graphs in different models (area, line, bar);

The user, from a select choose which type of graph to create (area, line, bar);

Data for graph generation is in an external json file. But each user has their json file with data different from each other;

I currently do the graphics with MorrisJs , but because of some limitations I'm trying to migrate to ChartJs .

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 chartjs looks 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 am now learning to work with web programming. If someone can help me thank you

angularjs json

asked by anonymous 05.09.2017 / 16:55

1 answer

Why is header-logo and header-links not on the same line? Problem with component width with form-inline bootstrap

score 0 · Answer 1

I've been researching here and I think it would 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 display any errors, but does not draw graph