• 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>
        html,
        body,
        #myChart {
          height: 100%;
          width: 100%;
        }
      </style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          "type": "null",
          "shapes": [{
              "type": "square",
              "gradient-colors": "#59b #9b5 #59b",
              "gradient-stops": "0.1 0.5 0.9",
              "angle": 20,
              "size": 75,
              "x": 100,
              "y": 150,
              "alpha": 0.5
            },
            {
              "type": "triangle",
              "size": 75,
              "background-image": "http://www.zingchart.com/images/pattern_bling.gif",
              "background-repeat": "repeat",
              "x": 280,
              "y": 150,
              "shadow": true,
              "shadow-color": "#89ab57",
              "shadow-angle": 45,
              "shadow-distance": 20
            },
            {
              "type": "circle",
              "size": 75,
              "x": 500,
              "y": 150,
              "background-color": "#89ab57",
              "border-width": 20,
              "border-color": "#5297b6"
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: "100%",
          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>
    html,body,#myChart { height:100%; width:100%;}
    var myConfig =  {
            "type":"null",
            "shapes":[
                {
                    "type":"square",
                    "gradient-colors":"#59b #9b5 #59b",
                    "gradient-stops":"0.1 0.5 0.9",
                    "angle":20,
                    "size":75,
                    "x":100,
                    "y":150,
                    "alpha":0.5
                },
                {
                    "type":"triangle",
                    "size":75,
                    "background-image":"http://www.zingchart.com/images/pattern_bling.gif",
                    "background-repeat":"repeat",
                    "x":280,
                    "y":150,
                    "shadow":true,
                    "shadow-color":"#89ab57",
                    "shadow-angle":45,
                    "shadow-distance":20
                },
                {
                    "type":"circle",
                    "size":75,
                    "x":500,
                    "y":150,
                    "background-color":"#89ab57",
                    "border-width":20,
                    "border-color":"#5297b6"
                }
            ]
        };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height : "100%", 
    	width: "100%"
    });