• 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 {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #zc {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id="zc"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "line",
                "title": {
                    "text": "Average Metric"
                },
                "plotarea": {
    
                },
                "scaleX": {
    
                },
                "scaleY": {
    
                },
                "crosshair-x": {
    
                },
                "plot": {
    
                },
                "series": [{
                        "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
                        "text": "Apple"
                    },
                    {
                        "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
                        "text": "Microsoft"
                    },
                    {
                        "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
                        "text": "Oracle"
                    },
                    {
                        "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
                        "text": "Dell"
                    }
                ]
            };
    
            // global value used between functions
            var guide_scale_keyvalue = null;
    
            /*
             * register all movements of the crosshair
             */
            zingchart.bind('zc', 'guide_mousemove', function(p) {
                if (p.items.length) {
                    guide_scale_keyvalue = p.items[0].keyvalue;
                }
            });
    
            /*
             * register all movements of the crosshair
             */
            zingchart.bind('zc', 'guide_mouseout', function(p) {
                guide_scale_keyvalue = null;
            });
    
            /*
             * Everytime the chart finishes rendering from appendseriesvalues
             * set the guid to appear at the last position is was
             */
            zingchart.bind('zc', 'complete', function() {
                if (guide_scale_keyvalue) {
                    zingchart.exec('zc', 'setguide', {
                        keyvalue: guide_scale_keyvalue
                    });
                }
            });
    
            zingchart.bind('zc', 'gload', function() {
                window.setInterval(function() { // start live feed simulation
                    var new_values = [];
                    for (var i = 0; i < 4; i++) {
                        new_values.push([Math.round(20 + 80 * Math.random())]);
                    }
                    zingchart.exec('zc', 'appendseriesvalues', {
                        values: new_values
                    });
                }, 500);
            });
    
            zingchart.render({
                id: 'zc',
                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="zc"><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;
    }
    #zc {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var myConfig = {
      "type":"line",
    	"title":{
    		"text":"Average Metric"
    	},
    	"plotarea":{
    
    	},
    	"scaleX":{
    
    	},
    	"scaleY":{
    
    	},
        "crosshair-x" : {
            
        },
    	"plot":{
    
    	},
    	"series":[
    		{
    			"values":[69,68,54,48,70,74,98,70,72,68,49,69],
    			"text":"Apple"
    		},
    		{
    			"values":[51,53,47,60,48,52,75,52,55,47,60,48],
    			"text":"Microsoft"
    		},
    		{
    			"values":[42,43,30,40,31,48,55,46,48,32,38,38],
    			"text":"Oracle"
    		},
    		{
    			"values":[25,15,26,21,24,26,33,25,15,25,22,24],
    			"text":"Dell"
    		}
    	]
    };
    
    // global value used between functions
    var guide_scale_keyvalue = null;
    
    /*
     * register all movements of the crosshair
     */
    zingchart.bind('zc', 'guide_mousemove', function(p) {
        if (p.items.length) {
            guide_scale_keyvalue = p.items[0].keyvalue;
        }
    });
    
    /*
     * register all movements of the crosshair
     */
    zingchart.bind('zc', 'guide_mouseout', function(p) {
        guide_scale_keyvalue = null;
    });
    
    /*
     * Everytime the chart finishes rendering from appendseriesvalues
     * set the guid to appear at the last position is was
     */
    zingchart.bind('zc', 'complete', function() {
        if (guide_scale_keyvalue) {
            zingchart.exec('zc', 'setguide', {
                keyvalue : guide_scale_keyvalue
            });
        }
    });
    
    zingchart.bind('zc', 'gload', function() {
      window.setInterval(function() { // start live feed simulation
        var new_values = [];
        for (var i=0;i<4;i++) {
            new_values.push([Math.round(20 + 80 * Math.random())]);
        }
        zingchart.exec('zc', 'appendseriesvalues', {
            values : new_values
        });
      }, 500);
    });
    
    zingchart.render({ 
    	id: 'zc', 
    	data: myConfig, 
    	height: '100%', 
    	width: '100%' 
    });