• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="zones"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var maxYValue = 60;
        var value1 = 40;
        var value2 = 15;
        var value3 = 34;
        var value4 = 14;
        var value5 = 20;
        var zones = {
          "type": "mixed",
          "font-family": "proxima_nova_rgregular",
          "title": {
            "text": "MINUTES IN ZONES",
            "font-family": "proxima_nova_rgregular",
            "background-color": "none",
            "font-color": "#39393d",
            "font-size": "22px",
            "adjustLayout": true
          },
          "plot": {
            "borderRadius": "5px 5px 0 0",
            "bar-width": '50%',
            "-animation": {
              "delay": 300,
              "effect": 11,
              "speed": "500",
              "method": "0",
              "sequence": "3",
              "z-index": 2
            },
            "value-box": {
              "placement": "top-out",
              "text": "%v",
              "decimals": 0,
              "font-color": "#35353b",
              "font-size": "14px",
              "alpha": 1,
              "background-color": "red",
              "padding": "5px 5px 0px 5px",
              "shadow": false,
              "-z-index": 4
            }
          },
          "plotarea": {
            "border-left": "3px solid #39393d",
            "border-bottom": "3px solid #39393d",
            "padding-left": "3px",
            "margin": "dynamic",
            "background-color": "none"
          },
          "tooltip": {
            "visible": false
          },
          "scale-x": {
            "placement": "opposite",
            "labels": ["Zone 1", "Zone 2", "Zone 3", "Zone 4", "Zone 5"],
            "line-width": 0,
            "tick": {
              "visible": false
            },
            "guide": {
              "visible": false
            },
            "item": {
              "offsetY": 25,
              "font-size": 12,
              "fontColor": 'black',
              "bold": true
            },
          },
          "scale-y": {
            "offsetEnd": 45,
            "max-value": maxYValue,
            "visible": false,
            "line-width": 0,
            "guide": {
              "visible": false
            }
          },
          "series": [{
              "type": "bar",
              "values": [
                value1, value2, value3, value4, value5
              ],
              "background-color": "#cdcccc",
              "z-index": 2,
              "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
            },
            {
              "type": "line",
              "line-color": "gray",
              "marker": {
                "backgroundColor": "white",
                "borderWidth": 2,
                "border-color": "#35353b",
                "visible": false,
                "rules": [{
                  "rule": " %node-index%3 == 1 ",
                  "visible": true,
                  "size": 7,
                  "offset-y": -15
                }]
    
              },
              "value-box": {
                "visible": 0
              },
              "values": [
                [0, value1 + 2],
                [0, maxYValue],
                [0, null],
                [1, value2 + 2],
                [1, maxYValue],
                [1, null],
                [2, value3 + 2],
                [2, maxYValue],
                [2, null],
                [3, value4 + 2],
                [3, maxYValue],
                [3, null],
                [4, value5 + 2],
                [4, maxYValue],
                [4, null],
              ]
            }
          ]
        }
        zingchart.render({
          id: 'zones',
          data: zones,
          height: "320",
          width: "100%",
          output: 'canvas'
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id="zones"></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var maxYValue = 60;
    var value1 = 40;
    var value2 = 15;
    var value3 = 34;
    var value4 = 14;
    var value5 = 20;
    var zones = {
      "type": "mixed",
      "font-family": "proxima_nova_rgregular",
      "title": {
        "text": "MINUTES IN ZONES",
        "font-family": "proxima_nova_rgregular",
        "background-color": "none",
        "font-color": "#39393d",
        "font-size": "22px",
        "adjustLayout": true
      },
      "plot": {
        "borderRadius": "5px 5px 0 0",
        "bar-width": '50%',
        "-animation": {
          "delay": 300,
          "effect": 11,
          "speed": "500",
          "method": "0",
          "sequence": "3",
          "z-index": 2
        },
        "value-box": {
          "placement": "top-out",
          "text": "%v",
          "decimals": 0,
          "font-color": "#35353b",
          "font-size": "14px",
          "alpha": 1,
          "background-color": "red",
          "padding": "5px 5px 0px 5px",
          "shadow": false,
          "-z-index": 4
        }
      },
      "plotarea": {
        "border-left": "3px solid #39393d",
        "border-bottom": "3px solid #39393d",
        "padding-left": "3px",
        "margin": "dynamic",
        "background-color": "none"
      },
      "tooltip": {
        "visible": false
      },
      "scale-x": {
        "placement": "opposite",
        "labels": ["Zone 1", "Zone 2", "Zone 3", "Zone 4", "Zone 5"],
        "line-width": 0,
        "tick": {
          "visible": false
        },
        "guide": {
          "visible": false
        },
        "item": {
          "offsetY": 25,
          "font-size": 12,
          "fontColor": 'black',
          "bold": true
        },
      },
      "scale-y": {
        "offsetEnd": 45,
        "max-value": maxYValue,
        "visible": false,
        "line-width": 0,
        "guide": {
          "visible": false
        }
      },
      "series": [{
          "type": "bar",
          "values": [
            value1, value2, value3, value4, value5
          ],
          "background-color": "#cdcccc",
          "z-index": 2,
          "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
        },
        {
          "type": "line",
          "line-color": "gray",
          "marker": {
            "backgroundColor": "white",
            "borderWidth": 2,
            "border-color": "#35353b",
            "visible": false,
            "rules": [{
              "rule": " %node-index%3 == 1 ",
              "visible": true,
              "size": 7,
              "offset-y": -15
            }]
    
          },
          "value-box": {
            "visible": 0
          },
          "values": [
            [0, value1 + 2],
            [0, maxYValue],
            [0, null],
            [1, value2 + 2],
            [1, maxYValue],
            [1, null],
            [2, value3 + 2],
            [2, maxYValue],
            [2, null],
            [3, value4 + 2],
            [3, maxYValue],
            [3, null],
            [4, value5 + 2],
            [4, maxYValue],
            [4, null],
          ]
        }
      ]
    }
    zingchart.render({
      id: 'zones',
      data: zones,
      height: "320",
      width: "100%",
      output: 'canvas'
    });