• 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.     #myChart {
    11.  
    12.       height: 400px;
    13.     }
    14.  
    15.     #button {
    16.       float: left;
    17.       background-color: #C0C0C0;
    18.       height: 20px;
    19.       padding: 5px;
    20.       border-radius: 5px;
    21.     }
    22.  
    23.     #button:hover {
    24.       cursor: pointer;
    25.       background-color: #C1C9C3;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id='myChart'></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       type: "bar",
    36.       legend: {
    37.         toggleAction: "remove",
    38.         adjustLayout: true
    39.       },
    40.       series: [{
    41.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    42.         },
    43.         {
    44.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    45.         },
    46.         {
    47.           values: [135, 42, 67, 189, 25, 344, 67, 845]
    48.         },
    49.         {
    50.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    51.         },
    52.         {
    53.           visible: true,
    54.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    55.         },
    56.         {
    57.           values: [135, 42, 67, 189, 25, 344, 67, 845]
    58.         },
    59.         {
    60.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    61.         },
    62.         {
    63.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    64.         },
    65.         {
    66.           values: [135, 42, 67, 189, 25, 344, 67, 845]
    67.         },
    68.         {
    69.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    70.         },
    71.         {
    72.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    73.         },
    74.         {
    75.           values: [135, 42, 67, 189, 25, 344, 67, 845]
    76.         },
    77.         {
    78.           values: [35, 42, 67, 89, 25, 34, 67, 85]
    79.         }
    80.       ]
    81.     };
    82.  
    83.  
    84.     zingchart.render({
    85.       id: 'myChart',
    86.       data: myConfig,
    87.       height: 400,
    88.       width: "100%"
    89.     });
    90.   </script>
    91. </body>
    92.  
    93. </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.  #myChart {
    2.  
    3.    height: 400px;
    4.  }
    5.  
    6.  #button {
    7.    float: left;
    8.    background-color: #C0C0C0;
    9.    height: 20px;
    10.    padding: 5px;
    11.    border-radius: 5px;
    12.  }
    13.  
    14.  #button:hover {
    15.    cursor: pointer;
    16.    background-color: #C1C9C3;
    17.  }
    1. var myConfig = {
    2.   type: "bar",
    3.   legend: {
    4.     toggleAction: "remove",
    5.     adjustLayout: true
    6.   },
    7.   series: [{
    8.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    9.     },
    10.     {
    11.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    12.     },
    13.     {
    14.       values: [135, 42, 67, 189, 25, 344, 67, 845]
    15.     },
    16.     {
    17.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    18.     },
    19.     {
    20.       visible: true,
    21.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    22.     },
    23.     {
    24.       values: [135, 42, 67, 189, 25, 344, 67, 845]
    25.     },
    26.     {
    27.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    28.     },
    29.     {
    30.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    31.     },
    32.     {
    33.       values: [135, 42, 67, 189, 25, 344, 67, 845]
    34.     },
    35.     {
    36.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    37.     },
    38.     {
    39.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    40.     },
    41.     {
    42.       values: [135, 42, 67, 189, 25, 344, 67, 845]
    43.     },
    44.     {
    45.       values: [35, 42, 67, 89, 25, 34, 67, 85]
    46.     }
    47.   ]
    48. };
    49.  
    50.  
    51. zingchart.render({
    52.   id: 'myChart',
    53.   data: myConfig,
    54.   height: 400,
    55.   width: "100%"
    56. });