• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="zones"></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var maxYValue = 60;
    35.     var value1 = 40;
    36.     var value2 = 15;
    37.     var value3 = 34;
    38.     var value4 = 14;
    39.     var value5 = 20;
    40.     var zones = {
    41.       "type": "mixed",
    42.       "font-family": "proxima_nova_rgregular",
    43.       "title": {
    44.         "text": "MINUTES IN ZONES",
    45.         "font-family": "proxima_nova_rgregular",
    46.         "background-color": "none",
    47.         "font-color": "#39393d",
    48.         "font-size": "22px",
    49.         "adjustLayout": true
    50.       },
    51.       "plot": {
    52.         "borderRadius": "5px 5px 0 0",
    53.         "bar-width": '50%',
    54.         "-animation": {
    55.           "delay": 300,
    56.           "effect": 11,
    57.           "speed": "500",
    58.           "method": "0",
    59.           "sequence": "3",
    60.           "z-index": 2
    61.         },
    62.         "value-box": {
    63.           "placement": "top-out",
    64.           "text": "%v",
    65.           "decimals": 0,
    66.           "font-color": "#35353b",
    67.           "font-size": "14px",
    68.           "alpha": 1,
    69.           "background-color": "red",
    70.           "padding": "5px 5px 0px 5px",
    71.           "shadow": false,
    72.           "-z-index": 4
    73.         }
    74.       },
    75.       "plotarea": {
    76.         "border-left": "3px solid #39393d",
    77.         "border-bottom": "3px solid #39393d",
    78.         "padding-left": "3px",
    79.         "margin": "dynamic",
    80.         "background-color": "none"
    81.       },
    82.       "tooltip": {
    83.         "visible": false
    84.       },
    85.       "scale-x": {
    86.         "placement": "opposite",
    87.         "labels": ["Zone 1", "Zone 2", "Zone 3", "Zone 4", "Zone 5"],
    88.         "line-width": 0,
    89.         "tick": {
    90.           "visible": false
    91.         },
    92.         "guide": {
    93.           "visible": false
    94.         },
    95.         "item": {
    96.           "offsetY": 25,
    97.           "font-size": 12,
    98.           "fontColor": 'black',
    99.           "bold": true
    100.         },
    101.       },
    102.       "scale-y": {
    103.         "offsetEnd": 45,
    104.         "max-value": maxYValue,
    105.         "visible": false,
    106.         "line-width": 0,
    107.         "guide": {
    108.           "visible": false
    109.         }
    110.       },
    111.       "series": [{
    112.           "type": "bar",
    113.           "values": [
    114.             value1, value2, value3, value4, value5
    115.           ],
    116.           "background-color": "#cdcccc",
    117.           "z-index": 2,
    118.           "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
    119.         },
    120.         {
    121.           "type": "line",
    122.           "line-color": "gray",
    123.           "marker": {
    124.             "backgroundColor": "white",
    125.             "borderWidth": 2,
    126.             "border-color": "#35353b",
    127.             "visible": false,
    128.             "rules": [{
    129.               "rule": " %node-index%3 == 1 ",
    130.               "visible": true,
    131.               "size": 7,
    132.               "offset-y": -15
    133.             }]
    134.  
    135.           },
    136.           "value-box": {
    137.             "visible": 0
    138.           },
    139.           "values": [
    140.             [0, value1 + 2],
    141.             [0, maxYValue],
    142.             [0, null],
    143.             [1, value2 + 2],
    144.             [1, maxYValue],
    145.             [1, null],
    146.             [2, value3 + 2],
    147.             [2, maxYValue],
    148.             [2, null],
    149.             [3, value4 + 2],
    150.             [3, maxYValue],
    151.             [3, null],
    152.             [4, value5 + 2],
    153.             [4, maxYValue],
    154.             [4, null],
    155.           ]
    156.         }
    157.       ]
    158.     }
    159.     zingchart.render({
    160.       id: 'zones',
    161.       data: zones,
    162.       height: "320",
    163.       width: "100%",
    164.       output: 'canvas'
    165.     });
    166.   </script>
    167. </body>
    168.  
    169. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="zones"></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var maxYValue = 60;
    2. var value1 = 40;
    3. var value2 = 15;
    4. var value3 = 34;
    5. var value4 = 14;
    6. var value5 = 20;
    7. var zones = {
    8.   "type": "mixed",
    9.   "font-family": "proxima_nova_rgregular",
    10.   "title": {
    11.     "text": "MINUTES IN ZONES",
    12.     "font-family": "proxima_nova_rgregular",
    13.     "background-color": "none",
    14.     "font-color": "#39393d",
    15.     "font-size": "22px",
    16.     "adjustLayout": true
    17.   },
    18.   "plot": {
    19.     "borderRadius": "5px 5px 0 0",
    20.     "bar-width": '50%',
    21.     "-animation": {
    22.       "delay": 300,
    23.       "effect": 11,
    24.       "speed": "500",
    25.       "method": "0",
    26.       "sequence": "3",
    27.       "z-index": 2
    28.     },
    29.     "value-box": {
    30.       "placement": "top-out",
    31.       "text": "%v",
    32.       "decimals": 0,
    33.       "font-color": "#35353b",
    34.       "font-size": "14px",
    35.       "alpha": 1,
    36.       "background-color": "red",
    37.       "padding": "5px 5px 0px 5px",
    38.       "shadow": false,
    39.       "-z-index": 4
    40.     }
    41.   },
    42.   "plotarea": {
    43.     "border-left": "3px solid #39393d",
    44.     "border-bottom": "3px solid #39393d",
    45.     "padding-left": "3px",
    46.     "margin": "dynamic",
    47.     "background-color": "none"
    48.   },
    49.   "tooltip": {
    50.     "visible": false
    51.   },
    52.   "scale-x": {
    53.     "placement": "opposite",
    54.     "labels": ["Zone 1", "Zone 2", "Zone 3", "Zone 4", "Zone 5"],
    55.     "line-width": 0,
    56.     "tick": {
    57.       "visible": false
    58.     },
    59.     "guide": {
    60.       "visible": false
    61.     },
    62.     "item": {
    63.       "offsetY": 25,
    64.       "font-size": 12,
    65.       "fontColor": 'black',
    66.       "bold": true
    67.     },
    68.   },
    69.   "scale-y": {
    70.     "offsetEnd": 45,
    71.     "max-value": maxYValue,
    72.     "visible": false,
    73.     "line-width": 0,
    74.     "guide": {
    75.       "visible": false
    76.     }
    77.   },
    78.   "series": [{
    79.       "type": "bar",
    80.       "values": [
    81.         value1, value2, value3, value4, value5
    82.       ],
    83.       "background-color": "#cdcccc",
    84.       "z-index": 2,
    85.       "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629']
    86.     },
    87.     {
    88.       "type": "line",
    89.       "line-color": "gray",
    90.       "marker": {
    91.         "backgroundColor": "white",
    92.         "borderWidth": 2,
    93.         "border-color": "#35353b",
    94.         "visible": false,
    95.         "rules": [{
    96.           "rule": " %node-index%3 == 1 ",
    97.           "visible": true,
    98.           "size": 7,
    99.           "offset-y": -15
    100.         }]
    101.  
    102.       },
    103.       "value-box": {
    104.         "visible": 0
    105.       },
    106.       "values": [
    107.         [0, value1 + 2],
    108.         [0, maxYValue],
    109.         [0, null],
    110.         [1, value2 + 2],
    111.         [1, maxYValue],
    112.         [1, null],
    113.         [2, value3 + 2],
    114.         [2, maxYValue],
    115.         [2, null],
    116.         [3, value4 + 2],
    117.         [3, maxYValue],
    118.         [3, null],
    119.         [4, value5 + 2],
    120.         [4, maxYValue],
    121.         [4, null],
    122.       ]
    123.     }
    124.   ]
    125. }
    126. zingchart.render({
    127.   id: 'zones',
    128.   data: zones,
    129.   height: "320",
    130.   width: "100%",
    131.   output: 'canvas'
    132. });