• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "layout": "1x2",
                "graphset": [{
                        "type": "bar",
                        "plot": {
                            "background-color": "none",
                            "border-width": 1,
                            "border-color": "black",
                            "background-image": "PATTERN_DIAGONAL_BRICK"
                        },
                        "scale-y": {
                            "guide": {
                                "line-style": "dotted"
                            }
                        },
                        "series": [{
                            "values": [31, 16, 35, 5, 59, 33]
                        }]
                    },
                    {
                        "type": "pie",
                        "plot": {
                            "offset-r": 7,
                            "background-color": "none",
                            "border-width": 1,
                            "border-color": "black",
                            "value-box": {
                                "placement": "out",
                                "font-color": "gray",
                                "font-size": 12,
                                "font-weight": "normal"
                            }
                        },
                        "series": [{
                                "values": [30],
                                "background-image": "PATTERN_SHINGLE"
                            },
                            {
                                "values": [34],
                                "background-image": "PATTERN_SOLID_DIAMOND"
                            },
                            {
                                "values": [15],
                                "background-image": "PATTERN_VERTICAL"
                            },
                            {
                                "values": [14],
                                "background-image": "PATTERN_WEAVE"
                            },
                            {
                                "values": [5],
                                "background-image": "PATTERN_DARK_HORIZONTAL"
                            }
                        ]
                    }
                ]
            };
    
            zingchart.loadModules('patterns', function() {
                zingchart.render({
                    id: 'myChart',
                    data: myConfig,
                    height: 400,
                    width: "100%"
                });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id='myChart'></div>
    	</body>
    </html>
    
          
    var myConfig = {
      "layout":"1x2",
      "graphset":[
        {
          "type":"bar",
          "plot":{
            "background-color":"none",
            "border-width":1,
            "border-color":"black",
            "background-image":"PATTERN_DIAGONAL_BRICK"
          },
          "scale-y":{
            "guide":{
              "line-style":"dotted"
            }
          },
          "series":[
            {"values":[31,16,35,5,59,33]}
          ]
        },
        {
          "type":"pie",
          "plot":{
            "offset-r":7,
            "background-color":"none",
            "border-width":1,
            "border-color":"black",
            "value-box":{
              "placement":"out",
              "font-color":"gray",
              "font-size":12,
              "font-weight":"normal"
            }
          },
          "series": [
            {
              "values":[30],
              "background-image":"PATTERN_SHINGLE"
            },
            {
              "values":[34],
              "background-image":"PATTERN_SOLID_DIAMOND"
            },
            {
              "values":[15],
              "background-image":"PATTERN_VERTICAL"
            },
            {
              "values":[14],
              "background-image":"PATTERN_WEAVE"
            },
            {
              "values":[5],
              "background-image":"PATTERN_DARK_HORIZONTAL"
            }
          ]
        }
      ]
    };
    
    zingchart.loadModules('patterns', function() {
      zingchart.render({ 
      	id : 'myChart', 
      	data : myConfig, 
      	height: 400, 
      	width: "100%" 
      });
    });