• 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": "1x2",
    18.       "graphset": [{
    19.           "type": "bar",
    20.           "plot": {
    21.             "background-color": "none",
    22.             "border-width": 1,
    23.             "border-color": "black",
    24.             "background-image": "PATTERN_DIAGONAL_BRICK"
    25.           },
    26.           "series": [{
    27.             "values": [31, 16, 35, 5, 59, 33]
    28.           }]
    29.         },
    30.         {
    31.           "type": "pie",
    32.           "plot": {
    33.             "offset-r": "7%",
    34.             "background-color": "none",
    35.             "border-width": 1,
    36.             "border-color": "black",
    37.             "value-box": {
    38.               "placement": "out",
    39.               "font-color": "gray",
    40.               "font-size": 12,
    41.               "font-weight": "normal"
    42.             }
    43.           },
    44.           "series": [{
    45.               "values": [30],
    46.               "background-image": "PATTERN_SHINGLE"
    47.             },
    48.             {
    49.               "values": [34],
    50.               "background-image": "PATTERN_SOLID_DIAMOND"
    51.             },
    52.             {
    53.               "values": [15],
    54.               "background-image": "PATTERN_VERTICAL"
    55.             },
    56.             {
    57.               "values": [14],
    58.               "background-image": "PATTERN_WEAVE"
    59.             },
    60.             {
    61.               "values": [5],
    62.               "background-image": "PATTERN_DARK_HORIZONTAL"
    63.             }
    64.           ]
    65.         }
    66.       ]
    67.     };
    68.  
    69.     zingchart.loadModules('patterns');
    70.     zingchart.render({
    71.       id: 'myChart',
    72.       data: myConfig,
    73.       height: 400,
    74.       width: "100%"
    75.     });
    76.   </script>
    77. </body>
    78.  
    79. </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": "1x2",
    3.   "graphset": [{
    4.       "type": "bar",
    5.       "plot": {
    6.         "background-color": "none",
    7.         "border-width": 1,
    8.         "border-color": "black",
    9.         "background-image": "PATTERN_DIAGONAL_BRICK"
    10.       },
    11.       "series": [{
    12.         "values": [31, 16, 35, 5, 59, 33]
    13.       }]
    14.     },
    15.     {
    16.       "type": "pie",
    17.       "plot": {
    18.         "offset-r": "7%",
    19.         "background-color": "none",
    20.         "border-width": 1,
    21.         "border-color": "black",
    22.         "value-box": {
    23.           "placement": "out",
    24.           "font-color": "gray",
    25.           "font-size": 12,
    26.           "font-weight": "normal"
    27.         }
    28.       },
    29.       "series": [{
    30.           "values": [30],
    31.           "background-image": "PATTERN_SHINGLE"
    32.         },
    33.         {
    34.           "values": [34],
    35.           "background-image": "PATTERN_SOLID_DIAMOND"
    36.         },
    37.         {
    38.           "values": [15],
    39.           "background-image": "PATTERN_VERTICAL"
    40.         },
    41.         {
    42.           "values": [14],
    43.           "background-image": "PATTERN_WEAVE"
    44.         },
    45.         {
    46.           "values": [5],
    47.           "background-image": "PATTERN_DARK_HORIZONTAL"
    48.         }
    49.       ]
    50.     }
    51.   ]
    52. };
    53.  
    54. zingchart.loadModules('patterns');
    55. zingchart.render({
    56.   id: 'myChart',
    57.   data: myConfig,
    58.   height: 400,
    59.   width: "100%"
    60. });