• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        "scroll-x": {}
    
        ,
        scaleX: {
          "transform": {
    
            "type":"date",
            "all":"%d %M, %Y",
            "guide": {
              "visible": false
            }
    
            ,
            "item": {
              "visible": false
            }
          }
    
          ,
          "zoom" : {
            "preserve-zoom": true,
              "background-color":"#f90",
              "border-color":"#009",
              "border-width":2,
              "alpha":0.75
          }
    
          ,
          "zooming":true,
          "zoom-to":[3,
          7],
          "zoom-snap": true
        }
        }
    
        ;
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        zingchart.THEME = 'classic';
        var myConfig = {
          "globals": {
            "font-family": "Roboto",
          },
          "graphset": [{
            "type": "piano",
            "title": {
              "y": "15px",
              "x": "-10px",
              "text": "Surf Height",
              "background-color": "none",
              "font-color": "#05636c",
              "font-size": "24px",
              "height": "25px"
            },
            "subtitle": {
              "y": "38.5px",
              "x": "-9.5px",
              "text": "Black's Beach - La Jolla",
              "background-color": "none",
              "font-color": "#05636c",
              "font-size": "14px",
              "height": "25px"
            },
            "backgroundColor": "#fff",
            "plotarea": {
              "margin": "100 60 90 60"
            },
            "scaleX": {
              "placement": "opposite",
              "lineWidth": 0,
              "item": {
                "border-color": "none",
                "size": "13px",
                "font-color": "#05636c"
              },
              "guide": {
                "visible": false
              },
              "tick": {
                "visible": false
              },
              "values": ["2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"],
              "zoom": {
                "preserve-zoom": true,
                "background-color": "#f90",
                "border-color": "#009",
                "border-width": 2,
                "alpha": 0.75
              },
              "zooming": true,
              "zoom-snap": true,
              //"zoomTo": [2,5]
            },
            "scroll-x": {
    
            },
            "scroll-y": {
    
            },
            "scaleY": {
              zooming: true,
              "lineWidth": 0,
              "mirrored": true,
              "tick": {
                "visible": false
              },
              "guide": {
                "visible": false
              },
              "item": {
                "border-color": "none",
                "size": "13px",
                "font-color": "#05636c"
              },
              "values": ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
            },
            "legend": {
              "layout": "x6",
              "y": "83.5%",
              "x": "15%",
              "width": "80%",
              "shadow": false,
              "border-width": 0,
              "toggle-action": "none",
              "item": {
                "border-color": "none",
                "size": "13px",
                "font-color": "#05636c"
              },
              "marker": {
                "type": "square",
                "border-radius": "8",
                "border-color": "none",
                "size": "13px"
              },
              "footer": {
                "border-color": "none",
                "background-color": "none",
                "text-align": "center",
                "font-size": "14px",
                "font-color": "#05636c"
              }
            },
            "plot": {
              "aspect": "none",
              "borderWidth": 2,
              "borderColor": "#eeeeee",
              "borderRadius": 7,
              "tooltip": {
                "font-size": "14px",
                "font-color": "white",
                "text": " The surf will be about %v feet.",
                "text-align": "left"
              },
              "rules": [{
                  "rule": "%node-value > 6",
                  "backgroundColor": "#081D58",
                  "font-color": "#05636c"
                },
                {
                  "rule": "%node-value > 4 && %node-value <= 5",
                  "backgroundColor": "#253494",
                  "font-color": "#05636c"
                },
                {
                  "rule": "%node-value > 3 && %node-value <= 4",
                  "backgroundColor": "#225EA8",
                  "font-color": "#05636c"
                },
                {
                  "rule": "%node-value > 2 && %node-value <= 3",
                  "backgroundColor": "#1D91C0",
                  "font-color": "#05636c"
                },
                {
                  "rule": "%node-value > 1 && %node-value <= 2",
                  "backgroundColor": "#41B6C4",
                  "font-color": "#05636c"
                },
                {
                  "rule": "%node-value > 0 && %node-value <= 1",
                  "backgroundColor": "#7FCDBB",
                  "font-color": "#05636c"
                }
              ]
            },
            "series": [{
                "values": [1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 1, 2, 2, 1, 2],
                "text": "2-3 Ft",
                "legend-marker": {
                  "backgroundColor": "#7FCDBB"
                }
              },
              {
                "values": [2, 2, 2, 2, 2, 2, 3, 3, 3, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 1, 2, 3],
                "text": "3-4 Ft",
                "legend-marker": {
                  "backgroundColor": "#41B6C4"
                }
              },
              {
                "values": [2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2],
                "text": "4-5 Ft",
                "legend-marker": {
                  "backgroundColor": "#1D91C0"
                }
              },
              {
                "values": [2, 3, 3, 2, 3, 3, 3, 4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 3, 3, 3, 3, 3],
                "text": "5-6 Ft",
                "legend-marker": {
                  "backgroundColor": "#225EA8"
                }
              },
              {
                "values": [3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4],
                "text": "6-7 Ft",
                "legend-marker": {
                  "backgroundColor": "#253494"
                }
              },
              {
                "values": [2, 3, 5, 6, 5, 6, 5, 6, 5, 6, 6, 6, 6, 5, 6, 5, 6, 4, 5, 4, 4, 4],
                "text": "7-8 Ft",
                "legend-marker": {
                  "backgroundColor": "#081D58"
                }
              },
              {
                "values": [3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4],
                "text": "1-2 Ft",
                "legend-marker": {
                  "backgroundColor": "#fff"
                },
                "legend-item": {
                  "visible": false
                }
              }
            ]
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 500,
          width: 725
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <link href='http://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'></div>
    </body>
    
    </html>
      "scroll-x": {}
    
      ,
      scaleX: {
        "transform": {
    
          "type":"date",
          "all":"%d %M, %Y",
          "guide": {
            "visible": false
          }
    
          ,
          "item": {
            "visible": false
          }
        }
    
        ,
        "zoom" : {
          "preserve-zoom": true,
            "background-color":"#f90",
            "border-color":"#009",
            "border-width":2,
            "alpha":0.75
        }
    
        ,
        "zooming":true,
        "zoom-to":[3,
        7],
        "zoom-snap": true
      }
      }
    
      ;
    zingchart.THEME = 'classic';
    var myConfig = {
      "globals": {
        "font-family": "Roboto",
      },
      "graphset": [{
        "type": "piano",
        "title": {
          "y": "15px",
          "x": "-10px",
          "text": "Surf Height",
          "background-color": "none",
          "font-color": "#05636c",
          "font-size": "24px",
          "height": "25px"
        },
        "subtitle": {
          "y": "38.5px",
          "x": "-9.5px",
          "text": "Black's Beach - La Jolla",
          "background-color": "none",
          "font-color": "#05636c",
          "font-size": "14px",
          "height": "25px"
        },
        "backgroundColor": "#fff",
        "plotarea": {
          "margin": "100 60 90 60"
        },
        "scaleX": {
          "placement": "opposite",
          "lineWidth": 0,
          "item": {
            "border-color": "none",
            "size": "13px",
            "font-color": "#05636c"
          },
          "guide": {
            "visible": false
          },
          "tick": {
            "visible": false
          },
          "values": ["2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12a", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"],
          "zoom": {
            "preserve-zoom": true,
            "background-color": "#f90",
            "border-color": "#009",
            "border-width": 2,
            "alpha": 0.75
          },
          "zooming": true,
          "zoom-snap": true,
          //"zoomTo": [2,5]
        },
        "scroll-x": {
    
        },
        "scroll-y": {
    
        },
        "scaleY": {
          zooming: true,
          "lineWidth": 0,
          "mirrored": true,
          "tick": {
            "visible": false
          },
          "guide": {
            "visible": false
          },
          "item": {
            "border-color": "none",
            "size": "13px",
            "font-color": "#05636c"
          },
          "values": ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
        },
        "legend": {
          "layout": "x6",
          "y": "83.5%",
          "x": "15%",
          "width": "80%",
          "shadow": false,
          "border-width": 0,
          "toggle-action": "none",
          "item": {
            "border-color": "none",
            "size": "13px",
            "font-color": "#05636c"
          },
          "marker": {
            "type": "square",
            "border-radius": "8",
            "border-color": "none",
            "size": "13px"
          },
          "footer": {
            "border-color": "none",
            "background-color": "none",
            "text-align": "center",
            "font-size": "14px",
            "font-color": "#05636c"
          }
        },
        "plot": {
          "aspect": "none",
          "borderWidth": 2,
          "borderColor": "#eeeeee",
          "borderRadius": 7,
          "tooltip": {
            "font-size": "14px",
            "font-color": "white",
            "text": " The surf will be about %v feet.",
            "text-align": "left"
          },
          "rules": [{
              "rule": "%node-value > 6",
              "backgroundColor": "#081D58",
              "font-color": "#05636c"
            },
            {
              "rule": "%node-value > 4 && %node-value <= 5",
              "backgroundColor": "#253494",
              "font-color": "#05636c"
            },
            {
              "rule": "%node-value > 3 && %node-value <= 4",
              "backgroundColor": "#225EA8",
              "font-color": "#05636c"
            },
            {
              "rule": "%node-value > 2 && %node-value <= 3",
              "backgroundColor": "#1D91C0",
              "font-color": "#05636c"
            },
            {
              "rule": "%node-value > 1 && %node-value <= 2",
              "backgroundColor": "#41B6C4",
              "font-color": "#05636c"
            },
            {
              "rule": "%node-value > 0 && %node-value <= 1",
              "backgroundColor": "#7FCDBB",
              "font-color": "#05636c"
            }
          ]
        },
        "series": [{
            "values": [1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 1, 2, 2, 1, 2],
            "text": "2-3 Ft",
            "legend-marker": {
              "backgroundColor": "#7FCDBB"
            }
          },
          {
            "values": [2, 2, 2, 2, 2, 2, 3, 3, 3, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 1, 2, 3],
            "text": "3-4 Ft",
            "legend-marker": {
              "backgroundColor": "#41B6C4"
            }
          },
          {
            "values": [2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 2],
            "text": "4-5 Ft",
            "legend-marker": {
              "backgroundColor": "#1D91C0"
            }
          },
          {
            "values": [2, 3, 3, 2, 3, 3, 3, 4, 5, 4, 4, 5, 4, 4, 5, 4, 4, 3, 3, 3, 3, 3],
            "text": "5-6 Ft",
            "legend-marker": {
              "backgroundColor": "#225EA8"
            }
          },
          {
            "values": [3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4],
            "text": "6-7 Ft",
            "legend-marker": {
              "backgroundColor": "#253494"
            }
          },
          {
            "values": [2, 3, 5, 6, 5, 6, 5, 6, 5, 6, 6, 6, 6, 5, 6, 5, 6, 4, 5, 4, 4, 4],
            "text": "7-8 Ft",
            "legend-marker": {
              "backgroundColor": "#081D58"
            }
          },
          {
            "values": [3, 2, 3, 2, 3, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 5, 4, 3, 2, 3, 4, 4],
            "text": "1-2 Ft",
            "legend-marker": {
              "backgroundColor": "#fff"
            },
            "legend-item": {
              "visible": false
            }
          }
        ]
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 500,
      width: 725
    });