• Edit
  • Download
  • <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 530px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    ​
    
    <body class="zc-body">
      ​
      <div id="myChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE DATA
        // -----------------------------
        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'];
    
        // HELPER METHODS
        // -----------------------------
        let _r_ = (min, max) => {
          return Math.round(min + (max - min) * Math.random());
        };
    
        // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
        let chartData = {},
          g, m, r;
        for (g = 0; g < games.length; g++) {
          chartData[g] = [];
          for (m = 0; m < 90; m++) {
            // try to simulate original chart, majority of data is on the lower part
            r = Math.random();
            if (r >= 0 && r < 0.85) {
              chartData[g].push([m, _r_(0, 100)]);
            } else if (r >= 0.85 && r < 0.95) {
              chartData[g].push([m, _r_(50, 300)]);
            } else {
              chartData[g].push([m, _r_(200, 800)]);
            }
          }
        }
    
        // CHART CONFIG
        // -----------------------------
        let chartConfig = {
          type: 'scatter',
          clustered: true,
          title: {
            text: 'Distance Travelled by Football Players',
            adjustLayout: true
          },
          plot: {
            clusterOffset: 5,
            marker: {
              alpha: 0.5,
              borderWidth: '0px',
              size: '4px'
            }
          },
          plotarea: {
            margin: 'dynamic'
          },
          scaleX: {
            values: games,
            item: {
              fontSize: '13px',
              fontWeight: 'bold'
            },
            label: {
              text: 'Game'
            },
            lineWidth: '0px',
            offset: '0px',
            placement: 'opposite',
            tick: {
              visible: false
            }
          },
          scaleY: {
            guide: {
              visible: false
            },
            label: {
              text: 'Distance travelled (m)'
            },
            lineColor: '#aaa',
            offset: '0px',
            tick: {
              lineColor: '#aaa'
            }
          },
          tooltip: {
            text: 'Minute %scale-key-value: %node-value meters travelled'
          },
          series: []
        };
    
        for (g = 0; g < games.length; g++) {
          let sdata = {
            values: chartData[g],
            clustered: true
          };
          chartConfig['series'].push(sdata);
        }
    
        // RENDER CHARTS
        // -----------------------------
        // window:load event for Javascript to run after HTML
        // because this Javascript is injected into the document head
        window.addEventListener('load', () => {
          // Javascript code to execute after DOM content
          zingchart.render({
            id: 'myChart',
            data: chartConfig,
            output: 'svg'
          });
        });
      </script>
    </body>
    
    </html>
    <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    ​
    
    <body class="zc-body">
      ​
      <div id="myChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
    
    </body>
    
    </html>
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }
    
    .zc-ref {
      display: none;
    }
    // DEFINE DATA
    // -----------------------------
    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'];
    
    // HELPER METHODS
    // -----------------------------
    let _r_ = (min, max) => {
      return Math.round(min + (max - min) * Math.random());
    };
    
    // create fake data, we will plot distance travelled by all players per each minute of the full 90 mins game
    let chartData = {},
      g, m, r;
    for (g = 0; g < games.length; g++) {
      chartData[g] = [];
      for (m = 0; m < 90; m++) {
        // try to simulate original chart, majority of data is on the lower part
        r = Math.random();
        if (r >= 0 && r < 0.85) {
          chartData[g].push([m, _r_(0, 100)]);
        } else if (r >= 0.85 && r < 0.95) {
          chartData[g].push([m, _r_(50, 300)]);
        } else {
          chartData[g].push([m, _r_(200, 800)]);
        }
      }
    }
    
    // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      type: 'scatter',
      clustered: true,
      title: {
        text: 'Distance Travelled by Football Players',
        adjustLayout: true
      },
      plot: {
        clusterOffset: 5,
        marker: {
          alpha: 0.5,
          borderWidth: '0px',
          size: '4px'
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        values: games,
        item: {
          fontSize: '13px',
          fontWeight: 'bold'
        },
        label: {
          text: 'Game'
        },
        lineWidth: '0px',
        offset: '0px',
        placement: 'opposite',
        tick: {
          visible: false
        }
      },
      scaleY: {
        guide: {
          visible: false
        },
        label: {
          text: 'Distance travelled (m)'
        },
        lineColor: '#aaa',
        offset: '0px',
        tick: {
          lineColor: '#aaa'
        }
      },
      tooltip: {
        text: 'Minute %scale-key-value: %node-value meters travelled'
      },
      series: []
    };
    
    for (g = 0; g < games.length; g++) {
      let sdata = {
        values: chartData[g],
        clustered: true
      };
      chartConfig['series'].push(sdata);
    }
    
    // RENDER CHARTS
    // -----------------------------
    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        output: 'svg'
      });
    });