• 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>
            zing-grid[loading] {
                height: 400px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            window.myTooltipJsRule = function(p) {
                //console.log(p);
                return {
                    'background-color': 'red',
                    'text': 'value:' + p.value
                };
            }
    
    
            let chartConfig = {
                "graphset": [{
                    "type": "radar",
                    "plot": {
                        "aspect": "rose",
                        "stacked": true,
                        "angle-space": 0,
                        "-angle": 7.5,
                        "background-color": "grey",
                        "border-width": 2,
                        "border-color": "black",
                        "rules": [],
                        "tooltip": {
                            "jsRule": "myTooltipJsRule()"
                        },
                        "hover-state": {
                            "background-image": "https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
                            "background-repeat": "no-repeat",
                            "background-position": "50% 50%",
                            "background-color": "#f00",
                            "border-width": 2,
                            "border-color": "#0f0"
                        },
                        "-selection-mode": "multiple",
                        "-selected-state": {
                            "border-color": "pink",
                            "border-width": 4
                        },
                        "-selected-marker": {
                            "border-color": "pink"
                        },
                        "jsRule": "myJsRule()"
                    },
                    "scale-v": {
                        "values": "0:4:1",
                        "format": "%v",
                        "item": {
                            "font-color": "#000",
                            "font-family": "Georgia",
                            "font-size": 14,
                            "background-color": "#f90",
                            "font-weight": "bold",
                            "font-style": "italic",
                            "rules": [{
                                "rule": "%scale-index === 0",
                                "visible": false
                            }]
                        },
                        "ref-line": {
                            "line-color": "black"
                        },
                        "tick": {
                            "line-color": "black",
                            "placement": "cross"
                        }
                    },
                    "scale-k": {
                        "aspect": "circle",
                        "values": "0:23:1",
                        "tick": {
                            "line-color": "black",
                            "placement": "outer"
                        },
                        "item": {
                            "rules": [{
                                "rule": "%scale-index % 2 === 0",
                                "visible": false
                            }]
                        }
                    },
                    "shapes": [{
                            "backgroundImage": "gold-sun-32.jpg"
                        },
                        {
                            "backgroundImage": "moon_3.png"
                        }
                    ],
                    "series": [{
                            "values": [0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1],
                            "data-text": 0
                        },
                        {
                            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                            "data-text": 1
                        },
                        {
                            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                            "data-text": 2
                        },
                        {
                            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                            "data-text": 3
                        },
                        {
                            "values": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                            "data-text": 4
                        }
                    ]
                }]
            }
    
    
    
    
    
    
    
            // allows hoverstate to be behind scale items.
            zingchart.DEV.PLOTSHLAYER = true;
    
            zingchart.render({
                id: 'myChart',
                data: chartConfig,
                height: 400,
                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>
    
          
    window.myTooltipJsRule = function(p) {
    	//console.log(p);
    	return {
    		'background-color' : 'red',
    		'text' : 'value:' + p.value
    	};
    }
    
    
    let chartConfig = {
    "graphset":[
        {
            "type":"radar",
            "plot":{
                "aspect":"rose",
                "stacked":true,
                "angle-space":0,
                "-angle":7.5,
                "background-color":"grey",
                "border-width":2,
                "border-color":"black",
                "rules":[],
                "tooltip":{
                    "jsRule":"myTooltipJsRule()"
                },
                "hover-state":{
                    "background-image":"https://upload.wikimedia.org/wikipedia/commons/0/04/Map-icon-circle-ff9f9f.png",
                    "background-repeat":"no-repeat",
                    "background-position":"50% 50%",
                    "background-color":"#f00",
                    "border-width":2,
                    "border-color":"#0f0"
                },
                "-selection-mode":"multiple",
                "-selected-state":{
                    "border-color":"pink",
                    "border-width":4
                },
                "-selected-marker":{
                    "border-color":"pink"
                },
                "jsRule":"myJsRule()"
            },
            "scale-v":{
                "values":"0:4:1",
                "format":"%v",
                "item":{
                    "font-color":"#000",
                    "font-family":"Georgia",
                    "font-size":14,
                    "background-color":"#f90",
                    "font-weight":"bold",
                    "font-style":"italic",
                    "rules":[
                        {
                            "rule":"%scale-index === 0",
                            "visible":false
                        }
                    ]
                },
                "ref-line":{
                    "line-color":"black"
                },
                "tick":{
                    "line-color":"black",
                    "placement":"cross"
                }
            },
            "scale-k":{
                "aspect":"circle",
                "values":"0:23:1",
                "tick":{
                    "line-color":"black",
                    "placement":"outer"
                },
                "item":{
                    "rules":[
                        {
                            "rule":"%scale-index % 2 === 0",
                            "visible":false
                        }
                    ]
                }
            },
            "shapes":[
                {
                    "backgroundImage":"gold-sun-32.jpg"
                },
                {
                    "backgroundImage":"moon_3.png"
                }
            ],
            "series":[
                {
                    "values":[0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1,0.1],
                    "data-text":0
                },
                {
                    "values":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                    "data-text":1
                },
                {
                    "values":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                    "data-text":2
                },
                {
                    "values":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                    "data-text":3
                },
                {
                    "values":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                    "data-text":4
                }
            ]
        }
    ]
    }
    
    
    
    
    
    
    
    // allows hoverstate to be behind scale items.
    zingchart.DEV.PLOTSHLAYER = true;
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : chartConfig, 
    	height: 400, 
    	width: '100%' 
    });