• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    10.  
    11.     .chart--container {
    12.       height: 100%;
    13.       width: 100%;
    14.       min-height: 530px;
    15.     }
    16.  
    17.     .zc-ref {
    18.       display: none;
    19.     }
    20.   </style>
    21. </head>
    22. ​
    23.  
    24. <body class="zc-body">
    25.  
    26.   <div id="myChart" class="chart--container">
    27.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    28.   </div>
    29.  
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
    32.     // -----------------------------
    33.     let chartConfig = {
    34.       globals: {
    35.         fontFamily: 'Roboto',
    36.       },
    37.       graphset: [{
    38.         type: 'piano',
    39.         theme: 'classic',
    40.         backgroundColor: '#fff',
    41.         title: {
    42.           text: 'Surf Height',
    43.           adjustLayout: true,
    44.           paddingBottom: '25px',
    45.           backgroundColor: 'none',
    46.           fontColor: '#05636c',
    47.           fontSize: '24px',
    48.         },
    49.         subtitle: {
    50.           text: "Black's Beach - La Jolla",
    51.           backgroundColor: 'none',
    52.           fontColor: '#05636c',
    53.           fontSize: '14px',
    54.           height: '25px',
    55.           x: '-9.5px',
    56.           y: '38.5px',
    57.         },
    58.         legend: {
    59.           align: 'center',
    60.           borderWidth: '0px',
    61.           footer: {
    62.             backgroundColor: 'none',
    63.             borderColor: 'none',
    64.             fontColor: '#05636c',
    65.             fontSize: '14px',
    66.             textAlign: 'center',
    67.           },
    68.           item: {
    69.             borderColor: 'none',
    70.             fontColor: '#05636c',
    71.             size: '13px',
    72.           },
    73.           layout: 'x6',
    74.           marker: {
    75.             type: 'square',
    76.             borderColor: 'none',
    77.             borderRadius: '8px',
    78.             size: '13px',
    79.           },
    80.           shadow: false,
    81.           toggleAction: 'none',
    82.           verticalAlign: 'bottom',
    83.           width: '80%',
    84.         },
    85.         plot: {
    86.           tooltip: {
    87.             text: ' The surf will be about %v feet.',
    88.             fontColor: 'white',
    89.             fontSize: '14px',
    90.             textAlign: 'left',
    91.           },
    92.           aspect: 'none',
    93.           borderColor: '#eeeeee',
    94.           borderRadius: '7px',
    95.           borderWidth: '2px',
    96.           rules: [{
    97.               backgroundColor: '#081D58',
    98.               fontColor: '#05636c',
    99.               rule: '%node-value > 6',
    100.             },
    101.             {
    102.               backgroundColor: '#253494',
    103.               fontColor: '#05636c',
    104.               rule: '%node-value > 4 && %node-value <= 5',
    105.             },
    106.             {
    107.               backgroundColor: '#225EA8',
    108.               fontColor: '#05636c',
    109.               rule: '%node-value > 3 && %node-value <= 4',
    110.             },
    111.             {
    112.               backgroundColor: '#1D91C0',
    113.               fontColor: '#05636c',
    114.               rule: '%node-value > 2 && %node-value <= 3',
    115.             },
    116.             {
    117.               backgroundColor: '#41B6C4',
    118.               fontColor: '#05636c',
    119.               rule: '%node-value > 1 && %node-value <= 2',
    120.             },
    121.             {
    122.               backgroundColor: '#7FCDBB',
    123.               fontColor: '#05636c',
    124.               rule: '%node-value > 0 && %node-value <= 1',
    125.             },
    126.           ],
    127.         },
    128.         plotarea: {
    129.           margin: 'dynamic',
    130.         },
    131.         scaleX: {
    132.           values: [
    133.             '2a',
    134.             '3a',
    135.             '4a',
    136.             '5a',
    137.             '6a',
    138.             '7a',
    139.             '8a',
    140.             '9a',
    141.             '10a',
    142.             '11a',
    143.             '12a',
    144.             '1p',
    145.             '2p',
    146.             '3p',
    147.             '4p',
    148.             '5p',
    149.             '6p',
    150.             '7p',
    151.             '8p',
    152.             '9p',
    153.             '10p',
    154.             '11p',
    155.           ],
    156.           guide: {
    157.             visible: false,
    158.           },
    159.           item: {
    160.             borderColor: 'none',
    161.             fontColor: '#05636c',
    162.             size: '13px',
    163.           },
    164.           lineWidth: '0px',
    165.           placement: 'opposite',
    166.           tick: {
    167.             visible: false,
    168.           },
    169.           zooming: true,
    170.           zoomSnap: true,
    171.         },
    172.         scaleY: {
    173.           values: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
    174.           guide: {
    175.             visible: false,
    176.           },
    177.           item: {
    178.             borderColor: 'none',
    179.             fontColor: '#05636c',
    180.             size: '13px',
    181.           },
    182.           lineWidth: '0px',
    183.           mirrored: true,
    184.           tick: {
    185.             visible: false,
    186.           },
    187.           zooming: true,
    188.         },
    189.         zoom: {
    190.           alpha: 0.75,
    191.           backgroundColor: '#e5e8ea',
    192.           borderColor: '#009',
    193.           borderWidth: '2px',
    194.           preserveZoom: true,
    195.         },
    196.         scrollX: {
    197.           bar: {
    198.             alpha: 0.5,
    199.             backgroundColor: '#01579B',
    200.             borderRadius: '3px',
    201.           },
    202.           handle: {
    203.             backgroundColor: '#01579B',
    204.             borderRadius: '5px',
    205.             borderTop: 'none',
    206.             borderRight: 'none',
    207.             borderBottom: 'none',
    208.             borderLeft: 'none',
    209.           },
    210.         },
    211.         scrollY: {
    212.           bar: {
    213.             alpha: 0.5,
    214.             backgroundColor: '#01579B',
    215.             borderRadius: '3px',
    216.           },
    217.           handle: {
    218.             backgroundColor: '#01579B',
    219.             borderRadius: '5px',
    220.             borderTop: 'none',
    221.             borderRight: 'none',
    222.             borderBottom: 'none',
    223.             borderLeft: 'none',
    224.           },
    225.         },
    226.         series: [{
    227.             text: '2-3 Ft',
    228.             values: [
    229.               1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 1, 2, 2, 1, 2,
    230.             ],
    231.             legendMarker: {
    232.               backgroundColor: '#7FCDBB',
    233.             },
    234.           },
    235.           {
    236.             text: '3-4 Ft',
    237.             values: [
    238.               2, 2, 2, 2, 2, 2, 3, 3, 3, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 1, 2, 3,
    239.             ],
    240.             legendMarker: {
    241.               backgroundColor: '#41B6C4',
    242.             },
    243.           },
    244.           {
    245.             text: '4-5 Ft',
    246.             values: [
    247.               2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2,
    248.             ],
    249.             legendMarker: {
    250.               backgroundColor: '#1D91C0',
    251.             },
    252.           },
    253.           {
    254.             text: '5-6 Ft',
    255.             values: [
    256.               2, 3, 3, 2, 3, 3, 3, 4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 3, 3, 3, 3, 3,
    257.             ],
    258.             legendMarker: {
    259.               backgroundColor: '#225EA8',
    260.             },
    261.           },
    262.           {
    263.             text: '6-7 Ft',
    264.             values: [
    265.               3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
    266.             ],
    267.             legendMarker: {
    268.               backgroundColor: '#253494',
    269.             },
    270.           },
    271.           {
    272.             text: '7-8 Ft',
    273.             values: [
    274.               2, 3, 5, 6, 5, 6, 5, 6, 5, 6, 6, 6, 6, 5, 6, 5, 6, 4, 5, 4, 4, 4,
    275.             ],
    276.             legendMarker: {
    277.               backgroundColor: '#081D58',
    278.             },
    279.           },
    280.           {
    281.             text: '1-2 Ft',
    282.             values: [
    283.               3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
    284.             ],
    285.             legendMarker: {
    286.               backgroundColor: '#fff',
    287.             },
    288.             legendItem: {
    289.               visible: false,
    290.             },
    291.           },
    292.         ],
    293.       }, ],
    294.     };
    295.  
    296.     // RENDER CHARTS
    297.     // -----------------------------
    298.     zingchart.render({
    299.       id: 'myChart',
    300.       data: chartConfig,
    301.     });
    302.   </script>
    303. </body>
    304.  
    305. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.  
    13.   <div id="myChart" class="chart--container">
    14.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
    2.  
    3. .chart--container {
    4.   height: 100%;
    5.   width: 100%;
    6.   min-height: 530px;
    7. }
    8.  
    9. .zc-ref {
    10.   display: none;
    11. }
    1. // CHART CONFIG
    2. // -----------------------------
    3. let chartConfig = {
    4.   globals: {
    5.     fontFamily: 'Roboto',
    6.   },
    7.   graphset: [{
    8.     type: 'piano',
    9.     theme: 'classic',
    10.     backgroundColor: '#fff',
    11.     title: {
    12.       text: 'Surf Height',
    13.       adjustLayout: true,
    14.       paddingBottom: '25px',
    15.       backgroundColor: 'none',
    16.       fontColor: '#05636c',
    17.       fontSize: '24px',
    18.     },
    19.     subtitle: {
    20.       text: "Black's Beach - La Jolla",
    21.       backgroundColor: 'none',
    22.       fontColor: '#05636c',
    23.       fontSize: '14px',
    24.       height: '25px',
    25.       x: '-9.5px',
    26.       y: '38.5px',
    27.     },
    28.     legend: {
    29.       align: 'center',
    30.       borderWidth: '0px',
    31.       footer: {
    32.         backgroundColor: 'none',
    33.         borderColor: 'none',
    34.         fontColor: '#05636c',
    35.         fontSize: '14px',
    36.         textAlign: 'center',
    37.       },
    38.       item: {
    39.         borderColor: 'none',
    40.         fontColor: '#05636c',
    41.         size: '13px',
    42.       },
    43.       layout: 'x6',
    44.       marker: {
    45.         type: 'square',
    46.         borderColor: 'none',
    47.         borderRadius: '8px',
    48.         size: '13px',
    49.       },
    50.       shadow: false,
    51.       toggleAction: 'none',
    52.       verticalAlign: 'bottom',
    53.       width: '80%',
    54.     },
    55.     plot: {
    56.       tooltip: {
    57.         text: ' The surf will be about %v feet.',
    58.         fontColor: 'white',
    59.         fontSize: '14px',
    60.         textAlign: 'left',
    61.       },
    62.       aspect: 'none',
    63.       borderColor: '#eeeeee',
    64.       borderRadius: '7px',
    65.       borderWidth: '2px',
    66.       rules: [{
    67.           backgroundColor: '#081D58',
    68.           fontColor: '#05636c',
    69.           rule: '%node-value > 6',
    70.         },
    71.         {
    72.           backgroundColor: '#253494',
    73.           fontColor: '#05636c',
    74.           rule: '%node-value > 4 && %node-value <= 5',
    75.         },
    76.         {
    77.           backgroundColor: '#225EA8',
    78.           fontColor: '#05636c',
    79.           rule: '%node-value > 3 && %node-value <= 4',
    80.         },
    81.         {
    82.           backgroundColor: '#1D91C0',
    83.           fontColor: '#05636c',
    84.           rule: '%node-value > 2 && %node-value <= 3',
    85.         },
    86.         {
    87.           backgroundColor: '#41B6C4',
    88.           fontColor: '#05636c',
    89.           rule: '%node-value > 1 && %node-value <= 2',
    90.         },
    91.         {
    92.           backgroundColor: '#7FCDBB',
    93.           fontColor: '#05636c',
    94.           rule: '%node-value > 0 && %node-value <= 1',
    95.         },
    96.       ],
    97.     },
    98.     plotarea: {
    99.       margin: 'dynamic',
    100.     },
    101.     scaleX: {
    102.       values: [
    103.         '2a',
    104.         '3a',
    105.         '4a',
    106.         '5a',
    107.         '6a',
    108.         '7a',
    109.         '8a',
    110.         '9a',
    111.         '10a',
    112.         '11a',
    113.         '12a',
    114.         '1p',
    115.         '2p',
    116.         '3p',
    117.         '4p',
    118.         '5p',
    119.         '6p',
    120.         '7p',
    121.         '8p',
    122.         '9p',
    123.         '10p',
    124.         '11p',
    125.       ],
    126.       guide: {
    127.         visible: false,
    128.       },
    129.       item: {
    130.         borderColor: 'none',
    131.         fontColor: '#05636c',
    132.         size: '13px',
    133.       },
    134.       lineWidth: '0px',
    135.       placement: 'opposite',
    136.       tick: {
    137.         visible: false,
    138.       },
    139.       zooming: true,
    140.       zoomSnap: true,
    141.     },
    142.     scaleY: {
    143.       values: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
    144.       guide: {
    145.         visible: false,
    146.       },
    147.       item: {
    148.         borderColor: 'none',
    149.         fontColor: '#05636c',
    150.         size: '13px',
    151.       },
    152.       lineWidth: '0px',
    153.       mirrored: true,
    154.       tick: {
    155.         visible: false,
    156.       },
    157.       zooming: true,
    158.     },
    159.     zoom: {
    160.       alpha: 0.75,
    161.       backgroundColor: '#e5e8ea',
    162.       borderColor: '#009',
    163.       borderWidth: '2px',
    164.       preserveZoom: true,
    165.     },
    166.     scrollX: {
    167.       bar: {
    168.         alpha: 0.5,
    169.         backgroundColor: '#01579B',
    170.         borderRadius: '3px',
    171.       },
    172.       handle: {
    173.         backgroundColor: '#01579B',
    174.         borderRadius: '5px',
    175.         borderTop: 'none',
    176.         borderRight: 'none',
    177.         borderBottom: 'none',
    178.         borderLeft: 'none',
    179.       },
    180.     },
    181.     scrollY: {
    182.       bar: {
    183.         alpha: 0.5,
    184.         backgroundColor: '#01579B',
    185.         borderRadius: '3px',
    186.       },
    187.       handle: {
    188.         backgroundColor: '#01579B',
    189.         borderRadius: '5px',
    190.         borderTop: 'none',
    191.         borderRight: 'none',
    192.         borderBottom: 'none',
    193.         borderLeft: 'none',
    194.       },
    195.     },
    196.     series: [{
    197.         text: '2-3 Ft',
    198.         values: [
    199.           1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 1, 2, 2, 1, 2,
    200.         ],
    201.         legendMarker: {
    202.           backgroundColor: '#7FCDBB',
    203.         },
    204.       },
    205.       {
    206.         text: '3-4 Ft',
    207.         values: [
    208.           2, 2, 2, 2, 2, 2, 3, 3, 3, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 1, 2, 3,
    209.         ],
    210.         legendMarker: {
    211.           backgroundColor: '#41B6C4',
    212.         },
    213.       },
    214.       {
    215.         text: '4-5 Ft',
    216.         values: [
    217.           2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2,
    218.         ],
    219.         legendMarker: {
    220.           backgroundColor: '#1D91C0',
    221.         },
    222.       },
    223.       {
    224.         text: '5-6 Ft',
    225.         values: [
    226.           2, 3, 3, 2, 3, 3, 3, 4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 3, 3, 3, 3, 3,
    227.         ],
    228.         legendMarker: {
    229.           backgroundColor: '#225EA8',
    230.         },
    231.       },
    232.       {
    233.         text: '6-7 Ft',
    234.         values: [
    235.           3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
    236.         ],
    237.         legendMarker: {
    238.           backgroundColor: '#253494',
    239.         },
    240.       },
    241.       {
    242.         text: '7-8 Ft',
    243.         values: [
    244.           2, 3, 5, 6, 5, 6, 5, 6, 5, 6, 6, 6, 6, 5, 6, 5, 6, 4, 5, 4, 4, 4,
    245.         ],
    246.         legendMarker: {
    247.           backgroundColor: '#081D58',
    248.         },
    249.       },
    250.       {
    251.         text: '1-2 Ft',
    252.         values: [
    253.           3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4,
    254.         ],
    255.         legendMarker: {
    256.           backgroundColor: '#fff',
    257.         },
    258.         legendItem: {
    259.           visible: false,
    260.         },
    261.       },
    262.     ],
    263.   }, ],
    264. };
    265.  
    266. // RENDER CHARTS
    267. // -----------------------------
    268. zingchart.render({
    269.   id: 'myChart',
    270.   data: chartConfig,
    271. });