• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .chart--container {
    10.       height: 100%;
    11.       width: 100%;
    12.       min-height: 530px;
    13.     }
    14.  
    15.     .zc-ref {
    16.       display: none;
    17.     }
    18.   </style>
    19. </head>
    20. ​
    21.  
    22. <body class="zc-body">
    23.   ​
    24.   <div id="myChart" class="chart--container">
    25.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    26.   </div>
    27.  
    28.   <script>
    29.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
    30.     // -----------------------------
    31.     let games = ['BRA vs CHI', 'COL vs URU', 'NED vs MEX', 'CRC vs GRE', 'FRA vs NGA', 'GER vs ALG', 'ARG vs SWI', 'BEL vs USA'];
    32.  
    33.     // HELPER METHODS
    34.     // -----------------------------
    35.     let _r_ = (min, max) => {
    36.       return Math.round(min + (max - min) * Math.random());
    37.     };
    38.  
    39.     // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
    40.     let chartData = {},
    41.       g, m, r;
    42.     for (g = 0; g < games.length; g++) {
    43.       chartData[g] = [];
    44.       for (m = 0; m < 90; m++) {
    45.         // try to simulate original chart, majority of data is on the lower part
    46.         r = Math.random();
    47.         if (r >= 0 && r < 0.85) {
    48.           chartData[g].push([m, _r_(0, 100)]);
    49.         } else if (r >= 0.85 && r < 0.95) {
    50.           chartData[g].push([m, _r_(50, 300)]);
    51.         } else {
    52.           chartData[g].push([m, _r_(200, 800)]);
    53.         }
    54.       }
    55.     }
    56.  
    57.     // CHART CONFIG
    58.     // -----------------------------
    59.     let chartConfig = {
    60.       type: 'scatter',
    61.       clustered: true,
    62.       title: {
    63.         text: 'Distance Travelled by Football Players',
    64.         adjustLayout: true
    65.       },
    66.       plot: {
    67.         clusterOffset: '5px',
    68.         marker: {
    69.           alpha: 0.5,
    70.           borderWidth: 0,
    71.           size: '4px'
    72.         }
    73.       },
    74.       plotarea: {
    75.         margin: 'dynamic'
    76.       },
    77.       scaleX: {
    78.         values: games,
    79.         item: {
    80.           fontSize: '13px',
    81.           fontWeight: 'bold'
    82.         },
    83.         label: {
    84.           text: 'Game'
    85.         },
    86.         lineWidth: 0,
    87.         offset: 0,
    88.         placement: 'opposite',
    89.         tick: {
    90.           visible: false
    91.         }
    92.       },
    93.       scaleY: {
    94.         guide: {
    95.           visible: false
    96.         },
    97.         label: {
    98.           text: 'Distance travelled (m)'
    99.         },
    100.         lineColor: '#aaa',
    101.         offset: 0,
    102.         tick: {
    103.           lineColor: '#aaa'
    104.         }
    105.       },
    106.       tooltip: {
    107.         text: 'Minute %scale-key-value: %node-value meters travelled'
    108.       },
    109.       series: []
    110.     };
    111.  
    112.     for (g = 0; g < games.length; g++) {
    113.       let sdata = {
    114.         values: chartData[g],
    115.         clustered: true
    116.       };
    117.       chartConfig['series'].push(sdata);
    118.     }
    119.  
    120.     // RENDER CHARTS
    121.     // -----------------------------
    122.     // window:load event for Javascript to run after HTML
    123.     // because this Javascript is injected into the document head
    124.     window.addEventListener('load', () => {
    125.       // Javascript code to execute after DOM content
    126.       zingchart.render({
    127.         id: 'myChart',
    128.         data: chartConfig,
    129.         output: 'svg'
    130.       });
    131.     });
    132.   </script>
    133. </body>
    134.  
    135. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .chart--container {
    2.   height: 100%;
    3.   width: 100%;
    4.   min-height: 530px;
    5. }
    6.  
    7. .zc-ref {
    8.   display: none;
    9. }
    1. // DEFINE DATA
    2. // -----------------------------
    3. let games = ['BRA vs CHI', 'COL vs URU', 'NED vs MEX', 'CRC vs GRE', 'FRA vs NGA', 'GER vs ALG', 'ARG vs SWI', 'BEL vs USA'];
    4.  
    5. // HELPER METHODS
    6. // -----------------------------
    7. let _r_ = (min, max) => {
    8.   return Math.round(min + (max - min) * Math.random());
    9. };
    10.  
    11. // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
    12. let chartData = {},
    13.   g, m, r;
    14. for (g = 0; g < games.length; g++) {
    15.   chartData[g] = [];
    16.   for (m = 0; m < 90; m++) {
    17.     // try to simulate original chart, majority of data is on the lower part
    18.     r = Math.random();
    19.     if (r >= 0 && r < 0.85) {
    20.       chartData[g].push([m, _r_(0, 100)]);
    21.     } else if (r >= 0.85 && r < 0.95) {
    22.       chartData[g].push([m, _r_(50, 300)]);
    23.     } else {
    24.       chartData[g].push([m, _r_(200, 800)]);
    25.     }
    26.   }
    27. }
    28.  
    29. // CHART CONFIG
    30. // -----------------------------
    31. let chartConfig = {
    32.   type: 'scatter',
    33.   clustered: true,
    34.   title: {
    35.     text: 'Distance Travelled by Football Players',
    36.     adjustLayout: true
    37.   },
    38.   plot: {
    39.     clusterOffset: '5px',
    40.     marker: {
    41.       alpha: 0.5,
    42.       borderWidth: 0,
    43.       size: '4px'
    44.     }
    45.   },
    46.   plotarea: {
    47.     margin: 'dynamic'
    48.   },
    49.   scaleX: {
    50.     values: games,
    51.     item: {
    52.       fontSize: '13px',
    53.       fontWeight: 'bold'
    54.     },
    55.     label: {
    56.       text: 'Game'
    57.     },
    58.     lineWidth: 0,
    59.     offset: 0,
    60.     placement: 'opposite',
    61.     tick: {
    62.       visible: false
    63.     }
    64.   },
    65.   scaleY: {
    66.     guide: {
    67.       visible: false
    68.     },
    69.     label: {
    70.       text: 'Distance travelled (m)'
    71.     },
    72.     lineColor: '#aaa',
    73.     offset: 0,
    74.     tick: {
    75.       lineColor: '#aaa'
    76.     }
    77.   },
    78.   tooltip: {
    79.     text: 'Minute %scale-key-value: %node-value meters travelled'
    80.   },
    81.   series: []
    82. };
    83.  
    84. for (g = 0; g < games.length; g++) {
    85.   let sdata = {
    86.     values: chartData[g],
    87.     clustered: true
    88.   };
    89.   chartConfig['series'].push(sdata);
    90. }
    91.  
    92. // RENDER CHARTS
    93. // -----------------------------
    94. // window:load event for Javascript to run after HTML
    95. // because this Javascript is injected into the document head
    96. window.addEventListener('load', () => {
    97.   // Javascript code to execute after DOM content
    98.   zingchart.render({
    99.     id: 'myChart',
    100.     data: chartConfig,
    101.     output: 'svg'
    102.   });
    103. });