Multiple CanvasJS Charts in Angular JS with Dynamic Chart Container - CanvasJS JavaScript Charts

Multiple CanvasJS Charts in Angular JS with Dynamic Chart Container - CanvasJS JavaScript Charts

by subhashe

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<!DOCTYPE html>
<html>
<head>
    <title>canvasJS By Subhash</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   
</head>
<body>
    <div style="height:20px;"></div>
    <div class="container" ng-app ng-controller="MyCtrl">
        <form ng-submit="myFunc()">           
            <input type="submit">
        </form>
        <div class="row" >
            <div class="col-sm-6" ng-repeat="(c,g) in items">
                <div class="panel panel-primary">
                    <div class="panel-heading">{{c}}: {{g}}</div>
                    <div class="panel-body">
                        <div id="chartContainer{{c}}" style="height: 200px; width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
        <script src="canvasJS.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
        <script src="canvasjs-2.2/canvasjs.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

JavaScript

// data related to AngularJS


function MyCtrl($scope) {
   
    $scope.myFunc = function () {
        var countries = {
            "India": "column",
            "Australia": "line",
            "Saudi": "doughnut",
            "Canada": "area",
            "Iran": "spline",
            "Russia": "bar",
            "UAE": "stackedArea",
            "China": "stackedColumn",
            "US": "stackedBar"
        };

        $scope.items = countries;
    // data related to CanvasJS Charts
        angular.forEach(countries, function (value, index) {
        
            //alert(index);
            var dps = [{
                x: 1,
                y: 10
            }]; //dataPoints. 
            var chart = "chartContainer" + index;
            chart = new CanvasJS.Chart("chartContainer" + index, {
                title: {
                    text: "Live Data"
                },
                axisX: {
                    title: "Axis X Title"
                },
                axisY: {
                    title: "Units"
                },
                data: [{
                    type: value,
                    dataPoints: dps
                }]
            });
            chart.render();

            var xVal = dps.length - 1;
            var yVal = 15;
            var updateInterval = 1000;

            var updateChart = function () {
                yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
                dps.push({
                    x: xVal,
                    y: yVal
                });
                xVal--;
                chart.render();

            };
            setInterval(function () {
                updateChart()
            }, updateInterval);

        });
    }
    

}