• 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></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       type: "line",
    18.       title: {
    19.         text: "Server Load"
    20.       },
    21.       subtitle: {
    22.         text: "CoLocation North"
    23.       },
    24.       scaleY: {
    25.         markers: [{
    26.             type: "area",
    27.             range: [85, 100],
    28.             backgroundColor: "#9d0404",
    29.             alpha: 0.7
    30.           },
    31.           {
    32.             type: "area",
    33.             range: [60, 85],
    34.             backgroundColor: "#d89108",
    35.             alpha: 0.7
    36.           },
    37.           {
    38.             type: "area",
    39.             range: [20, 60],
    40.             backgroundColor: "#068b04",
    41.             alpha: 0.7
    42.           },
    43.           {
    44.             type: "area",
    45.             range: [0, 20],
    46.             backgroundColor: "#045b8b",
    47.             alpha: 0.7
    48.           }
    49.         ],
    50.       },
    51.       series: [{
    52.           values: [34, 93, 46, 100, 33, 78, 10, 24, 92, 77, 12, 1],
    53.           lineColor: "#333",
    54.           marker: {
    55.             backgroundColor: "#333"
    56.           }
    57.         },
    58.         {
    59.           values: [8, 46, 65, 79, 93, 77, 31, 24, 90, 53, 9, 81],
    60.           lineColor: "#787878",
    61.           marker: {
    62.             backgroundColor: "#787878"
    63.           }
    64.         },
    65.         {
    66.           values: [23, 93, 34, 72, 96, 33, 32, 27, 38, 49, 75, 74],
    67.           lineColor: "#a1a1a1",
    68.           marker: {
    69.             backgroundColor: "#a1a1a1"
    70.           }
    71.         }
    72.       ]
    73.     };
    74.  
    75.     zingchart.render({
    76.       id: 'myChart',
    77.       data: myConfig,
    78.       height: 400,
    79.       width: '100%'
    80.     });
    81.   </script>
    82. </body>
    83.  
    84. </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.  
    1. var myConfig = {
    2.   type: "line",
    3.   title: {
    4.     text: "Server Load"
    5.   },
    6.   subtitle: {
    7.     text: "CoLocation North"
    8.   },
    9.   scaleY: {
    10.     markers: [{
    11.         type: "area",
    12.         range: [85, 100],
    13.         backgroundColor: "#9d0404",
    14.         alpha: 0.7
    15.       },
    16.       {
    17.         type: "area",
    18.         range: [60, 85],
    19.         backgroundColor: "#d89108",
    20.         alpha: 0.7
    21.       },
    22.       {
    23.         type: "area",
    24.         range: [20, 60],
    25.         backgroundColor: "#068b04",
    26.         alpha: 0.7
    27.       },
    28.       {
    29.         type: "area",
    30.         range: [0, 20],
    31.         backgroundColor: "#045b8b",
    32.         alpha: 0.7
    33.       }
    34.     ],
    35.   },
    36.   series: [{
    37.       values: [34, 93, 46, 100, 33, 78, 10, 24, 92, 77, 12, 1],
    38.       lineColor: "#333",
    39.       marker: {
    40.         backgroundColor: "#333"
    41.       }
    42.     },
    43.     {
    44.       values: [8, 46, 65, 79, 93, 77, 31, 24, 90, 53, 9, 81],
    45.       lineColor: "#787878",
    46.       marker: {
    47.         backgroundColor: "#787878"
    48.       }
    49.     },
    50.     {
    51.       values: [23, 93, 34, 72, 96, 33, 32, 27, 38, 49, 75, 74],
    52.       lineColor: "#a1a1a1",
    53.       marker: {
    54.         backgroundColor: "#a1a1a1"
    55.       }
    56.     }
    57.   ]
    58. };
    59.  
    60. zingchart.render({
    61.   id: 'myChart',
    62.   data: myConfig,
    63.   height: 400,
    64.   width: '100%'
    65. });