how to assign dynamic value in canvasjs chart using angularjs

Question

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>

Suyash Singh Bitti · Accepted Answer · 2017-02-21 06:43:11Z

2

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

answered Feb 21, 2017 at 6:43

Suyash Singh Bitti

4024 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to assign dynamic value in canvasjs chart using angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related