• 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="zc"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            window.plot_jsRule = function(p) {
                return {
                    backgroundColor: barColors[p.plotindex][p.nodeindex]
                };
            }
    
            var barColors = [
                ['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
                ['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#473252'],
                ['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C'],
                ['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
            ];
            var legendColors = ['#D3D3D3', '#A7A7A7', '#7A7A7A', '#4E4E4E', '#393939', '#1A1A1A'];
    
            var chartJSON = {
    
                "graphset": [{
                    "clustered": true,
    
                    "background-color": "#FFF",
                    "type": "bar",
    
                    "plotarea": {
                        "margin": "90 40 50 40"
                    },
    
                    "title": {
                        "text": "SNAPCHAT IS TOPS WITH AMERICAN TEENS",
                        "font-size": "22px",
                        "font-color": "#000",
                        "font-weight": "bold",
                        "text-align": "center",
                        "padding": 0
                    },
    
                    "subtitle": {
                        "text": "Percentage of US teens who consider the following social networks their favorite",
                        "font-size": "14px",
                        "font-color": "#656263",
                        "font-weight": "normal",
                        "text-align": "left",
                        "padding": "0 0 0 10"
                    },
    
                    "source": {
                        "text": "<b>SOURCES:</b> Piper Jaffray; Fall '17 survey of 6,100 teens with an average age of 16 years",
                        "font-size": "12px",
                        "font-color": "#656263",
                        "font-weight": "normal",
                        "text-align": "left",
                        "padding-left": 20,
                        "margin-bottom": 2
                    },
    
                    "plot": {
                        "bar-width": "90%",
                        "jsRule": "plot_jsRule()",
    
                        "value-box": {
                            "placement": "top",
                            "font-color": "#000",
                            "font-size": "12px",
                            "offset-y": 5
                        }
                    },
    
                    "tooltip": {
                        "color": "#000",
                        "fontWeight": "bold",
                        "fontSize": 19,
                        "text": "%plot-text: %node-value%",
                        "jsRule": "plot_jsRule()"
                    },
    
                    "legend": {
                        "layout": "x6",
                        "border-width": 0,
                        "padding": 0,
                        "offset-y": 40,
                        "toggle-action": "disabled",
    
                        "item": {
                            "font-size": "14px",
                            "font-weight": "bold",
                            "font-color": "#222"
                        },
                        "marker": {
                            "size": 8
                        }
                    },
    
                    "scale-x": {
                        "values": ["Snapchat", "Instagram", "Facebook", "Twitter"],
                        "max-items": 99,
                        "line-width": 2,
                        "item": {
                            "font-color": "#000",
                            "text-align": "center",
                            "font-size": "16px",
                            "font-weight": "bold"
                        },
                        "tick": {
                            "visible": false
                        }
                    },
                    "scale-y": {
                        "min-value": 0,
                        "max-value": 50,
                        "line-width": 0,
                        "format": "%scale-value%",
                        "item": {
                            "font-color": "#7A7A7A"
                        },
                        "tick": {
                            "visible": false
                        }
                    },
    
                    "series": [{
                            "values": [11, 17, 24, 35, 39, 47],
                            "clustered": true,
                            "text": "Spring 2015",
                            "legend-marker": {
                                "background-color": legendColors[0]
                            }
                        },
                        {
                            "values": [29, 29, 23, 24, 23, 24],
                            "clustered": true,
                            "text": "Fall 2015",
                            "legend-marker": {
                                "background-color": legendColors[1]
                            }
                        },
                        {
                            "values": [12, 13, 15, 13, 11, 9],
                            "clustered": true,
                            "text": "Spring 2016",
                            "legend-marker": {
                                "background-color": legendColors[2]
                            }
                        },
                        {
                            "values": [21, 18, 16, 13, 11, 7],
                            "clustered": true,
                            "text": "Fall 2016",
                            "legend-marker": {
                                "background-color": legendColors[3]
                            }
                        },
                        {
                            "values": [],
                            "text": "Spring 2017",
                            "legend-marker": {
                                "background-color": legendColors[4]
                            }
                        },
                        {
                            "values": [],
                            "text": "Fall 2017",
                            "legend-marker": {
                                "background-color": legendColors[5]
                            }
                        }
                    ]
                }]
    
            };
    
            window.addEventListener('load', function() {
    
                zingchart.render({
                    id: "zc",
                    width: 800,
                    height: 500,
                    output: "svg",
                    data: chartJSON
                });
    
            });
        </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"></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.plot_jsRule = function(p) {
    	return {
    		backgroundColor: barColors[p.plotindex][p.nodeindex]
    	};
    }
    
    var barColors = [ 
    	['#F1D4D4', '#E3A9A9', '#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
    	['#DFD9E2', '#BFB4C5', '#9F8EA7', '#7F698A', '#5F436D', '#473252'],
    	['#D4DFE5', '#A9BFCA', '#7F9FB0', '#547F95', '#295F7B', '#1F475C'],
    	['#D4E9F3', '#A9D4E6', '#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91']
    ];
    var legendColors = ['#D3D3D3','#A7A7A7','#7A7A7A','#4E4E4E','#393939','#1A1A1A'];
    
    var chartJSON = {
    
    "graphset":[
    	{
    		"clustered" : true,
    
    		"background-color" : "#FFF",
    		"type" : "bar",
    		
    		"plotarea":{
    			"margin" : "90 40 50 40"
    		},
    
    		"title":{
    			"text" : "SNAPCHAT IS TOPS WITH AMERICAN TEENS",
    			"font-size" : "22px",
    			"font-color" : "#000",
    			"font-weight" : "bold",
    			"text-align" : "center",
    			"padding" : 0
    		},
    
    		"subtitle":{
    			"text" : "Percentage of US teens who consider the following social networks their favorite",
    			"font-size" : "14px",
    			"font-color" : "#656263",
    			"font-weight" : "normal",
    			"text-align" : "left",
    			"padding" : "0 0 0 10"
    		},
    
    		"source":{
    			"text" : "<b>SOURCES:</b> Piper Jaffray; Fall '17 survey of 6,100 teens with an average age of 16 years",
    			"font-size" : "12px",
    			"font-color" : "#656263",
    			"font-weight" : "normal",
    			"text-align" : "left",
    			"padding-left" : 20,
    			"margin-bottom" : 2
    		},
    
    		"plot": {
    			"bar-width" : "90%",
    			"jsRule" : "plot_jsRule()",
    			
    			"value-box":{
    				"placement" : "top",
    				"font-color" : "#000",
    				"font-size" : "12px",
    				"offset-y" : 5
    			}
    		},
    
    		"tooltip": {
    			"color" : "#000",
    			"fontWeight" : "bold",
    			"fontSize" : 19,
    			"text" : "%plot-text: %node-value%",
    			"jsRule" : "plot_jsRule()"
    		},
    
    		"legend":{
    			"layout" : "x6",
    			"border-width" : 0,
    			"padding" : 0,
    			"offset-y" : 40,
    			"toggle-action" : "disabled",
    
    			"item":{
    				"font-size" : "14px",
    				"font-weight" : "bold",
    				"font-color" : "#222"
    			},
    			"marker":{
    				"size" : 8
    			}
    		},
    
    		"scale-x":{
    			"values" : ["Snapchat","Instagram","Facebook","Twitter"],
    			"max-items" : 99,
    			"line-width" : 2,
    			"item":{
    				"font-color" : "#000",
    				"text-align" : "center",
    				"font-size" : "16px",
    				"font-weight" : "bold"
    			},
    			"tick":{
    				"visible" : false
    			}
    		},
    		"scale-y":{
    			"min-value" : 0,
    			"max-value" : 50,
    			"line-width" : 0,
    			"format" : "%scale-value%",
    			"item":{
    				"font-color" : "#7A7A7A"
    			},
    			"tick":{
    				"visible" : false
    			}
    		},
    
    		"series":[
    			{
    				"values" : [11,17,24,35,39,47],
    				"clustered" : true,
    				"text" : "Spring 2015",
    				"legend-marker":{
    					"background-color" : legendColors[0]
    				}
    			},
    			{
    				"values" : [29,29,23,24,23,24],
    				"clustered" : true,
    				"text" : "Fall 2015",
    				"legend-marker":{
    					"background-color" : legendColors[1]
    				}
    			},
    			{
    				"values" : [12,13,15,13,11,9],
    				"clustered" : true,
    				"text" : "Spring 2016",
    				"legend-marker":{
    					"background-color" : legendColors[2]
    				}
    			},
    			{
    				"values" : [21,18,16,13,11,7],
    				"clustered" : true,
    				"text" : "Fall 2016",
    				"legend-marker":{
    					"background-color" : legendColors[3]
    				}
    			},
    			{
    				"values" : [],
    				"text" : "Spring 2017",
    				"legend-marker":{
    					"background-color" : legendColors[4]
    				}
    			},
    			{
    				"values" : [],
    				"text" : "Fall 2017",
    				"legend-marker":{
    					"background-color" : legendColors[5]
    				}
    			}
    		]
    	}
    ]
    
    };
    
    window.addEventListener('load',function() {
    
      zingchart.render({
        id : "zc",
        width : 800,
        height : 500,
        output : "svg",
        data : chartJSON
      });
    
    });