• Edit
  • Download
  • <!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>
    @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }
    
    .zc-ref {
      display: none;
    }
    // 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,
    });