• 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: "line",
    27.             range: [85],
    28.             lineColor: "red",
    29.             lineWidth: 5,
    30.             lineStyle: "dotted",
    31.             label: {
    32.               text: "Critical",
    33.               backgroundColor: "red",
    34.               fontColor: "white",
    35.               fontSize: 14,
    36.             }
    37.           },
    38.           {
    39.             type: "line",
    40.             range: [60],
    41.             lineColor: "blue"
    42.           },
    43.           {
    44.             type: "line",
    45.             range: [41],
    46.             lineColor: "cyan",
    47.             lineWidth: 2
    48.           },
    49.           {
    50.             type: "line",
    51.             range: [17],
    52.             lineStyle: "dashed",
    53.             lineWidth: 2,
    54.             lineColor: "orange",
    55.             labelPlacement: "opposite",
    56.             label: {
    57.               text: "Offline/<br>Low"
    58.             }
    59.           }
    60.         ],
    61.       },
    62.       series: [{
    63.           values: [34, 93, 46, 100, 33, 78, 10, 24, 92, 77, 12, 1],
    64.           lineColor: "#333",
    65.           marker: {
    66.             backgroundColor: "#333"
    67.           }
    68.         },
    69.         {
    70.           values: [8, 46, 65, 79, 93, 77, 31, 24, 90, 53, 9, 81],
    71.           lineColor: "#787878",
    72.           marker: {
    73.             backgroundColor: "#787878"
    74.           }
    75.         },
    76.         {
    77.           values: [23, 93, 34, 72, 96, 33, 32, 27, 38, 49, 75, 74],
    78.           lineColor: "#a1a1a1",
    79.           marker: {
    80.             backgroundColor: "#a1a1a1"
    81.           }
    82.         }
    83.       ]
    84.     };
    85.  
    86.     zingchart.render({
    87.       id: 'myChart',
    88.       data: myConfig,
    89.       height: 400,
    90.       width: '100%'
    91.     });
    92.   </script>
    93. </body>
    94.  
    95. </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: "line",
    12.         range: [85],
    13.         lineColor: "red",
    14.         lineWidth: 5,
    15.         lineStyle: "dotted",
    16.         label: {
    17.           text: "Critical",
    18.           backgroundColor: "red",
    19.           fontColor: "white",
    20.           fontSize: 14,
    21.         }
    22.       },
    23.       {
    24.         type: "line",
    25.         range: [60],
    26.         lineColor: "blue"
    27.       },
    28.       {
    29.         type: "line",
    30.         range: [41],
    31.         lineColor: "cyan",
    32.         lineWidth: 2
    33.       },
    34.       {
    35.         type: "line",
    36.         range: [17],
    37.         lineStyle: "dashed",
    38.         lineWidth: 2,
    39.         lineColor: "orange",
    40.         labelPlacement: "opposite",
    41.         label: {
    42.           text: "Offline/<br>Low"
    43.         }
    44.       }
    45.     ],
    46.   },
    47.   series: [{
    48.       values: [34, 93, 46, 100, 33, 78, 10, 24, 92, 77, 12, 1],
    49.       lineColor: "#333",
    50.       marker: {
    51.         backgroundColor: "#333"
    52.       }
    53.     },
    54.     {
    55.       values: [8, 46, 65, 79, 93, 77, 31, 24, 90, 53, 9, 81],
    56.       lineColor: "#787878",
    57.       marker: {
    58.         backgroundColor: "#787878"
    59.       }
    60.     },
    61.     {
    62.       values: [23, 93, 34, 72, 96, 33, 32, 27, 38, 49, 75, 74],
    63.       lineColor: "#a1a1a1",
    64.       marker: {
    65.         backgroundColor: "#a1a1a1"
    66.       }
    67.     }
    68.   ]
    69. };
    70.  
    71. zingchart.render({
    72.   id: 'myChart',
    73.   data: myConfig,
    74.   height: 400,
    75.   width: '100%'
    76. });