[Chartjs]-Creating charts dynamically using ChartJS and AngularJS

by

1👍

✅

This can help you a little bit of how to dynamically create what you need.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $timeout) {

    $scope.jsonResult = 
    [
        {
            "chartName": "Gauge1",
            "score": 87
        },
        {
            "chartName": "Gauge2",
            "score": 87
        },
        {
            "chartName": "Gauge3",
            "score": 89
        },
        {
            "chartName": "Gauge4",
            "score": 88
        }
    ];

    $scope.initChart = function(idElement) {
        $scope.jsonResult[idElement].id = idElement;
        $timeout(function () {
            for (var i = 0; i < $scope.jsonResult.length; i++) {
                $scope.loadChart($scope.jsonResult[i]);
            }                
        });
    }    

    /*$scope.serviceChart = function() {
        $http.get('data.json').then(function(res) {
            $scope.charts = res.data;
        });
    }*/

    $scope.loadChart = function(idElement) {
        var value = idElement.score;
        var element = $("#myChart"+idElement.id);
        DrawGauge(element, value);
    }

    function DrawGauge(element, value) {
        var _config = {
            type: 'doughnut',
            data: {
                labels: [
                    "",
                    ""
                ],
                datasets: [{
                    data: [value, 100 - value],
                    backgroundColor: [
                        '#3d9447',
                        '#a7adba'
                    ],
                    hoverBackgroundColor: [
                        '#3d9447',
                        '#a7adba'
                    ]
                }]
            },
            options: {
                cutoutPercentage: 80,
                legend: {
                    display: false
                },
                tooltips: {
                    enabled: true
                },
                elements: {
                    center: {
                        text: value.toFixed(2),
                        color: '#000000',
                        fontStyle: 'Arial',
                        sidePadding: 20,
                        fontSize: 50,
                        textAlign: 'center'
                    }
                }
            }
        };

        new Chart(element, _config);
    }

    //$scope.serviceChart();
});
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
        
        
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="chart in jsonResult track by $index" ng-init="initChart($index)" style="width: 150px; height: 150px;">
            <canvas id="myChart{{ $index }}"></canvas>
        </div>
        <script src="script.js"></script>
    </body>

</html>

Leave a comment