• 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.       layout: "2x2",
    18.       graphset: [{
    19.           type: "bar",
    20.           backgroundColor: "#E0E0E0",
    21.           x: 0, //position from left of chart edge
    22.           y: 0, //position top of chart
    23.           height: "25%",
    24.           width: "100%",
    25.           plotarea: { //effects main chart region
    26.             margin: "dynamic"
    27.           },
    28.           series: [{
    29.               values: [35, 42, 67, 89]
    30.             },
    31.             {
    32.               values: [28, 40, 39, 36]
    33.             }
    34.           ]
    35.         },
    36.         {
    37.           type: "line",
    38.           backgroundColor: "#BDBDBD",
    39.           x: 0,
    40.           y: "25%",
    41.           height: "40%",
    42.           width: "50%",
    43.           plotarea: {
    44.             margin: "dynamic"
    45.           },
    46.           series: [{
    47.               values: [42, 35, 19, 50]
    48.             },
    49.             {
    50.               values: [36, 21, 45, 47]
    51.             }
    52.           ]
    53.         },
    54.         {
    55.           type: "area",
    56.           backgroundColor: "#9E9E9E",
    57.           x: "50%",
    58.           y: "25%",
    59.           height: "40%",
    60.           width: "50%",
    61.           plotarea: {
    62.             margin: "dynamic"
    63.           },
    64.           series: [{
    65.               values: [42, 35, 19, 50]
    66.             },
    67.             {
    68.               values: [36, 21, 45, 47]
    69.             }
    70.           ]
    71.         },
    72.         {
    73.           type: "hbar",
    74.           backgroundColor: "#F5F5F5",
    75.           x: 0,
    76.           y: "65%",
    77.           height: "35%",
    78.           width: "100%",
    79.           plotarea: {
    80.             margin: "dynamic"
    81.           },
    82.           series: [{
    83.               values: [42]
    84.             },
    85.             {
    86.               values: [36]
    87.             }
    88.           ]
    89.         }
    90.       ]
    91.     };
    92.  
    93.     zingchart.render({
    94.       id: 'myChart',
    95.       data: myConfig,
    96.       height: 500,
    97.       width: '100%'
    98.     });
    99.   </script>
    100. </body>
    101.  
    102. </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.   layout: "2x2",
    3.   graphset: [{
    4.       type: "bar",
    5.       backgroundColor: "#E0E0E0",
    6.       x: 0, //position from left of chart edge
    7.       y: 0, //position top of chart
    8.       height: "25%",
    9.       width: "100%",
    10.       plotarea: { //effects main chart region
    11.         margin: "dynamic"
    12.       },
    13.       series: [{
    14.           values: [35, 42, 67, 89]
    15.         },
    16.         {
    17.           values: [28, 40, 39, 36]
    18.         }
    19.       ]
    20.     },
    21.     {
    22.       type: "line",
    23.       backgroundColor: "#BDBDBD",
    24.       x: 0,
    25.       y: "25%",
    26.       height: "40%",
    27.       width: "50%",
    28.       plotarea: {
    29.         margin: "dynamic"
    30.       },
    31.       series: [{
    32.           values: [42, 35, 19, 50]
    33.         },
    34.         {
    35.           values: [36, 21, 45, 47]
    36.         }
    37.       ]
    38.     },
    39.     {
    40.       type: "area",
    41.       backgroundColor: "#9E9E9E",
    42.       x: "50%",
    43.       y: "25%",
    44.       height: "40%",
    45.       width: "50%",
    46.       plotarea: {
    47.         margin: "dynamic"
    48.       },
    49.       series: [{
    50.           values: [42, 35, 19, 50]
    51.         },
    52.         {
    53.           values: [36, 21, 45, 47]
    54.         }
    55.       ]
    56.     },
    57.     {
    58.       type: "hbar",
    59.       backgroundColor: "#F5F5F5",
    60.       x: 0,
    61.       y: "65%",
    62.       height: "35%",
    63.       width: "100%",
    64.       plotarea: {
    65.         margin: "dynamic"
    66.       },
    67.       series: [{
    68.           values: [42]
    69.         },
    70.         {
    71.           values: [36]
    72.         }
    73.       ]
    74.     }
    75.   ]
    76. };
    77.  
    78. zingchart.render({
    79.   id: 'myChart',
    80.   data: myConfig,
    81.   height: 500,
    82.   width: '100%'
    83. });