Gallery Back to Gallery

Heat Map with Images

Powered by ZingChart
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'heatmap',
      alpha: 0.75,
      backgroundFit: 'xy',
      backgroundImage: 'https://app.zingsoft.com/api/file/IHSVIUB2/cloudy-sky.jpg',
      title: {
        text: 'Heat Map',
        fontColor: '#024567',
      },
      plot: {
        tooltip: {
          text: '%kl will be<br>%data-weather<br>in %y!',
          alpha: 0.9,
          backgroundColor: 'white',
          fontColor: '#006699',
          fontFamily: 'Georgia',
          fontSize: '13px',
        },
        aspect: 'none',
        backgroundColor: 'none',
        backgroundRepeat: false,
        hoverState: {
          backgroundColor: '#006699',
        },
        rules: [{
            backgroundImage: 'https://www.zingchart.com/resources/sunny.png',
            rule: '%v == 1',
          },
          {
            backgroundImage: 'https://www.zingchart.com/resources/partly-cloudy.png',
            rule: '%v == 2',
          },
          {
            backgroundImage: 'https://www.zingchart.com/resources/cloudy.png',
            rule: '%v == 3',
          },
        ],
      },
      plotarea: {
        marginLeft: 'dynamic',
        border: '1px solid #FFF',
      },
      scaleX: {
        guide: {
          lineColor: '#FFF',
          lineStyle: 'solid',
        },
        item: {
          fontColor: '#024567',
          fontSize: '13px',
        },
        labels: [
          'Sunday',
          'Monday',
          'Tuesday',
          'Wednesday',
          'Thursday',
          'Friday',
          'Saturday',
        ],
        lineColor: 'none',
        tick: {
          visible: false,
        },
      },
      scaleY: {
        guide: {
          lineColor: '#FFF',
          lineStyle: 'solid',
        },
        item: {
          fontColor: '#024567',
          fontSize: '13px',
        },
        labels: ['San Diego', 'Orange County', 'Los Angeles'],
        lineColor: 'none',
        tick: {
          visible: false,
        },
      },
      series: [{
          values: [1, 3, 1, 2, 3, 2, 3],
          dataWeather: [
            'sunny',
            'cloudy',
            'sunny',
            'partly cloudy',
            'cloudy',
            'partly cloudy',
            'cloudy',
          ],
        },
        {
          values: [2, 2, 1, 1, 3, 3, 2],
          dataWeather: [
            'partly cloudy',
            'partly cloudy',
            'sunny',
            'sunny',
            'cloudy',
            'cloudy',
            'partly cloudy',
          ],
        },
        {
          values: [1, 3, 3, 2, 1, 1, 3],
          dataWeather: [
            'sunny',
            'cloudy',
            'cloudy',
            'partly cloudy',
            'sunny',
            'sunny',
            'cloudy',
          ],
        },
      ],
    };

    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      width: '100%',
      height: '530px',
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart" class="chart--container">
			<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
		</div>
	</body>
</html>
let chartConfig = {
  type: 'heatmap',
  alpha: 0.75,
  backgroundFit: 'xy',
  backgroundImage: 'https://app.zingsoft.com/api/file/IHSVIUB2/cloudy-sky.jpg',
  title: {
    text: 'Heat Map',
    fontColor: '#024567',
  },
  plot: {
    tooltip: {
      text: '%kl will be<br>%data-weather<br>in %y!',
      alpha: 0.9,
      backgroundColor: 'white',
      fontColor: '#006699',
      fontFamily: 'Georgia',
      fontSize: '13px',
    },
    aspect: 'none',
    backgroundColor: 'none',
    backgroundRepeat: false,
    hoverState: {
      backgroundColor: '#006699',
    },
    rules: [
      {
        backgroundImage: 'https://www.zingchart.com/resources/sunny.png',
        rule: '%v == 1',
      },
      {
        backgroundImage:
          'https://www.zingchart.com/resources/partly-cloudy.png',
        rule: '%v == 2',
      },
      {
        backgroundImage: 'https://www.zingchart.com/resources/cloudy.png',
        rule: '%v == 3',
      },
    ],
  },
  plotarea: {
    marginLeft: 'dynamic',
    border: '1px solid #FFF',
  },
  scaleX: {
    guide: {
      lineColor: '#FFF',
      lineStyle: 'solid',
    },
    item: {
      fontColor: '#024567',
      fontSize: '13px',
    },
    labels: [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ],
    lineColor: 'none',
    tick: {
      visible: false,
    },
  },
  scaleY: {
    guide: {
      lineColor: '#FFF',
      lineStyle: 'solid',
    },
    item: {
      fontColor: '#024567',
      fontSize: '13px',
    },
    labels: ['San Diego', 'Orange County', 'Los Angeles'],
    lineColor: 'none',
    tick: {
      visible: false,
    },
  },
  series: [
    {
      values: [1, 3, 1, 2, 3, 2, 3],
      dataWeather: [
        'sunny',
        'cloudy',
        'sunny',
        'partly cloudy',
        'cloudy',
        'partly cloudy',
        'cloudy',
      ],
    },
    {
      values: [2, 2, 1, 1, 3, 3, 2],
      dataWeather: [
        'partly cloudy',
        'partly cloudy',
        'sunny',
        'sunny',
        'cloudy',
        'cloudy',
        'partly cloudy',
      ],
    },
    {
      values: [1, 3, 3, 2, 1, 1, 3],
      dataWeather: [
        'sunny',
        'cloudy',
        'cloudy',
        'partly cloudy',
        'sunny',
        'sunny',
        'cloudy',
      ],
    },
  ],
};

zingchart.render({
  id: 'myChart',
  data: chartConfig,
  width: '100%',
  height: '530px',
});
.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
Chord Chart with Material Colors 152/270 Ring Chart with Center Label

Related Documentation: