CODEWITHSUNDEEP
canvasjs
Swapna
Swapna

Reputation: 403

how to assign dynamic value in canvasjs chart using angularjs

how to show dynamic data in canvasjs using angularjs. im getting data from api and want to display in chart. i don't know how to assign variable to the y points of chart.im getting the value and stored in the variable "ValueinCm" instead of static variable need to assign dynamic value.

    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script>
        var filledValue;
        var app = angular.module('myApp', ["ng-fusioncharts"])
        app.controller('MyController', function ($scope, $http) {
            $http.get('https://example.com', {
                headers: { 'Authorization': 'Basic password==' }
            })
            .then(function (response) {
                $scope.names = response.data;
                $scope.decodedFrame = atob($scope.names.dataFrame);
                $scope.decodedFrameNew = $scope.decodedFrame.substring(4);
                $scope.distanceinFeet = $scope.decodedFrameNew * 12.5*2.54;
                $scope.Value = $scope.distanceinFeet / 148;
                $scope.ValueinCm = $scope.Value.toFixed(2);
                 filledValue = $scope.ValueinCm;
                 console.log(filledValue);
            });
        });
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",//theme1
                title: {
                    text: "Basic Column Chart - CanvasJS"
                },
                animationEnabled: false,   // change to true
                data: [
                {
                    // Change type to "bar", "area", "spline", "pie",etc.
                    type: "column",
                    dataPoints: [
                        { label: "apple", y: filledValue },
                        { label: "orange", y: 15 },
                        { label: "banana", y: 25 },
                        { label: "mango", y: 30 },
                        { label: "grape", y: 28 }
                    ]
                }
                ]
            });
            chart.render();
        }
        </script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyController">
        <div id="chartContainer" style="height: 300px; width: 100%;"></div></div>
</body>

Upvotes: 0

Views: 647

Answers (1)

Suyash Singh Bitti
Suyash Singh Bitti

Reputation: 402

After fetching the data, you need to store it into a variable(say, data) which should be an array of objects. You need to make sure, this variable stores the data in CanvasJS prescribed format. Later you can use this variable in place of your static data.

dataPoints: data

Here is a working jsFiddle

Upvotes: 2

Related Questions