• 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": "Bubble/Line Mixed Chart"
                },
                "scale-x": {
                    "labels": ["7:00", "7:15", "7:30", "7:45", "8:00", "8:15", "8:30"],
                    "offset": 15
                },
                "scale-y": {
                    "values": "0:80:20",
                    "guide": {
                        "visible": false
                    },
                    "markers": [{
                        "type": "area",
                        "range": [20, 60],
                        "background-color": "#ffe5ff"
                    }]
                },
                "series": [{
                        "type": "line",
                        "values": [19, 15, 39, 23, 37, 70, 30],
                        "aspect": "spline",
                        "line-color": "#ff5050",
                        "marker": {
                            "type": "square",
                            "background-color": "#ff5050"
                        },
                        "value-box": {
                            "type": "first,last"
                        }
                    },
                    {
                        "type": "line",
                        "values": [15, 29, 21, 34, 59, 30, 71],
                        "aspect": "spline",
                        "line-color": "#666699",
                        "marker": {
                            "type": "diamond",
                            "background-color": "#666699"
                        },
                        "value-box": {
                            "type": "first,last"
                        }
                    },
                    {
                        "type": "bubble",
                        "values": [
                            [3.4, 34, 30],
                            [3.5, 61, 15],
                            [3.6, 50, 7],
                            [3.7, 21, 45],
                            [4.1, 49, 31],
                            [4.6, 39, 5],
                            [5.1, 55, 33],
                            [5.7, 43, 25],
                            [5.8, 62, 5]
                        ],
                        "marker": {
                            "background-color": "#660066"
                        }
                    }
                ]
            };
    
            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":"Bubble/Line Mixed Chart"
      },
      "scale-x":{
        "labels":["7:00","7:15","7:30","7:45","8:00","8:15","8:30"],
        "offset":15
      },
      "scale-y":{
        "values":"0:80:20",
        "guide":{
          "visible":false
        },
        "markers":[
          {
            "type":"area",
            "range":[20,60],
            "background-color":"#ffe5ff"
          }
        ]
      },
      "series":[
        {
          "type":"line",
    			"values": [19,15,39,23,37,70,30],
    			"aspect":"spline",
    			"line-color":"#ff5050",
    			"marker":{
    			  "type":"square",
    			  "background-color":"#ff5050"
    			},
    			"value-box":{
    			  "type":"first,last"
    			}
        },
        {
          "type":"line",
    			"values": [15,29,21,34,59,30,71],
    			"aspect":"spline",
    			"line-color":"#666699",
    			"marker":{
    			  "type":"diamond",
    			  "background-color":"#666699"
    			},
    			"value-box":{
    			  "type":"first,last"
    			}
        },
        {
          "type":"bubble",
          "values": [
    				[3.4, 34, 30],
    				[3.5, 61, 15],
    				[3.6, 50, 7],
    				[3.7, 21, 45],
    				[4.1, 49, 31],
    				[4.6, 39, 5],
    				[5.1, 55, 33],
    				[5.7, 43, 25],
    				[5.8, 62, 5]
    			],
    			"marker":{
    			  "background-color":"#660066"
    			}
        }    
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: "100%", 
    	width: "100%"
    });