• 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 myConfig16 = {
    24.       "graphset": [{ //Chart 1
    25.           "type": "bullet",
    26.           "height": "100%",
    27.           "width": "33.33%",
    28.           "x": "0%",
    29.           "y": "0%",
    30.           "scale-x": {
    31.             "labels": ["California"],
    32.             "guide": {
    33.               "visible": false
    34.             },
    35.             "tick": {
    36.               "visible": false
    37.             }
    38.           },
    39.           "scale-y": {
    40.             "markers": [ //Scale Markers to create multiple ranges on bullet charts.
    41.               {
    42.                 "type": "area",
    43.                 "range": [0, 7],
    44.                 "background-color": "red"
    45.               },
    46.               {
    47.                 "type": "area",
    48.                 "range": [7, 21],
    49.                 "background-color": "orange"
    50.               },
    51.               {
    52.                 "type": "area",
    53.                 "range": [21, 30],
    54.                 "background-color": "yellow"
    55.               },
    56.             ],
    57.             "guide": {
    58.               "visible": false
    59.             }
    60.           },
    61.           "series": [{
    62.             "values": [20],
    63.             "goals": [23],
    64.             "background-color": "black",
    65.             "bar-width": "80%"
    66.           }]
    67.         },
    68.         { //Chart 2
    69.           "type": "bullet",
    70.           "height": "100%",
    71.           "width": "33.33%",
    72.           "x": "33.33%",
    73.           "y": "0%",
    74.           "scale-x": {
    75.             "labels": ["Oregon"],
    76.             "guide": {
    77.               "visible": false
    78.             },
    79.             "tick": {
    80.               "visible": false
    81.             }
    82.           },
    83.           "scale-y": {
    84.             "markers": [{
    85.                 "type": "area",
    86.                 "range": [0, 10],
    87.                 "background-color": "blue",
    88.                 "alpha": 1
    89.               },
    90.               {
    91.                 "type": "area",
    92.                 "range": [10, 20],
    93.                 "background-color": "green",
    94.                 "alpha": 1
    95.               },
    96.               {
    97.                 "type": "area",
    98.                 "range": [20, 30],
    99.                 "background-color": "orange",
    100.                 "alpha": 1
    101.               }
    102.             ],
    103.             "guide": {
    104.               "visible": false
    105.             }
    106.           },
    107.           "scale-y-2": {
    108.             "values": "0:30:10",
    109.             "guide": {
    110.               "visible": false
    111.             }
    112.           },
    113.           "series": [{
    114.             "values": [9],
    115.             "goals": [21],
    116.             "background-color": "white"
    117.           }]
    118.         },
    119.         { //Chart 3
    120.           "type": "bullet",
    121.           "height": "100%",
    122.           "width": "33.33%",
    123.           "x": "66.66%",
    124.           "y": "0%",
    125.           "scale-x": {
    126.             "labels": ["Washington"],
    127.             "guide": {
    128.               "visible": false
    129.             },
    130.             "tick": {
    131.               "visible": false
    132.             }
    133.           },
    134.           "scale-y": {
    135.             "placement": "opposite",
    136.             "markers": [{
    137.                 "type": "area",
    138.                 "range": [0, 13],
    139.                 "background-color": "yellow",
    140.                 "alpha": 1
    141.               },
    142.               {
    143.                 "type": "area",
    144.                 "range": [13, 18],
    145.                 "background-color": "purple",
    146.                 "alpha": 1
    147.               },
    148.               {
    149.                 "type": "area",
    150.                 "range": [18, 30],
    151.                 "background-color": "green",
    152.                 "alpha": 1
    153.               }
    154.             ],
    155.             "guide": {
    156.               "visible": false
    157.             }
    158.           },
    159.           "series": [{
    160.             "values": [15],
    161.             "goals": [25],
    162.             "background-color": "gray",
    163.             "bar-width": "80%"
    164.           }]
    165.         }
    166.       ]
    167.     };
    168.  
    169.     zingchart.render({
    170.       id: 'myChart',
    171.       data: myConfig16,
    172.       height: "100%",
    173.       width: "100%"
    174.     });
    175.   </script>
    176. </body>
    177.  
    178. </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 myConfig16 = {
    2.   "graphset": [{ //Chart 1
    3.       "type": "bullet",
    4.       "height": "100%",
    5.       "width": "33.33%",
    6.       "x": "0%",
    7.       "y": "0%",
    8.       "scale-x": {
    9.         "labels": ["California"],
    10.         "guide": {
    11.           "visible": false
    12.         },
    13.         "tick": {
    14.           "visible": false
    15.         }
    16.       },
    17.       "scale-y": {
    18.         "markers": [ //Scale Markers to create multiple ranges on bullet charts.
    19.           {
    20.             "type": "area",
    21.             "range": [0, 7],
    22.             "background-color": "red"
    23.           },
    24.           {
    25.             "type": "area",
    26.             "range": [7, 21],
    27.             "background-color": "orange"
    28.           },
    29.           {
    30.             "type": "area",
    31.             "range": [21, 30],
    32.             "background-color": "yellow"
    33.           },
    34.         ],
    35.         "guide": {
    36.           "visible": false
    37.         }
    38.       },
    39.       "series": [{
    40.         "values": [20],
    41.         "goals": [23],
    42.         "background-color": "black",
    43.         "bar-width": "80%"
    44.       }]
    45.     },
    46.     { //Chart 2
    47.       "type": "bullet",
    48.       "height": "100%",
    49.       "width": "33.33%",
    50.       "x": "33.33%",
    51.       "y": "0%",
    52.       "scale-x": {
    53.         "labels": ["Oregon"],
    54.         "guide": {
    55.           "visible": false
    56.         },
    57.         "tick": {
    58.           "visible": false
    59.         }
    60.       },
    61.       "scale-y": {
    62.         "markers": [{
    63.             "type": "area",
    64.             "range": [0, 10],
    65.             "background-color": "blue",
    66.             "alpha": 1
    67.           },
    68.           {
    69.             "type": "area",
    70.             "range": [10, 20],
    71.             "background-color": "green",
    72.             "alpha": 1
    73.           },
    74.           {
    75.             "type": "area",
    76.             "range": [20, 30],
    77.             "background-color": "orange",
    78.             "alpha": 1
    79.           }
    80.         ],
    81.         "guide": {
    82.           "visible": false
    83.         }
    84.       },
    85.       "scale-y-2": {
    86.         "values": "0:30:10",
    87.         "guide": {
    88.           "visible": false
    89.         }
    90.       },
    91.       "series": [{
    92.         "values": [9],
    93.         "goals": [21],
    94.         "background-color": "white"
    95.       }]
    96.     },
    97.     { //Chart 3
    98.       "type": "bullet",
    99.       "height": "100%",
    100.       "width": "33.33%",
    101.       "x": "66.66%",
    102.       "y": "0%",
    103.       "scale-x": {
    104.         "labels": ["Washington"],
    105.         "guide": {
    106.           "visible": false
    107.         },
    108.         "tick": {
    109.           "visible": false
    110.         }
    111.       },
    112.       "scale-y": {
    113.         "placement": "opposite",
    114.         "markers": [{
    115.             "type": "area",
    116.             "range": [0, 13],
    117.             "background-color": "yellow",
    118.             "alpha": 1
    119.           },
    120.           {
    121.             "type": "area",
    122.             "range": [13, 18],
    123.             "background-color": "purple",
    124.             "alpha": 1
    125.           },
    126.           {
    127.             "type": "area",
    128.             "range": [18, 30],
    129.             "background-color": "green",
    130.             "alpha": 1
    131.           }
    132.         ],
    133.         "guide": {
    134.           "visible": false
    135.         }
    136.       },
    137.       "series": [{
    138.         "values": [15],
    139.         "goals": [25],
    140.         "background-color": "gray",
    141.         "bar-width": "80%"
    142.       }]
    143.     }
    144.   ]
    145. };
    146.  
    147. zingchart.render({
    148.   id: 'myChart',
    149.   data: myConfig16,
    150.   height: "100%",
    151.   width: "100%"
    152. });