• 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.       width: 100%;
    14.       height: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var myConfig = {
    24.       "type": "area",
    25.       "plot": {
    26.         "styles": [{ //Node Index 0
    27.             "line-color": "pink",
    28.             "line-style": "dashdot",
    29.             "background-color": "pink"
    30.           },
    31.           { //Node Index 1
    32.             "line-color": "red",
    33.             "line-style": "dotted",
    34.             "background-color": "red"
    35.           },
    36.           { //Node Index 2
    37.             "line-color": "orange",
    38.             "line-style": "dashed",
    39.             "background-color": "orange"
    40.           },
    41.           { //Node Index 3
    42.             "line-color": "green",
    43.             "line-style": "dashdot",
    44.             "background-color": "green"
    45.           },
    46.           { //Node Index 4
    47.             "line-color": "blue",
    48.             "line-style": "dotted",
    49.             "background-color": "blue"
    50.           },
    51.           { //Node Index 5
    52.             "line-color": "purple",
    53.             "line-style": "dashed",
    54.             "background-color": "purple"
    55.           }
    56.         ],
    57.         "marker": {
    58.           "styles": [{ //Node Index 0
    59.               "background-color": "pink",
    60.               "border-color": "pink"
    61.             },
    62.             { //Node Index 1
    63.               "background-color": "red",
    64.               "border-color": "red"
    65.             },
    66.             { //Node Index 2
    67.               "background-color": "orange",
    68.               "border-color": "orange"
    69.             },
    70.             { //Node Index 3
    71.               "background-color": "green",
    72.               "border-color": "green"
    73.             },
    74.             { //Node Index 4
    75.               "background-color": "blue",
    76.               "border-color": "blue"
    77.             },
    78.             { //Node Index 5
    79.               "background-color": "purple",
    80.               "border-color": "purple"
    81.             }
    82.           ]
    83.         }
    84.       },
    85.       "series": [{
    86.           "values": [3, 4, 11, 5, 19, 7]
    87.         },
    88.         {
    89.           "values": [9, 19, 15, 25, 12, 14]
    90.         },
    91.         {
    92.           "values": [15, 29, 19, 21, 25, 26]
    93.         }
    94.       ]
    95.     };
    96.  
    97.     zingchart.render({
    98.       id: 'myChart',
    99.       data: myConfig,
    100.       height: 400,
    101.       width: "100%"
    102.     });
    103.   </script>
    104. </body>
    105.  
    106. </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.   width: 100%;
    5.   height: 100%;
    6. }
    1. var myConfig = {
    2.   "type": "area",
    3.   "plot": {
    4.     "styles": [{ //Node Index 0
    5.         "line-color": "pink",
    6.         "line-style": "dashdot",
    7.         "background-color": "pink"
    8.       },
    9.       { //Node Index 1
    10.         "line-color": "red",
    11.         "line-style": "dotted",
    12.         "background-color": "red"
    13.       },
    14.       { //Node Index 2
    15.         "line-color": "orange",
    16.         "line-style": "dashed",
    17.         "background-color": "orange"
    18.       },
    19.       { //Node Index 3
    20.         "line-color": "green",
    21.         "line-style": "dashdot",
    22.         "background-color": "green"
    23.       },
    24.       { //Node Index 4
    25.         "line-color": "blue",
    26.         "line-style": "dotted",
    27.         "background-color": "blue"
    28.       },
    29.       { //Node Index 5
    30.         "line-color": "purple",
    31.         "line-style": "dashed",
    32.         "background-color": "purple"
    33.       }
    34.     ],
    35.     "marker": {
    36.       "styles": [{ //Node Index 0
    37.           "background-color": "pink",
    38.           "border-color": "pink"
    39.         },
    40.         { //Node Index 1
    41.           "background-color": "red",
    42.           "border-color": "red"
    43.         },
    44.         { //Node Index 2
    45.           "background-color": "orange",
    46.           "border-color": "orange"
    47.         },
    48.         { //Node Index 3
    49.           "background-color": "green",
    50.           "border-color": "green"
    51.         },
    52.         { //Node Index 4
    53.           "background-color": "blue",
    54.           "border-color": "blue"
    55.         },
    56.         { //Node Index 5
    57.           "background-color": "purple",
    58.           "border-color": "purple"
    59.         }
    60.       ]
    61.     }
    62.   },
    63.   "series": [{
    64.       "values": [3, 4, 11, 5, 19, 7]
    65.     },
    66.     {
    67.       "values": [9, 19, 15, 25, 12, 14]
    68.     },
    69.     {
    70.       "values": [15, 29, 19, 21, 25, 26]
    71.     }
    72.   ]
    73. };
    74.  
    75. zingchart.render({
    76.   id: 'myChart',
    77.   data: myConfig,
    78.   height: 400,
    79.   width: "100%"
    80. });