• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    8.  
    9.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10.   <style>
    11.     #reload {
    12.       background: #00BAF0;
    13.       border: none;
    14.       border-radius: 4px;
    15.       color: white;
    16.       cursor: pointer;
    17.       font-size: 16px;
    18.       padding: 4px 8px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.   <div id='myChart'></div>
    25.   <button id="reload"><i class="fa fa-refresh"></i> Replay Animation</button>
    26.   <script>
    27.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    28.     var myConfig = {
    29.       type: 'bar',
    30.       series: [{
    31.           values: [
    32.             [1, 22],
    33.             [1.25, 34],
    34.             [1.5, 55],
    35.             [1.75, 71]
    36.           ],
    37.           backgroundColor: '#7986CB',
    38.  
    39.           animation: {
    40.             effect: 'ANIMATION_EXPAND_RIGHT',
    41.             speed: 3
    42.           }
    43.         },
    44.         {
    45.           values: [
    46.             [2.75, 42],
    47.             [3, 39],
    48.             [3.25, 50],
    49.             [3.5, 70]
    50.           ],
    51.           backgroundColor: '#4DD0E1',
    52.  
    53.           animation: {
    54.             effect: 'ANIMATION_EXPAND_TOP',
    55.             speed: 3
    56.           }
    57.         },
    58.  
    59.         {
    60.           values: [
    61.             [4.5, 35],
    62.             [4.75, 42],
    63.             [5, 67],
    64.             [5.25, 89]
    65.           ],
    66.           backgroundColor: '#64B5F6',
    67.  
    68.           animation: {
    69.             effect: 'ANIMATION_EXPAND_BOTTOM',
    70.             speed: 3
    71.           }
    72.         },
    73.         {
    74.           values: [
    75.             [6.25, 25],
    76.             [6.5, 34],
    77.             [6.75, 67],
    78.             [7, 85]
    79.           ],
    80.           backgroundColor: '#4DB6AC',
    81.  
    82.           animation: {
    83.             effect: 'ANIMATION_EXPAND_LEFT',
    84.             speed: 3
    85.           }
    86.         }
    87.       ]
    88.     };
    89.  
    90.     zingchart.render({
    91.       id: 'myChart',
    92.       data: myConfig,
    93.       height: 350,
    94.       width: '100%'
    95.     });
    96.  
    97.     var reload = document.querySelector('#reload');
    98.     if (reload) {
    99.       reload.addEventListener('click', function() {
    100.         zingchart.exec('myChart', 'reload');
    101.       });
    102.     }
    103.   </script>
    104. </body>
    105.  
    106. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    8.  
    9.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <button id="reload"><i class="fa fa-refresh"></i> Replay Animation</button>
    15. </body>
    16.  
    17. </html>
    1. #reload {
    2.   background: #00BAF0;
    3.   border: none;
    4.   border-radius: 4px;
    5.   color: white;
    6.   cursor: pointer;
    7.   font-size: 16px;
    8.   padding: 4px 8px;
    9. }
    1. var myConfig = {
    2.   type: 'bar',
    3.   series: [{
    4.       values: [
    5.         [1, 22],
    6.         [1.25, 34],
    7.         [1.5, 55],
    8.         [1.75, 71]
    9.       ],
    10.       backgroundColor: '#7986CB',
    11.  
    12.       animation: {
    13.         effect: 'ANIMATION_EXPAND_RIGHT',
    14.         speed: 3
    15.       }
    16.     },
    17.     {
    18.       values: [
    19.         [2.75, 42],
    20.         [3, 39],
    21.         [3.25, 50],
    22.         [3.5, 70]
    23.       ],
    24.       backgroundColor: '#4DD0E1',
    25.  
    26.       animation: {
    27.         effect: 'ANIMATION_EXPAND_TOP',
    28.         speed: 3
    29.       }
    30.     },
    31.  
    32.     {
    33.       values: [
    34.         [4.5, 35],
    35.         [4.75, 42],
    36.         [5, 67],
    37.         [5.25, 89]
    38.       ],
    39.       backgroundColor: '#64B5F6',
    40.  
    41.       animation: {
    42.         effect: 'ANIMATION_EXPAND_BOTTOM',
    43.         speed: 3
    44.       }
    45.     },
    46.     {
    47.       values: [
    48.         [6.25, 25],
    49.         [6.5, 34],
    50.         [6.75, 67],
    51.         [7, 85]
    52.       ],
    53.       backgroundColor: '#4DB6AC',
    54.  
    55.       animation: {
    56.         effect: 'ANIMATION_EXPAND_LEFT',
    57.         speed: 3
    58.       }
    59.     }
    60.   ]
    61. };
    62.  
    63. zingchart.render({
    64.   id: 'myChart',
    65.   data: myConfig,
    66.   height: 350,
    67.   width: '100%'
    68. });
    69.  
    70. var reload = document.querySelector('#reload');
    71. if (reload) {
    72.   reload.addEventListener('click', function() {
    73.     zingchart.exec('myChart', 'reload');
    74.   });
    75. }