• 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: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            zingchart.THEME = "classic";
    
            var myConfig = {
                "globals": {
                    "font-family": "PT Sans",
                    "shadow": false
                },
                "type": "radar",
                "background-color": "#FFF",
                "plot": {
                    "aspect": "rose",
                    "animation": {
                        "effect": "ANIMATION_EXPAND_TOP",
                        "sequence": "ANIMATION_BY_PLOT_AND_NODE",
                        "speed": 10
                    }
                },
                "title": {
                    "text": "Total Albums Released",
                    "background-color": "#333",
                },
                "subtitle": {
                    "text": "Hover a node to see the band and click for url"
                },
                "scale-k": {
                    "aspect": "circle",
                    "visible": false
                },
                "scale-v": {
                    "values": "0:25:5",
                    "guide": {
                        "line-width": 1,
                        "line-style": "solid",
                        "line-color": "#333"
                    },
                    "item": {
                        "color": "#333"
                    },
                    "line-color": "#FFF"
                },
                "tooltip": {
                    "text": "%v studio albums made by %data-band",
                    "background-color": "#CFF",
                    "color": "#333",
                    "font-size": "14px"
                },
                "series": [{
                    "values": [15, 21, 16, 14, 18, 21, 9],
                    "data-band": ["Genesis", "Rush", "Pink Floyd", "King Crimson", "The Moody Blues", "Yes", "Emerson, Lake and Palmer"],
                    "url": "http://www.google.com/#q=%data-band",
                    "target": "_blank",
                    "background-color": "#0CF"
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                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>
    
          
    zingchart.THEME="classic";
    
    var myConfig = {
      "globals": {
        "font-family":"PT Sans",
        "shadow":false
      },
    	"type" : "radar",
    	"background-color":"#FFF",
    	"plot":{
    	  "aspect":"rose",
    	  "animation": {
    	    "effect":"ANIMATION_EXPAND_TOP",
          "sequence":"ANIMATION_BY_PLOT_AND_NODE",
          "speed":10
    	  }
    	},
    	"title" : {
    	  "text" : "Total Albums Released",
    	  "background-color":"#333",
    	},
    	"subtitle":{
    	  "text":"Hover a node to see the band and click for url"
    	},
    	"scale-k":{
        "aspect":"circle",
        "visible":false
      },
      "scale-v":{
        "values":"0:25:5",
        "guide": {
          "line-width":1,
          "line-style":"solid",
          "line-color":"#333"
        },
        "item": {
          "color":"#333"
        },
        "line-color":"#FFF"
      },
      "tooltip": {
        "text":"%v studio albums made by %data-band",
        "background-color":"#CFF",
        "color":"#333",
        "font-size":"14px"
      },
    	"series" : [
    		{
    			"values" : [15, 21, 16, 14, 18, 21, 9],
    			"data-band" : ["Genesis", "Rush", "Pink Floyd", "King Crimson", "The Moody Blues", "Yes", "Emerson, Lake and Palmer"],
    			"url" : "http://www.google.com/#q=%data-band",
    			"target" : "_blank",
    			"background-color":"#0CF"
    		}
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 400, 
    	width: '100%' 
    });