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 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: .5,
            backgroundColor: '#01579B',
            borderRadius: '3px'
          },
          handle: {
            backgroundColor: '#01579B',
            borderRadius: '5px',
            borderTop: 'none',
            borderRight: 'none',
            borderBottom: 'none',
            borderLeft: 'none'
          }
        },
        scrollY: {
          bar: {
            alpha: .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: .5,
          backgroundColor: '#01579B',
          borderRadius: '3px'
        },
        handle: {
          backgroundColor: '#01579B',
          borderRadius: '5px',
          borderTop: 'none',
          borderRight: 'none',
          borderBottom: 'none',
          borderLeft: 'none'
        }
      },
      scrollY: {
        bar: {
          alpha: .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: