• 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%;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "mixed",
                "title": {
                    "text": "Area/Stacked Bar Mixed Chart"
                },
                "scale-x": {
                    "labels": ["Jan", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "Dec"],
                    "offset": 0
                },
                "scale-y": {
                    "values": "0:90:30",
                    "guide": {
                        "visible": false
                    }
                },
                "series": [{
                        "type": "area",
                        "values": [
                            15, 10, 16, 12, 13, 19, 11, 21, 15, 29,
                            21, 19, 23, 24, 17, 23, 26, 31, 29, 34,
                            19, 54, 23, 44, 33, 34, 30, 47, 61, 31,
                            59, 45, 69, 54, 70, 65, 78, 61, 76, 78,
                            60, 67, 87, 71, 80, 54, 78, 89, 57, 91
                        ],
                        "background-color": "gray",
                        "line-color": "none",
                        "marker": {
                            "type": "none"
                        }
                    },
                    {
                        "type": "bar",
                        "values": [
                            2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 7, 3.1, 2.9, 3.4,
                            1.5, 1.0, 1.6, 1.2, 11, 1.9, 14, 2.1, 1.5, 2.9,
                            5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 9.1,
                            11, 13.1, 21.1, 33, 41, 23.5, 34, 30, 13.7, 51.2,
                            41.2, 23.5, 34.2, 33.1, 32, 21, 19.7, 34, 7, 30.1
                        ],
                        "stacked": true,
                        "stack": 1,
                        "bar-width": "70%",
                        "background-color": "#003300"
                    },
                    {
                        "type": "bar",
                        "values": [
                            1.5, 1.0, 1.6, 1.2, 1.3, 1.9, 1.1, 2.1, 1.5, 2.9,
                            2.1, 1.9, 2.3, 2.4, 1.7, 2.3, 2.6, 3.1, 2.9, 3.4,
                            1.9, 5.4, 2.3, 4.4, 3.3, 3.4, 3.0, 4.7, 6.1, 3.1,
                            5.9, 4.5, 6.9, 5.4, 7.0, 6.5, 7.8, 6.1, 7.6, 7.8,
                            6.0, 6.7, 8.7, 7.1, 8.0, 5.4, 7.8, 8.9, 5.7, 9.1
                        ],
                        "stacked": true,
                        "stack": 1,
                        "bar-width": "70%",
                        "background-color": "#009900"
                    }
                ]
            };
    
            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":"mixed",
      "title":{
        "text":"Area/Stacked Bar Mixed Chart"
      },
      "scale-x":{
        "labels":["Jan","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","Dec"],
        "offset":0
      },
      "scale-y":{
        "values":"0:90:30",
        "guide":{
          "visible":false
        }
      },
      "series":[
        {
          "type":"area",
          "values":[
            15,10,16,12,13,19,11,21,15,29,
    				21,19,23,24,17,23,26,31,29,34,
    				19,54,23,44,33,34,30,47,61,31,
    				59,45,69,54,70,65,78,61,76,78,
    				60,67,87,71,80,54,78,89,57,91
          ],
          "background-color":"gray",
          "line-color":"none",
          "marker":{
            "type":"none"
          }
        },
        {
          "type":"bar",
          "values":[
    				2.1,1.9,2.3,2.4,1.7,2.3,7,3.1,2.9,3.4,        
            1.5,1.0,1.6,1.2,11,1.9,14,2.1,1.5,2.9,
    				5.9,4.5,6.9,5.4,7.0,6.5,7.8,6.1,7.6,9.1,
    				11,13.1,21.1,33,41,23.5,34,30,13.7,51.2,
    				41.2,23.5,34.2,33.1,32,21,19.7,34,7,30.1
          ],
          "stacked":true,
          "stack":1,
          "bar-width":"70%",
          "background-color":"#003300"
        },
        {
          "type":"bar",
          "values":[
            1.5,1.0,1.6,1.2,1.3,1.9,1.1,2.1,1.5,2.9,
    				2.1,1.9,2.3,2.4,1.7,2.3,2.6,3.1,2.9,3.4,
    				1.9,5.4,2.3,4.4,3.3,3.4,3.0,4.7,6.1,3.1,
    				5.9,4.5,6.9,5.4,7.0,6.5,7.8,6.1,7.6,7.8,
    				6.0,6.7,8.7,7.1,8.0,5.4,7.8,8.9,5.7,9.1
          ],
          "stacked":true,
          "stack":1,
          "bar-width":"70%",
          "background-color":"#009900"
        }
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: "100%", 
    	width: "100%"
    });