• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="https://cdn.zingchart.com/hotfix/2.6.2-hf1/zingchart.min.js"></script>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 500px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "line",
                "globals": {
                    "font-family": "Lucida Sans Unicode"
                },
                "plotarea": {
                    "margin": "dynamic"
                },
                "scaleX": {
    
                },
                "scaleY": {
                    "-mirrored": true,
                    "-items-overlap": true,
                    "-show-zero": true,
                    "guide": {
                        "line-width": 0,
                        "line-style": "solid"
                    },
                    "ref-line": {
                        "line-width": 2,
                        "line-color": "#f00"
                    },
                    "sync-zero": true
                },
                "scaleY2": {
                    "-mirrored": true,
                    "-items-overlap": true,
                    "-show-zero": true,
                    "guide": {
                        "line-width": 0,
                        "line-style": "solid"
                    },
                    "ref-line": {
                        "line-width": 1,
                        "line-color": "#0f0"
                    },
                    "-sync-zero": true,
                    "ref-zero": true
                },
                "scaleY3": {
                    "-mirrored": true,
                    "guide": {
                        "line-width": 0,
                        "line-style": "solid"
                    },
                    "ref-line": {
                        "line-width": 1,
                        "line-color": "#00f"
                    },
                    "sync-zero": true
                },
                "plot": {
    
                },
                "legend": {
                    "margin": "auto 10 auto auto",
                    "toggle-action": "remove",
                    "adjust-layout": true
                },
                "series": [{
                        "values": [69, 68, -54, 48, 70, -74, 98, 70, -72, 68, 49, 69],
                        "text": "Apple 1",
                        "scales": "scale-x,scale-y"
                    },
                    {
                        "values": [39, 28, -24, 28, 40, -24, 18, 30, -32, 28, 19, 29],
                        "text": "Apple 2",
                        "scales": "scale-x,scale-y"
                    },
                    {
                        "values": [151, -53, 147, 160, 148, 152, 175, -52, -55, 147, 160, 148],
                        "text": "Microsoft",
                        "scales": "scale-x,scale-y-2"
                    },
                    {
                        "values": [251, -153, 247, 60, 248, -152, 75, -22, -455, 47, 20, -48],
                        "text": "Dell",
                        "scales": "scale-x,scale-y-3"
                    }
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 500,
                width: '100%'
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	<script src="https://cdn.zingchart.com/hotfix/2.6.2-hf1/zingchart.min.js"></script>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var myConfig = {
        "type":"line",
        "globals":{
            "font-family":"Lucida Sans Unicode"
        },
    	"plotarea":{
            "margin":"dynamic"
    	},
    	"scaleX":{
    
    	},
    	"scaleY":{
            "-mirrored":true,
            "-items-overlap":true,
            "-show-zero":true,
            "guide":{
                "line-width":0,
                "line-style":"solid"    
            },
            "ref-line":{
                "line-width":2,
                "line-color":"#f00"
            },
            "sync-zero":true
    	},
        "scaleY2":{
            "-mirrored":true,
            "-items-overlap":true,
            "-show-zero":true,
            "guide":{
                "line-width":0,
                "line-style":"solid"    
            },
            "ref-line":{
                "line-width":1,
                "line-color":"#0f0"
            },
            "-sync-zero":true,
            "ref-zero":true
    	},
        "scaleY3":{
            "-mirrored":true,
            "guide":{
                "line-width":0,
                "line-style":"solid"    
            },
            "ref-line":{
                "line-width":1,
                "line-color":"#00f"
            },
            "sync-zero":true
        },
    	"plot":{
    
    	},
        "legend":{
            "margin":"auto 10 auto auto",
            "toggle-action":"remove",
            "adjust-layout":true
        },
    	"series":[
    		{
    			"values":[69,68,-54,48,70,-74,98,70,-72,68,49,69],
    			"text":"Apple 1",
                "scales":"scale-x,scale-y"
    		},
            {
        		"values":[39,28,-24,28,40,-24,18,30,-32,28,19,29],
    			"text":"Apple 2",
                "scales":"scale-x,scale-y"
    		},
    		{
    			"values":[151,-53,147,160,148,152,175,-52,-55,147,160,148],
    			"text":"Microsoft",
                "scales":"scale-x,scale-y-2"
    		},
        	{
    			"values":[251,-153,247,60,248,-152,75,-22,-455,47,20,-48],
    			"text":"Dell",
                "scales":"scale-x,scale-y-3"
    		}
    	]
    };
    
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: 500, 
    	width: '100%' 
    });