• 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;
            }
    
            #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"];
            window.vectorplot_data = function(p) {
                console.log(p);
                var x, y, length, direction, color;
                var vdata = [];
                var szx = [-100, 100],
                    szy = [-50, 50];
                for (x = szx[0] + 5; x < szx[1]; x += 5) {
                    for (y = szy[0] + 5; y < szy[1]; y += 5) {
                        length = 50 + Math.abs(Math.round(Math.sin(((50 - x) * y) / 3000) * Math.cos((x + y) / 200) * 150));
                        direction = Math.round(Math.sin(((50 - x) * y) / 5000) * Math.cos((x + y) / 400) * 360);
                        color = '#000000';
                        if (length >= 50 && length < 70) {
                            color = '#00FF00';
                        } else if (length >= 70 && length < 100) {
                            color = '#FFFF00';
                        } else if (length >= 100 && length < 120) {
                            color = '#FF9900';
                        } else if (length >= 120 && length < 150) {
                            color = '#FF0000';
                        } else if (length >= 150 && length < 170) {
                            color = '#800080';
                        } else {
                            color = '#0000FF';
                        }
                        vdata.push([
                            x,
                            y,
                            length,
                            direction,
                            color
                        ]);
                    }
                }
                return vdata;
            };
    
            let vData = vectorplot_data(1, 2, 3);
    
            var myConfig = {
                "globals": {
                    "fontFamily": "Lucida Sans Unicode"
                },
                "type": "vectorplot",
                "plotarea": {
                    "margin": "dynamic"
                },
                "scale-x": {
                    "offset": 0,
                    "values": "-100:100:10",
                    "guide": {
                        "line-style": "solid"
                    }
                },
                "scale-y": {
                    "offset": 0,
                    "values": "-50:50:10",
                    "guide": {
                        "line-style": "solid"
                    }
                },
                "options": {
                    "arrow": {
                        "min-length": 6,
                        "max-length": 12,
                        "style": {
                            "size": 3
                        }
                    },
                    "data": vData
                },
                "tooltip": {
                    "background-color": "#fff",
                    "color": "#000",
                    "border-width": 1,
                    "border-color": "#999",
                    "alpha": 0.85,
                    "padding": 15,
                    "border-radius": 7,
                    "align": "left",
                    "fontSize": 13,
                    "callout": true,
                    "callout-width": 12,
                    "placement": "vertical"
                }
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: '500',
                width: '1000'
            });
        </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"><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;
    }
    window.vectorplot_data = function(p) {
        console.log(p);
        var x, y, length, direction, color;
        var vdata = [];
        var szx = [-100, 100], szy = [-50, 50];
        for (x = szx[0] + 5; x < szx[1]; x += 5) {
            for (y = szy[0] + 5; y < szy[1]; y += 5) {
                length = 50 + Math.abs(Math.round(Math.sin(((50-x) * y) / 3000) * Math.cos((x + y) / 200) * 150));
                direction = Math.round(Math.sin(((50-x) * y) / 5000) * Math.cos((x + y) / 400) * 360);
                color = '#000000';
                if (length >= 50 && length < 70) {
                    color = '#00FF00';    
                } else if (length >= 70 && length < 100) {
                    color = '#FFFF00';
                } else if (length >= 100 && length < 120) {
                    color = '#FF9900';    
                } else if (length >= 120 && length < 150) {
                    color = '#FF0000';    
                } else if (length >= 150 && length < 170) {
                    color = '#800080';    
                } else {
                    color = '#0000FF';    
                }
                vdata.push([
                    x,
                    y,
                    length,
                    direction,
                    color
                ]);
            }
        }
        return vdata;
    };
    
    let vData = vectorplot_data(1,2,3);
    
    var myConfig = {
        "globals":{
            "fontFamily":"Lucida Sans Unicode"
        },
        "type":"vectorplot",
        "plotarea":{
            "margin":"dynamic"
        },
        "scale-x" : {
            "offset" : 0,
            "values" : "-100:100:10",
            "guide" : {
                "line-style" : "solid"    
            }
        },
        "scale-y" : {
            "offset" : 0,
            "values" : "-50:50:10",
            "guide" : {
                "line-style" : "solid"    
            }
        },
        "options":{
            "arrow":{
                "min-length":6,
                "max-length":12,
                "style":{
                    "size":3
                }
            },
            "data": vData
        },
        "tooltip" : {
            "background-color" : "#fff",
            "color" : "#000",
            "border-width" : 1,
            "border-color" : "#999",
            "alpha" : 0.85,
            "padding" : 15,
            "border-radius" : 7,
            "align" : "left",
            "fontSize" : 13,
            "callout" : true,
            "callout-width" : 12,
            "placement" : "vertical"
        }
    };
    
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: '500', 
    	width: '1000' 
    });