Surf Heat Map

Please enable JavaScript to see the interactive demo.

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

<!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>
    @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    .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"]; // CHART CONFIG
    // -----------------------------
    let chartConfig = {
      globals: {
        fontFamily: 'Roboto',
      },
      graphset: [{
        type: 'piano',
        theme: 'classic',
        backgroundColor: '#fff',
        title: {
          text: 'Surf Height',
          adjustLayout: true,
          paddingBottom: '25px',
          backgroundColor: 'none',
          fontColor: '#05636c',
          fontSize: '24px',
        },
        subtitle: {
          text: "Black's Beach - La Jolla",
          backgroundColor: 'none',
          fontColor: '#05636c',
          fontSize: '14px',
          height: '25px',
          x: '-9.5px',
          y: '38.5px',
        },
        legend: {
          align: 'center',
          borderWidth: '0px',
          footer: {
            backgroundColor: 'none',
            borderColor: 'none',
            fontColor: '#05636c',
            fontSize: '14px',
            textAlign: 'center',
          },
          item: {
            borderColor: 'none',
            fontColor: '#05636c',
            size: '13px',
          },
          layout: 'x6',
          marker: {
            type: 'square',
            borderColor: 'none',
            borderRadius: '8px',
            size: '13px',
          },
          shadow: false,
          toggleAction: 'none',
          verticalAlign: 'bottom',
          width: '80%',
        },
        plot: {
          tooltip: {
            text: ' The surf will be about %v feet.',
            fontColor: 'white',
            fontSize: '14px',
            textAlign: 'left',
          },
          aspect: 'none',
          borderColor: '#eeeeee',
          borderRadius: '7px',
          borderWidth: '2px',
          rules: [{
              backgroundColor: '#081D58',
              fontColor: '#05636c',
              rule: '%node-value > 6',
            },
            {
              backgroundColor: '#253494',
              fontColor: '#05636c',
              rule: '%node-value > 4 && %node-value <= 5',
            },
            {
              backgroundColor: '#225EA8',
              fontColor: '#05636c',
              rule: '%node-value > 3 && %node-value <= 4',
            },
            {
              backgroundColor: '#1D91C0',
              fontColor: '#05636c',
              rule: '%node-value > 2 && %node-value <= 3',
            },
            {
              backgroundColor: '#41B6C4',
              fontColor: '#05636c',
              rule: '%node-value > 1 && %node-value <= 2',
            },
            {
              backgroundColor: '#7FCDBB',
              fontColor: '#05636c',
              rule: '%node-value > 0 && %node-value <= 1',
            },
          ],
        },
        plotarea: {
          margin: 'dynamic',
        },
        scaleX: {
          values: [
            '2a',
            '3a',
            '4a',
            '5a',
            '6a',
            '7a',
            '8a',
            '9a',
            '10a',
            '11a',
            '12a',
            '1p',
            '2p',
            '3p',
            '4p',
            '5p',
            '6p',
            '7p',
            '8p',
            '9p',
            '10p',
            '11p',
          ],
          guide: {
            visible: false,
          },
          item: {
            borderColor: 'none',
            fontColor: '#05636c',
            size: '13px',
          },
          lineWidth: '0px',
          placement: 'opposite',
          tick: {
            visible: false,
          },
          zooming: true,
          zoomSnap: true,
        },
        scaleY: {
          values: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
          guide: {
            visible: false,
          },
          item: {
            borderColor: 'none',
            fontColor: '#05636c',
            size: '13px',
          },
          lineWidth: '0px',
          mirrored: true,
          tick: {
            visible: false,
          },
          zooming: true,
        },
        zoom: {
          alpha: 0.75,
          backgroundColor: '#e5e8ea',
          borderColor: '#009',
          borderWidth: '2px',
          preserveZoom: true,
        },
        scrollX: {
          bar: {
            alpha: 0.5,
            backgroundColor: '#01579B',
            borderRadius: '3px',
          },
          handle: {
            backgroundColor: '#01579B',
            borderRadius: '5px',
            borderTop: 'none',
            borderRight: 'none',
            borderBottom: 'none',
            borderLeft: 'none',
          },
        },
        scrollY: {
          bar: {
            alpha: 0.5,
            backgroundColor: '#01579B',
            borderRadius: '3px',
          },
          handle: {
            backgroundColor: '#01579B',
            borderRadius: '5px',
            borderTop: 'none',
            borderRight: 'none',
            borderBottom: 'none',
            borderLeft: 'none',
          },
        },
        series: [{
            text: '2-3 Ft',
            values: [
              1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 1, 2, 2, 1, 2,
            ],
            legendMarker: {
              backgroundColor: '#7FCDBB',
            },
          },
          {
            text: '3-4 Ft',
            values: [
              2, 2, 2, 2, 2, 2, 3, 3, 3, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 1, 2, 3,
            ],
            legendMarker: {
              backgroundColor: '#41B6C4',
            },
          },
          {
            text: '4-5 Ft',
            values: [
              2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2,
            ],
            legendMarker: {
              backgroundColor: '#1D91C0',
            },
          },
          {
            text: '5-6 Ft',
            values: [
              2, 3, 3, 2, 3, 3, 3, 4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 3, 3, 3, 3, 3,
            ],
            legendMarker: {
              backgroundColor: '#225EA8',
            },
          },
          {
            text: '6-7 Ft',
            values: [
              3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
            ],
            legendMarker: {
              backgroundColor: '#253494',
            },
          },
          {
            text: '7-8 Ft',
            values: [
              2, 3, 5, 6, 5, 6, 5, 6, 5, 6, 6, 6, 6, 5, 6, 5, 6, 4, 5, 4, 4, 4,
            ],
            legendMarker: {
              backgroundColor: '#081D58',
            },
          },
          {
            text: '1-2 Ft',
            values: [
              3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
            ],
            legendMarker: {
              backgroundColor: '#fff',
            },
            legendItem: {
              visible: false,
            },
          },
        ],
      }, ],
    };

    // RENDER CHARTS
    // -----------------------------
    zingchart.render({
      id: 'myChart',
      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>
    
  </body>
</html>

// CHART CONFIG
// -----------------------------
let chartConfig = {
  globals: {
    fontFamily: 'Roboto',
  },
  graphset: [
    {
      type: 'piano',
      theme: 'classic',
      backgroundColor: '#fff',
      title: {
        text: 'Surf Height',
        adjustLayout: true,
        paddingBottom: '25px',
        backgroundColor: 'none',
        fontColor: '#05636c',
        fontSize: '24px',
      },
      subtitle: {
        text: "Black's Beach - La Jolla",
        backgroundColor: 'none',
        fontColor: '#05636c',
        fontSize: '14px',
        height: '25px',
        x: '-9.5px',
        y: '38.5px',
      },
      legend: {
        align: 'center',
        borderWidth: '0px',
        footer: {
          backgroundColor: 'none',
          borderColor: 'none',
          fontColor: '#05636c',
          fontSize: '14px',
          textAlign: 'center',
        },
        item: {
          borderColor: 'none',
          fontColor: '#05636c',
          size: '13px',
        },
        layout: 'x6',
        marker: {
          type: 'square',
          borderColor: 'none',
          borderRadius: '8px',
          size: '13px',
        },
        shadow: false,
        toggleAction: 'none',
        verticalAlign: 'bottom',
        width: '80%',
      },
      plot: {
        tooltip: {
          text: ' The surf will be about %v feet.',
          fontColor: 'white',
          fontSize: '14px',
          textAlign: 'left',
        },
        aspect: 'none',
        borderColor: '#eeeeee',
        borderRadius: '7px',
        borderWidth: '2px',
        rules: [
          {
            backgroundColor: '#081D58',
            fontColor: '#05636c',
            rule: '%node-value > 6',
          },
          {
            backgroundColor: '#253494',
            fontColor: '#05636c',
            rule: '%node-value > 4 && %node-value <= 5',
          },
          {
            backgroundColor: '#225EA8',
            fontColor: '#05636c',
            rule: '%node-value > 3 && %node-value <= 4',
          },
          {
            backgroundColor: '#1D91C0',
            fontColor: '#05636c',
            rule: '%node-value > 2 && %node-value <= 3',
          },
          {
            backgroundColor: '#41B6C4',
            fontColor: '#05636c',
            rule: '%node-value > 1 && %node-value <= 2',
          },
          {
            backgroundColor: '#7FCDBB',
            fontColor: '#05636c',
            rule: '%node-value > 0 && %node-value <= 1',
          },
        ],
      },
      plotarea: {
        margin: 'dynamic',
      },
      scaleX: {
        values: [
          '2a',
          '3a',
          '4a',
          '5a',
          '6a',
          '7a',
          '8a',
          '9a',
          '10a',
          '11a',
          '12a',
          '1p',
          '2p',
          '3p',
          '4p',
          '5p',
          '6p',
          '7p',
          '8p',
          '9p',
          '10p',
          '11p',
        ],
        guide: {
          visible: false,
        },
        item: {
          borderColor: 'none',
          fontColor: '#05636c',
          size: '13px',
        },
        lineWidth: '0px',
        placement: 'opposite',
        tick: {
          visible: false,
        },
        zooming: true,
        zoomSnap: true,
      },
      scaleY: {
        values: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        guide: {
          visible: false,
        },
        item: {
          borderColor: 'none',
          fontColor: '#05636c',
          size: '13px',
        },
        lineWidth: '0px',
        mirrored: true,
        tick: {
          visible: false,
        },
        zooming: true,
      },
      zoom: {
        alpha: 0.75,
        backgroundColor: '#e5e8ea',
        borderColor: '#009',
        borderWidth: '2px',
        preserveZoom: true,
      },
      scrollX: {
        bar: {
          alpha: 0.5,
          backgroundColor: '#01579B',
          borderRadius: '3px',
        },
        handle: {
          backgroundColor: '#01579B',
          borderRadius: '5px',
          borderTop: 'none',
          borderRight: 'none',
          borderBottom: 'none',
          borderLeft: 'none',
        },
      },
      scrollY: {
        bar: {
          alpha: 0.5,
          backgroundColor: '#01579B',
          borderRadius: '3px',
        },
        handle: {
          backgroundColor: '#01579B',
          borderRadius: '5px',
          borderTop: 'none',
          borderRight: 'none',
          borderBottom: 'none',
          borderLeft: 'none',
        },
      },
      series: [
        {
          text: '2-3 Ft',
          values: [
            1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 1, 2, 2, 1, 2,
          ],
          legendMarker: {
            backgroundColor: '#7FCDBB',
          },
        },
        {
          text: '3-4 Ft',
          values: [
            2, 2, 2, 2, 2, 2, 3, 3, 3, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 1, 2, 3,
          ],
          legendMarker: {
            backgroundColor: '#41B6C4',
          },
        },
        {
          text: '4-5 Ft',
          values: [
            2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2,
          ],
          legendMarker: {
            backgroundColor: '#1D91C0',
          },
        },
        {
          text: '5-6 Ft',
          values: [
            2, 3, 3, 2, 3, 3, 3, 4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 3, 3, 3, 3, 3,
          ],
          legendMarker: {
            backgroundColor: '#225EA8',
          },
        },
        {
          text: '6-7 Ft',
          values: [
            3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
          ],
          legendMarker: {
            backgroundColor: '#253494',
          },
        },
        {
          text: '7-8 Ft',
          values: [
            2, 3, 5, 6, 5, 6, 5, 6, 5, 6, 6, 6, 6, 5, 6, 5, 6, 4, 5, 4, 4, 4,
          ],
          legendMarker: {
            backgroundColor: '#081D58',
          },
        },
        {
          text: '1-2 Ft',
          values: [
            3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
          ],
          legendMarker: {
            backgroundColor: '#fff',
          },
          legendItem: {
            visible: false,
          },
        },
      ],
    },
  ],
};

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig,
});

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

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

.zc-ref {
  display: none;
}

Multi Chart Dashboard with Grid and Word Cloud 214/270 Heat Map with Size Design

Surf Heat Map

Related Documentation: