• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfigXb = {
    24.       "type": "mixed",
    25.       "plot": {
    26.         "bars-overlap": "100%",
    27.         "stacked": true,
    28.       },
    29.       "scale-x": {
    30.         "labels": ["Superior", "Michigan", "Huron", "Erie", "Ontario"],
    31.         "guide": {
    32.           "visible": false
    33.         }
    34.       },
    35.       "scale-y": {
    36.         "values": "0:50:10",
    37.         "guide": {
    38.           "visible": false
    39.         }
    40.       },
    41.       "series": [{ //Range Bar 1
    42.           "type": "bar",
    43.           "values": [25, 30, 15, 20, 25],
    44.           "stack": 1,
    45.           "background-color": "gray",
    46.           "alpha": 0.7,
    47.           "hover-state": {
    48.             "visible": false
    49.           },
    50.           "max-trackers": 0,
    51.         },
    52.         { //Range Bar 2
    53.           "type": "bar",
    54.           "values": [20, 10, 30, 25, 15],
    55.           "stack": 1,
    56.           "background-color": "gray",
    57.           "alpha": 0.5,
    58.           "hover-state": {
    59.             "visible": false
    60.           },
    61.           "max-trackers": 0,
    62.         },
    63.         { //Range Bar 3
    64.           "type": "bar",
    65.           "values": [5, 10, 5, 5, 10],
    66.           "stack": 1,
    67.           "background-color": "gray",
    68.           "alpha": 0.3,
    69.           "hover-state": {
    70.             "visible": false
    71.           },
    72.           "max-trackers": 0,
    73.         },
    74.         { //Bullet Bar
    75.           "type": "bar",
    76.           "values": [35, 42, 40, 43, 36],
    77.           "bar-width": "50%",
    78.           "stack": 2,
    79.           "background-color": "black gray",
    80.           "hover-state": {
    81.             "visible": false
    82.           },
    83.           "tooltip": {
    84.             "text": "Actual: %v",
    85.             "font-color": "black",
    86.             "background-color": "white"
    87.           }
    88.         },
    89.         { //Goal 1 (rectangle)
    90.           "type": "scatter",
    91.           "values": [21, 33, 25, 30, 12],
    92.           "marker": {
    93.             "type": "rectangle",
    94.             "background-color": "#333399",
    95.             "border-color": "none",
    96.             "height": "7%",
    97.             "width": "60%"
    98.           },
    99.           "tooltip": {
    100.             "text": "Rectangle Goal: %v",
    101.             "font-color": "black",
    102.             "background-color": "white"
    103.           }
    104.         },
    105.         { //Goal 2 (diamond)
    106.           "type": "scatter",
    107.           "values": [30, 37, 30, 37, 25],
    108.           "marker": {
    109.             "type": "diamond",
    110.             "background-color": "#FF99CC",
    111.             "border-color": "#33CCFF",
    112.             "border-width": 3,
    113.             "size": 8
    114.           },
    115.           "tooltip": {
    116.             "text": "Diamond Goal: %v",
    117.             "font-color": "black",
    118.             "background-color": "white"
    119.           }
    120.         },
    121.         { //Goal 3 (heart)
    122.           "type": "scatter",
    123.           "values": [39, 45, 36, 45, 40],
    124.           "marker": {
    125.             "background-image": "https://www.zingchart.com/resources/heart.png",
    126.             "background-color": "none",
    127.             "border-color": "none",
    128.             "background-repeat": "no-repeat",
    129.             "shadow": false,
    130.             "size": 12
    131.           },
    132.           "tooltip": {
    133.             "text": "Heart Goal: %v",
    134.             "font-color": "black",
    135.             "background-color": "white"
    136.           }
    137.         }
    138.       ]
    139.     };
    140.  
    141.     zingchart.render({
    142.       id: 'myChart',
    143.       data: myConfigXb,
    144.       height: "100%",
    145.       width: "100%"
    146.     });
    147.   </script>
    148. </body>
    149.  
    150. </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='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var myConfigXb = {
    2.   "type": "mixed",
    3.   "plot": {
    4.     "bars-overlap": "100%",
    5.     "stacked": true,
    6.   },
    7.   "scale-x": {
    8.     "labels": ["Superior", "Michigan", "Huron", "Erie", "Ontario"],
    9.     "guide": {
    10.       "visible": false
    11.     }
    12.   },
    13.   "scale-y": {
    14.     "values": "0:50:10",
    15.     "guide": {
    16.       "visible": false
    17.     }
    18.   },
    19.   "series": [{ //Range Bar 1
    20.       "type": "bar",
    21.       "values": [25, 30, 15, 20, 25],
    22.       "stack": 1,
    23.       "background-color": "gray",
    24.       "alpha": 0.7,
    25.       "hover-state": {
    26.         "visible": false
    27.       },
    28.       "max-trackers": 0,
    29.     },
    30.     { //Range Bar 2
    31.       "type": "bar",
    32.       "values": [20, 10, 30, 25, 15],
    33.       "stack": 1,
    34.       "background-color": "gray",
    35.       "alpha": 0.5,
    36.       "hover-state": {
    37.         "visible": false
    38.       },
    39.       "max-trackers": 0,
    40.     },
    41.     { //Range Bar 3
    42.       "type": "bar",
    43.       "values": [5, 10, 5, 5, 10],
    44.       "stack": 1,
    45.       "background-color": "gray",
    46.       "alpha": 0.3,
    47.       "hover-state": {
    48.         "visible": false
    49.       },
    50.       "max-trackers": 0,
    51.     },
    52.     { //Bullet Bar
    53.       "type": "bar",
    54.       "values": [35, 42, 40, 43, 36],
    55.       "bar-width": "50%",
    56.       "stack": 2,
    57.       "background-color": "black gray",
    58.       "hover-state": {
    59.         "visible": false
    60.       },
    61.       "tooltip": {
    62.         "text": "Actual: %v",
    63.         "font-color": "black",
    64.         "background-color": "white"
    65.       }
    66.     },
    67.     { //Goal 1 (rectangle)
    68.       "type": "scatter",
    69.       "values": [21, 33, 25, 30, 12],
    70.       "marker": {
    71.         "type": "rectangle",
    72.         "background-color": "#333399",
    73.         "border-color": "none",
    74.         "height": "7%",
    75.         "width": "60%"
    76.       },
    77.       "tooltip": {
    78.         "text": "Rectangle Goal: %v",
    79.         "font-color": "black",
    80.         "background-color": "white"
    81.       }
    82.     },
    83.     { //Goal 2 (diamond)
    84.       "type": "scatter",
    85.       "values": [30, 37, 30, 37, 25],
    86.       "marker": {
    87.         "type": "diamond",
    88.         "background-color": "#FF99CC",
    89.         "border-color": "#33CCFF",
    90.         "border-width": 3,
    91.         "size": 8
    92.       },
    93.       "tooltip": {
    94.         "text": "Diamond Goal: %v",
    95.         "font-color": "black",
    96.         "background-color": "white"
    97.       }
    98.     },
    99.     { //Goal 3 (heart)
    100.       "type": "scatter",
    101.       "values": [39, 45, 36, 45, 40],
    102.       "marker": {
    103.         "background-image": "https://www.zingchart.com/resources/heart.png",
    104.         "background-color": "none",
    105.         "border-color": "none",
    106.         "background-repeat": "no-repeat",
    107.         "shadow": false,
    108.         "size": 12
    109.       },
    110.       "tooltip": {
    111.         "text": "Heart Goal: %v",
    112.         "font-color": "black",
    113.         "background-color": "white"
    114.       }
    115.     }
    116.   ]
    117. };
    118.  
    119. zingchart.render({
    120.   id: 'myChart',
    121.   data: myConfigXb,
    122.   height: "100%",
    123.   width: "100%"
    124. });