• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
    
            .chart--container {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 480px;
            }
        </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 = {
                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
                            }
                        }
                    ]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: chartConfig
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <link href='//fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    		<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>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    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
              }
            }
          ]
        }
      ]
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig
    });