• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="zc"></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var games = ['BRAvsCHI', 'COLvsURU', 'NEDvsMEX', 'CRCvsGRE', 'FRAvsNGA', 'GERvsALG', 'ARGvsSWI', 'BELvsUSA'];
    35.  
    36.     var _r_ = function(min, max) {
    37.       return Math.round(min + (max - min) * Math.random());
    38.     }
    39.  
    40.     // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
    41.     var data = {},
    42.       g, m, p, r;
    43.     for (g = 0; g < games.length; g++) {
    44.       data[g] = [];
    45.       for (m = 0; m < 90; m++) {
    46.         // try to simulate original chart, majority of data is on the lower part
    47.         r = Math.random();
    48.         if (r >= 0 && r < 0.85) {
    49.           data[g].push([m, _r_(0, 100)]);
    50.         } else if (r >= 0.85 && r < 0.95) {
    51.           data[g].push([m, _r_(50, 300)]);
    52.         } else {
    53.           data[g].push([m, _r_(200, 800)]);
    54.         }
    55.       }
    56.     }
    57.  
    58.     var cdata = {
    59.       type: 'scatter',
    60.       clustered: true,
    61.       title: {
    62.         adjustLayout: true,
    63.         text: 'Distance travelled by football players (added)'
    64.       },
    65.       plotarea: {
    66.         margin: 'dynamic'
    67.       },
    68.       scaleX: {
    69.         placement: 'opposite',
    70.         lineWidth: 0,
    71.         tick: {
    72.           visible: false
    73.         },
    74.         label: {
    75.           text: 'Game'
    76.         },
    77.         item: {
    78.           fontSize: 13,
    79.           fontWeight: 'bold'
    80.         },
    81.         offset: 0,
    82.         values: games
    83.       },
    84.       scaleY: {
    85.         guide: {
    86.           visible: false
    87.         },
    88.         lineColor: '#aaa',
    89.         tick: {
    90.           lineColor: '#aaa'
    91.         },
    92.         label: {
    93.           text: 'Distance travelled (m)'
    94.         },
    95.         offset: 0
    96.       },
    97.       tooltip: {
    98.         text: 'Minute %scale-key-value: %node-value meters travelled'
    99.       },
    100.       plot: {
    101.         clusterOffset: 5,
    102.         marker: {
    103.           borderWidth: 0,
    104.           size: 4,
    105.           alpha: 0.5
    106.         }
    107.       },
    108.       series: []
    109.     };
    110.  
    111.     for (g = 0; g < games.length; g++) {
    112.       var sdata = {
    113.         clustered: true,
    114.         values: data[g]
    115.       };
    116.       cdata['series'].push(sdata);
    117.     }
    118.  
    119.     window.addEventListener('load', function() {
    120.  
    121.       zingchart.render({
    122.         id: 'zc',
    123.         width: 800,
    124.         height: 400,
    125.         output: 'svg',
    126.         data: cdata
    127.       });
    128.  
    129.     });
    130.   </script>
    131. </body>
    132.  
    133. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="zc"></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var games = ['BRAvsCHI', 'COLvsURU', 'NEDvsMEX', 'CRCvsGRE', 'FRAvsNGA', 'GERvsALG', 'ARGvsSWI', 'BELvsUSA'];
    2.  
    3. var _r_ = function(min, max) {
    4.   return Math.round(min + (max - min) * Math.random());
    5. }
    6.  
    7. // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
    8. var data = {},
    9.   g, m, p, r;
    10. for (g = 0; g < games.length; g++) {
    11.   data[g] = [];
    12.   for (m = 0; m < 90; m++) {
    13.     // try to simulate original chart, majority of data is on the lower part
    14.     r = Math.random();
    15.     if (r >= 0 && r < 0.85) {
    16.       data[g].push([m, _r_(0, 100)]);
    17.     } else if (r >= 0.85 && r < 0.95) {
    18.       data[g].push([m, _r_(50, 300)]);
    19.     } else {
    20.       data[g].push([m, _r_(200, 800)]);
    21.     }
    22.   }
    23. }
    24.  
    25. var cdata = {
    26.   type: 'scatter',
    27.   clustered: true,
    28.   title: {
    29.     adjustLayout: true,
    30.     text: 'Distance travelled by football players (added)'
    31.   },
    32.   plotarea: {
    33.     margin: 'dynamic'
    34.   },
    35.   scaleX: {
    36.     placement: 'opposite',
    37.     lineWidth: 0,
    38.     tick: {
    39.       visible: false
    40.     },
    41.     label: {
    42.       text: 'Game'
    43.     },
    44.     item: {
    45.       fontSize: 13,
    46.       fontWeight: 'bold'
    47.     },
    48.     offset: 0,
    49.     values: games
    50.   },
    51.   scaleY: {
    52.     guide: {
    53.       visible: false
    54.     },
    55.     lineColor: '#aaa',
    56.     tick: {
    57.       lineColor: '#aaa'
    58.     },
    59.     label: {
    60.       text: 'Distance travelled (m)'
    61.     },
    62.     offset: 0
    63.   },
    64.   tooltip: {
    65.     text: 'Minute %scale-key-value: %node-value meters travelled'
    66.   },
    67.   plot: {
    68.     clusterOffset: 5,
    69.     marker: {
    70.       borderWidth: 0,
    71.       size: 4,
    72.       alpha: 0.5
    73.     }
    74.   },
    75.   series: []
    76. };
    77.  
    78. for (g = 0; g < games.length; g++) {
    79.   var sdata = {
    80.     clustered: true,
    81.     values: data[g]
    82.   };
    83.   cdata['series'].push(sdata);
    84. }
    85.  
    86. window.addEventListener('load', function() {
    87.  
    88.   zingchart.render({
    89.     id: 'zc',
    90.     width: 800,
    91.     height: 400,
    92.     output: 'svg',
    93.     data: cdata
    94.   });
    95.  
    96. });