• 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.       "graphset": [{
    18.           "type": "line",
    19.           "x": "0%",
    20.           "y": "0%",
    21.           "height": "50%",
    22.           "width": "100%",
    23.           "crosshair-x": {
    24.             "shared": true
    25.           },
    26.           "plot": {
    27.             "tooltip": {
    28.               "visible": false
    29.             }
    30.           },
    31.           "plotarea": {
    32.             "adjust-layout": true
    33.           },
    34.           "scale-x": {
    35.             "item": {
    36.               "font-size": 10
    37.             }
    38.           },
    39.           "scale-y": {
    40.             "item": {
    41.               "font-size": 10
    42.             }
    43.           },
    44.           "series": [{
    45.               "values": [20, 40, 25, 50, 15, 45, 33, 34, 49, 53, 19, 35, 24]
    46.             },
    47.             {
    48.               "values": [11, 30, 21, 18, 59, 50, 28, 33, 23, 15, 18, 26, 34]
    49.             }
    50.           ]
    51.         },
    52.         {
    53.           "type": "line",
    54.           "x": "0%",
    55.           "y": "50%",
    56.           "height": "50%",
    57.           "width": "100%",
    58.           "crosshair-x": {
    59.             "shared": true
    60.           },
    61.           "plot": {
    62.             "tooltip": {
    63.               "visible": false
    64.             }
    65.           },
    66.           "plotarea": {
    67.             "adjust-layout": true
    68.           },
    69.           "scale-x": {
    70.             "item": {
    71.               "font-size": 10
    72.             }
    73.           },
    74.           "scale-y": {
    75.             "item": {
    76.               "font-size": 10
    77.             }
    78.           },
    79.           "series": [{
    80.               "values": [30, 21, 18, 21, 33, 41, 29, 15, 11, 12, 26, 23, 26]
    81.             },
    82.             {
    83.               "values": [34, 16, 26, 15, 19, 21, 20, 24, 35, 41, 42, 38, 39]
    84.             }
    85.           ]
    86.         }
    87.       ]
    88.     };
    89.  
    90.     zingchart.render({
    91.       id: 'myChart',
    92.       data: myConfig,
    93.       height: 400,
    94.       width: "100%"
    95.     });
    96.   </script>
    97. </body>
    98.  
    99. </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.   "graphset": [{
    3.       "type": "line",
    4.       "x": "0%",
    5.       "y": "0%",
    6.       "height": "50%",
    7.       "width": "100%",
    8.       "crosshair-x": {
    9.         "shared": true
    10.       },
    11.       "plot": {
    12.         "tooltip": {
    13.           "visible": false
    14.         }
    15.       },
    16.       "plotarea": {
    17.         "adjust-layout": true
    18.       },
    19.       "scale-x": {
    20.         "item": {
    21.           "font-size": 10
    22.         }
    23.       },
    24.       "scale-y": {
    25.         "item": {
    26.           "font-size": 10
    27.         }
    28.       },
    29.       "series": [{
    30.           "values": [20, 40, 25, 50, 15, 45, 33, 34, 49, 53, 19, 35, 24]
    31.         },
    32.         {
    33.           "values": [11, 30, 21, 18, 59, 50, 28, 33, 23, 15, 18, 26, 34]
    34.         }
    35.       ]
    36.     },
    37.     {
    38.       "type": "line",
    39.       "x": "0%",
    40.       "y": "50%",
    41.       "height": "50%",
    42.       "width": "100%",
    43.       "crosshair-x": {
    44.         "shared": true
    45.       },
    46.       "plot": {
    47.         "tooltip": {
    48.           "visible": false
    49.         }
    50.       },
    51.       "plotarea": {
    52.         "adjust-layout": true
    53.       },
    54.       "scale-x": {
    55.         "item": {
    56.           "font-size": 10
    57.         }
    58.       },
    59.       "scale-y": {
    60.         "item": {
    61.           "font-size": 10
    62.         }
    63.       },
    64.       "series": [{
    65.           "values": [30, 21, 18, 21, 33, 41, 29, 15, 11, 12, 26, 23, 26]
    66.         },
    67.         {
    68.           "values": [34, 16, 26, 15, 19, 21, 20, 24, 35, 41, 42, 38, 39]
    69.         }
    70.       ]
    71.     }
    72.   ]
    73. };
    74.  
    75. zingchart.render({
    76.   id: 'myChart',
    77.   data: myConfig,
    78.   height: 400,
    79.   width: "100%"
    80. });