How to get animated charts in a fluid like manner with zingchart?

Question

I am trying to display the charts using Angularjs tags and its working properly but the animation is not working for me and if there is any way to make the animation in a continuse manner. Any suggestions, please Thank you

Graph:1

$scope.mybatchChart = {
                    type: "pie", 
                    backgroundColor: "#FFFFFF",
                    plot: {
                      borderColor: "#FFFFFF",
                      borderWidth: 5,
                      // slice: 90,
                     animation:{
                         effect:"2",
                         method:"3",
                         sequence:"ANIMATION_BY_PLOT",
                         speed:"ANIMATION_FAST"
                     },
                      valueBox: {
                        placement: 'out',
                        text: '%t\n%npv%',
                        fontFamily: "Open Sans"
                      },
                      tooltip:{
                        fontSize: '10',
                        fontFamily: "Open Sans",
                        padding: "5 10",
                        text: "%npv%"
                      }},
                    title: {
                      fontColor: "#fff",
                      align: "left",
                      offsetX: 10,
                      fontFamily: "Open Sans",
                      fontSize: 20
                    },
                    subtitle: {
                      offsetX: 10,
                      offsetY: 10,
                      fontColor: "#8e99a9",
                      fontFamily: "Open Sans",
                      fontSize: "10",
                      align: "left"
                    },
                    plotarea: {
                      margin: "20 0 0 0"  
                    },
                    series : [
                        {
                            values : [571.0],
                            text: "Schedul Batch",
                          backgroundColor: '#50ADF5',
                        },
                        {
                          values: [364.0],
                          text: "Finished Batch",
                          backgroundColor: '#FF7965'
                        }
                    ]
                };

HTML

    <div zingchart id="p1chart" zc-json="mybatchChart" zc-width="99%" zc-height="99%" ng-show="graph6" ></div>

score 0 · Accepted Answer · answered May 10 '19 at 09:40

I was not able to reproduce your issue, perhaps you didn't define the variables ( ANIMATION_BY_PLOT & ANIMATION_FAST) before using them...

Following is working code:

angular.module('myApp', ['zingchart-angularjs']).controller('myCtrlr', function($scope) {
  var ANIMATION_BY_PLOT = 1;
  var ANIMATION_FAST = 500;

  $scope.myConfig = {
    type: "pie",
    backgroundColor: "#FFFFFF",
    plot: {
      borderColor: "#FFFFFF",
      borderWidth: 5,
      // slice: 90,
      valueBox: {
        placement: 'out',
        text: '%t\n%npv%',
        fontFamily: "Open Sans"
      },
      tooltip: {
        fontSize: '18',
        fontFamily: "Open Sans",
        padding: "5 10",
        text: "%npv%"
      },
      animation: {
        effect: 2,
        method: 5,
        speed: ANIMATION_FAST,
        sequence: ANIMATION_BY_PLOT
      }
    },
    source: {
      text: 'gs.statcounter.com',
      fontColor: "#8e99a9",
      fontFamily: "Open Sans"
    },
    title: {
      fontColor: "#fff",
      text: 'Demo for minh',
      align: "left",
      offsetX: 10,
      fontFamily: "Open Sans",
      fontSize: 25
    },
    subtitle: {
      offsetX: 10,
      offsetY: 10,
      fontColor: "#8e99a9",
      fontFamily: "Open Sans",
      fontSize: "10",
      align: "left"
    },
    plotarea: {
      margin: "20 0 0 0"
    },
    series: [{
        values: [571.0],
        text: "Schedul Batch",
        backgroundColor: '#50ADF5',
      },
      {
        values: [364.0],
        text: "Finished Batch",
        backgroundColor: '#FF7965'
      }
    ]
  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="http://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>

<body ng-app="myApp">
  <div ng-controller='myCtrlr'>
    <zingchart id="myPieChart" zc-json="myConfig" zc-height=500 zc-width=600></zingchart>
  </div>
</body>

How to get animated charts in a fluid like manner with zingchart?

1 Answers1