Global Innovation Tile Map

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/CFDUO8K8

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 570px;
    }

    .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 nonce="undefined" src="https://app.zingsoft.com/api/file/CFDUO8K8/a69Wul5NSPSVgP4sDZkR_flags.js"></script>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let COLORS = ['#1a9b90', '#5AB4AC', '#C7EAE5', '#F6E8C3', '#E4ACAC', '#C85A5A'];

    let IDS = [
      ['CHE', COLORS[0], 66.08],
      ['SWE', COLORS[0], 62.47],
      ['NLD', COLORS[0], 58.76],
      ['GBR', COLORS[1], 59.78],
      ['ISL', COLORS[1], 49.23],
      ['DNK', COLORS[1], 57.53],
      ['FIN', COLORS[1], 57.02],
      ['DEU', COLORS[1], 56.55],
      ['IRL', COLORS[1], 53.05],
      ['LUX', COLORS[1], 50.84],
      ['ISR', COLORS[1], 53.55],
      ['FRA', COLORS[2], 53.66],
      ['NOR', COLORS[2], 49.29],
      ['AUT', COLORS[2], 50.13],
      ['CZE', COLORS[2], 48.34],
      ['EST', COLORS[2], 48.28],
      ['MLT', COLORS[2], 46.39],
      ['BEL', COLORS[2], 49.13],
      ['ESP', COLORS[2], 45.6],
      ['ITA', COLORS[3], 45.74],
      ['CYP', COLORS[3], 45.67],
      ['PRT', COLORS[3], 43.51],
      ['SLO', COLORS[3], 42.91],
      ['LVA', COLORS[3], 41.11],
      ['SVK', COLORS[3], 39.7],
      ['POL', COLORS[3], 39.95],
      ['BGR', COLORS[3], 39.98],
      ['HGR', COLORS[3], 41.53],
      ['LTU', COLORS[3], 39.18],
      ['GEO', COLORS[3], 31.78],
      ['HRV', COLORS[4], 37.27],
      ['ROU', COLORS[4], 35.95],
      ['TUR', COLORS[4], 34.9],
      ['GRC', COLORS[4], 36.79],
      ['RUS', COLORS[4], 35.63],
      ['MNE', COLORS[4], 35.39],
      ['UKR', COLORS[4], 36.32],
      ['MDA', COLORS[4], 32.98],
      ['MKD', COLORS[4], 33.43],
      ['SRB', COLORS[4], 35.3],
      ['AZE', COLORS[4], 33.2],
      ['ARM', COLORS[4], 31.4],
      ['BIH', COLORS[5], 30.2],
      ['BLR', COLORS[5], 30.0],
      ['ALB', COLORS[5], 28.9],
      ['KOS', COLORS[5], 26.8]
    ];

    let chartData = {};
    for (let i = 0; i < IDS.length; i++) {
      let pc = ZC._x_(IDS[i][2] / 100, 1);

      chartData[IDS[i][0]] = {
        value: IDS[i][2],
        backgroundColor: IDS[i][1],
        backgroundImage: FLAGS[IDS[i][0].toLowerCase()],
        backgroundPosition: '10% 35%',
        backgroundRepeat: 'no-repeat',
        backgroundScale: 0.8,
        hoverState: {
          visible: false
        },
        topState: {
          gradientStops: '0 ' + pc + ' ' + (pc + 0.01) + ' 1',
          gradientColors: '#666 #666 #eee #eee'
        },
        tooltip: {
          backgroundColor: IDS[i][1]
        }
      };
    }

    let chartConfig = {
      type: 'tilemap',
      title: {
        text: 'Global Innovation Index 2020'
      },
      subtitle: {
        text: 'Higher score = higher innovation',
        fontSize: '12px',
        fontWeight: 'normal',
        marginTop: '25px'
      },
      labels: [{
          text: 'More than 60%',
          align: 'left',
          borderLeft: '16px solid ' + COLORS[0],
          fontSize: '11px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '450px'
        },
        {
          text: '55% - 60%',
          align: 'left',
          borderLeft: '16px solid ' + COLORS[1],
          fontSize: '11px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '475px'
        },
        {
          text: '49% - 55%',
          align: 'left',
          borderLeft: '16px solid ' + COLORS[2],
          fontSize: '11px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '500px'
        },
        {
          text: '40% - 47%',
          align: 'left',
          borderLeft: '16px solid ' + COLORS[3],
          fontSize: '11px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '525px'
        },
        {
          text: '30% - 40%',
          align: 'left',
          borderLeft: '16px solid ' + COLORS[4],
          fontSize: '10px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '550px',
        },
        {
          text: 'Less than 30%',
          align: 'left',
          borderLeft: '16px solid ' + COLORS[5],
          fontSize: '11px',
          padding: '1px 1px 1px 20px',
          width: '100px',
          x: '10px',
          y: '575px'
        }
      ],
      options: {
        type: 'square',
        map: 'EUROPE',
        sizeFactor: 0.9,
        tile: {
          borderRadius: '5px',
          borderWidth: '1px',
          borderColor: '#ccc',
          backgroundColor: '#ddd',
          label: {
            fontSize: '10px',
            offsetX: '-10px',
            offsetY: '18px'
          },
          topState: {
            type: 'rect',
            backgroundPosition: '-999 -999',
            borderColor: '#ddd',
            borderWidth: '1px',
            fillAngle: 270,
            height: '32px',
            width: '8px',
            x: '+15'
          },
        },
        data: chartData,
      },
      plotarea: {
        margin: '30px 10px 10px 10px'
      },
      tooltip: {
        text: '%name: %value%',
        borderWidth: '1px',
        borderColor: '#ddd',
        fontWeight: 'bold',
        padding: '10px'
      }
    };

    zingchart.render({
      id: 'myChart',
      width: '100%',
      height: '100%',
      data: chartConfig
    });
  </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>

    <script src="https://app.zingsoft.com/api/file/CFDUO8K8/a69Wul5NSPSVgP4sDZkR_flags.js"></script>
  </body>
</html>

let COLORS = ['#1a9b90', '#5AB4AC', '#C7EAE5', '#F6E8C3', '#E4ACAC', '#C85A5A'];

let IDS = [['CHE', COLORS[0], 66.08], ['SWE', COLORS[0], 62.47], ['NLD', COLORS[0], 58.76], ['GBR', COLORS[1], 59.78],
['ISL', COLORS[1], 49.23], ['DNK', COLORS[1], 57.53], ['FIN', COLORS[1], 57.02], ['DEU', COLORS[1], 56.55],
['IRL', COLORS[1], 53.05], ['LUX', COLORS[1], 50.84], ['ISR', COLORS[1], 53.55], ['FRA', COLORS[2], 53.66],
['NOR', COLORS[2], 49.29], ['AUT', COLORS[2], 50.13], ['CZE', COLORS[2], 48.34], ['EST', COLORS[2], 48.28],
['MLT', COLORS[2], 46.39], ['BEL', COLORS[2], 49.13], ['ESP', COLORS[2], 45.6], ['ITA', COLORS[3], 45.74],
['CYP', COLORS[3], 45.67], ['PRT', COLORS[3], 43.51], ['SLO', COLORS[3], 42.91], ['LVA', COLORS[3], 41.11],
['SVK', COLORS[3], 39.7], ['POL', COLORS[3], 39.95], ['BGR', COLORS[3], 39.98], ['HGR', COLORS[3], 41.53],
['LTU', COLORS[3], 39.18], ['GEO', COLORS[3], 31.78], ['HRV', COLORS[4], 37.27], ['ROU', COLORS[4], 35.95],
['TUR', COLORS[4], 34.9], ['GRC', COLORS[4], 36.79], ['RUS', COLORS[4], 35.63], ['MNE', COLORS[4], 35.39],
['UKR', COLORS[4], 36.32], ['MDA', COLORS[4], 32.98], ['MKD', COLORS[4], 33.43], ['SRB', COLORS[4], 35.3],
['AZE', COLORS[4], 33.2], ['ARM', COLORS[4], 31.4], ['BIH', COLORS[5], 30.2], ['BLR', COLORS[5], 30.0],
['ALB', COLORS[5], 28.9], ['KOS', COLORS[5], 26.8]];

let chartData = {};
for (let i = 0; i < IDS.length; i++) {
  let pc = ZC._x_(IDS[i][2] / 100, 1);

  chartData[IDS[i][0]] = {
    value: IDS[i][2],
    backgroundColor: IDS[i][1],
    backgroundImage: FLAGS[IDS[i][0].toLowerCase()],
    backgroundPosition: '10% 35%',
    backgroundRepeat: 'no-repeat',
    backgroundScale: 0.8,
    hoverState: {
      visible: false
    },
    topState: {
      gradientStops: '0 ' + pc + ' ' + (pc + 0.01) + ' 1',
      gradientColors: '#666 #666 #eee #eee'
    },
    tooltip: {
      backgroundColor: IDS[i][1]
    }
  };
}

let chartConfig = {
  type: 'tilemap',
  title: {
    text: 'Global Innovation Index 2020'
  },
  subtitle: {
    text: 'Higher score = higher innovation',
    fontSize: '12px',
    fontWeight: 'normal',
    marginTop: '25px'
  },
  labels: [
    {
      text: 'More than 60%',
      align: 'left',
      borderLeft: '16px solid ' + COLORS[0],
      fontSize: '11px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '450px'
    },
    {
      text: '55% - 60%',
      align: 'left',
      borderLeft: '16px solid ' + COLORS[1],
      fontSize: '11px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '475px'
    },
    {
      text: '49% - 55%',
      align: 'left',
      borderLeft: '16px solid ' + COLORS[2],
      fontSize: '11px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '500px'
    },
    {
      text: '40% - 47%',
      align: 'left',
      borderLeft: '16px solid ' + COLORS[3],
      fontSize: '11px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '525px'
    },
    {
      text: '30% - 40%',
      align: 'left',
      borderLeft: '16px solid ' + COLORS[4],
      fontSize: '10px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '550px',
    },
    {
      text: 'Less than 30%',
      align: 'left',
      borderLeft: '16px solid ' + COLORS[5],
      fontSize: '11px',
      padding: '1px 1px 1px 20px',
      width: '100px',
      x: '10px',
      y: '575px'
    }
  ],
  options: {
    type: 'square',
    map: 'EUROPE',
    sizeFactor: 0.9,
    tile: {
      borderRadius: '5px',
      borderWidth: '1px',
      borderColor: '#ccc',
      backgroundColor: '#ddd',
      label: {
        fontSize: '10px',
        offsetX: '-10px',
        offsetY: '18px'
      },
      topState: {
        type: 'rect',
        backgroundPosition: '-999 -999',
        borderColor: '#ddd',
        borderWidth: '1px',
        fillAngle: 270,
        height: '32px',
        width: '8px',
        x: '+15'
      },
    },
    data: chartData,
  },
  plotarea: {
    margin: '30px 10px 10px 10px'
  },
  tooltip: {
    text: '%name: %value%',
    borderWidth: '1px',
    borderColor: '#ddd',
    fontWeight: 'bold',
    padding: '10px'
  }
};

zingchart.render({
  id: 'myChart',
  width: '100%',
  height: '100%',
  data: chartConfig
});

.zc-body { background:#fff; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 570px;
}

.zc-ref {
  display: none;
}

Largest Employer Pictogram Chart 77/281 Mixed Bar Dashboard

Global Innovation Tile Map

Related Documentation: