• 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: 800px;
            }
        </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"];
            var myTheme = {
                palette: {
                    line: [
                        ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
                        ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
                        ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
                        ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
                        ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
                        ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
                    ]
                },
                graph: {
                    backgroundColor: '#FBFCFE',
                    noData: {
                        visible: true,
                        alpha: 0.2,
                        backgroundColor: "#20b2db",
                        fontSize: "16",
                        textAlpha: 0.9,
                        textDecoration: "none",
                        wrapText: true
                    },
                    title: {
                        fontFamily: 'Lato',
                        fontSize: 14,
                        // border: "1px solid black",
                        padding: "15",
                        fontColor: "#1E5D9E",
                        adjustLayout: true
                    },
                    subtitle: {
                        fontFamily: 'Lato',
                        fontSize: 12,
                        fontColor: "#777",
                        padding: "5"
                    },
                    plot: {
                        backgroundColor: 'red',
                        marker: {
                            size: 4
                        }
                    },
                    tooltip: {
                        visible: true,
                        text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
                        backgroundColor: "white",
                        borderColor: "#e3e3e3",
                        borderRadius: "5px",
                        bold: true,
                        fontSize: "12px",
                        fontColor: "#2f2f2f",
                        textAlign: 'left',
                        padding: '15px',
                        shadow: true,
                        shadowAlpha: 0.2,
                        shadowBlur: 5,
                        shadowDistance: 4,
                        shadowColor: "#a1a1a1"
                    },
                    plotarea: {
                        backgroundColor: 'transparent',
                        borderRadius: "0 0 0 10",
                        borderRight: "0px",
                        borderTop: "0px",
                        margin: "dynamic",
                        borderLeft: '1px solid #1E5D9E',
                        borderBottom: '1px solid #1E5D9E',
                    },
                    scaleX: {
                        zooming: true,
                        offsetY: -20,
                        lineWidth: 0,
                        padding: 20,
                        margin: 20,
                        label: {
                            text: "Scale-X"
                        },
                        item: {
                            padding: 5,
                            fontColor: "#1E5D9E",
                            fontFamily: 'Montserrat',
                            rules: [{
                                rule: "%i == 0",
                                visible: false
                            }]
                        },
                        tick: {
                            lineColor: '#D1D3D4',
                            rules: [{
                                rule: "%i == 0",
                                visible: false
                            }]
                        },
                        guide: {
                            visible: true,
                            lineColor: '#D7D8D9',
                            lineStyle: 'dotted',
                            lineGapSize: '4px',
                            rules: [{
                                rule: "%i == 0",
                                visible: false
                            }]
                        }
                    },
                    scaleY: {
                        zooming: true,
                        lineWidth: 0,
                        label: {
                            text: "Scale-Y"
                        },
                        item: {
                            padding: "0 10 0 0",
                            fontColor: "#1E5D9E",
                            fontFamily: 'Montserrat',
                            rules: [{
                                rule: "%i == 0",
                                offsetX: 10,
                                offsetY: 10,
                                backgroundColor: 'none'
                            }]
                        },
                        tick: {
                            lineColor: '#D1D3D4',
                            rules: [{
                                rule: "%i == 0",
                                visible: false
                            }]
                        },
                        guide: {
                            visible: true,
                            lineColor: '#D7D8D9',
                            lineStyle: 'dotted',
                            lineGapSize: '4px',
                            rules: [{
                                rule: "%i == 0",
                                visible: false
                            }]
                        }
                    },
                    scrollX: {
                        bar: {
                            backgroundColor: 'none',
                            borderLeft: 'none',
                            borderTop: 'none',
                            borderBottom: 'none'
                        },
                        handle: {
                            backgroundColor: '#1E5D9E',
                            height: 5
                        }
                    },
                    scrollY: {
                        borderWidth: 0,
                        bar: {
                            backgroundColor: 'none',
                            width: 14,
                            borderLeft: 'none',
                            borderTop: 'none',
                            borderBottom: 'none'
                        },
                        handle: {
                            borderWidth: 0,
                            backgroundColor: '#1E5D9E',
                            width: 5
                        }
                    },
                    zoom: {
                        backgroundColor: '#1E5D9E',
                        alpha: .33,
                        borderColor: '#000',
                        borderWidth: 1
                    },
                    preview: {
                        borderColor: '#1E5D9E',
                        borderWidth: 1,
                        adjustLayout: true,
                        handle: {
                            backgroundColor: '#1E5D9E',
                            borderColor: '#1E5D9E'
                        },
                        mask: {
                            backgroundColor: '#FFF',
                            alpha: .95,
                        }
                    }
                }
            };
    
            var myConfig = {
                type: 'bar',
                noData: {
    
                },
                series: [{
                    'values': []
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: '100%',
                width: '100%',
                defaults: myTheme
            });
        </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;
    }
    var myTheme = {
      palette:{
        line:[
            ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */
            ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */
            ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */
            ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */
            ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */
            ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */
        ]
      },
      graph:{
        backgroundColor:'#FBFCFE',
        noData: {
    			visible: true,
    			alpha: 0.2,
    			backgroundColor: "#20b2db",
    			fontSize: "16",
    			textAlpha: 0.9,
    			textDecoration: "none",
    			wrapText: true
    		},
       	title: {
       	  fontFamily: 'Lato',
       	  fontSize: 14,
       	  // border: "1px solid black",
       	  padding: "15",
       	  fontColor : "#1E5D9E",
       	  adjustLayout:true
       	},
       	subtitle: {
       	  fontFamily: 'Lato',
       	  fontSize: 12,
       	  fontColor: "#777",
       	  padding: "5"
       	},
       	plot: {
       	  backgroundColor:'red',
       	  marker: {
       	    size: 4
       	  }
       	},
       tooltip : {
            visible:true,
            text: "%kl<br><span style='color:%color'>%t: </span>%v<br>",
            backgroundColor : "white",
            borderColor : "#e3e3e3",
            borderRadius : "5px",
            bold : true,
            fontSize : "12px",
            fontColor : "#2f2f2f",
            textAlign : 'left',
            padding : '15px',
            shadow : true,
            shadowAlpha : 0.2,
            shadowBlur : 5,
            shadowDistance : 4,
            shadowColor : "#a1a1a1"
        },
       	plotarea: {
       	  backgroundColor: 'transparent',
       	  borderRadius: "0 0 0 10",
       	  borderRight: "0px",
       	  borderTop: "0px",
       	  margin:"dynamic",
       	  borderLeft:'1px solid #1E5D9E',
       	  borderBottom:'1px solid #1E5D9E',
       	},
      	scaleX: {
       	  zooming:true,
       	  offsetY: -20,
       	  lineWidth: 0,
       	  padding: 20,
       	  margin: 20,
       	  label:{
       	    text:"Scale-X"
       	  },
       	  item: {
       	    padding: 5,
       	    fontColor : "#1E5D9E",
       	    fontFamily: 'Montserrat',
         	  rules: [
         	    {
         	      rule: "%i == 0",
         	      visible: false
         	    }
         	  ]
       	  },
       	  tick: {
       	    lineColor: '#D1D3D4',
         	  rules: [
         	    {
         	      rule: "%i == 0",
         	      visible: false
         	    }
         	  ]
       	  },
       	  guide: {
       	    visible: true,
         	  lineColor : '#D7D8D9',
         	  lineStyle: 'dotted',
         	  lineGapSize: '4px',
         	  rules: [
         	    {
         	      rule: "%i == 0",
         	      visible: false
         	    }
         	  ]
       	  }
       	},
       	scaleY: {
       	  zooming:true,
       	  lineWidth: 0,
       	  label:{
       	    text:"Scale-Y"
       	  },
       	  item: {
       	    padding: "0 10 0 0",
       	    fontColor : "#1E5D9E",
       	    fontFamily: 'Montserrat',
         	  rules: [
         	    {
         	      rule: "%i == 0",
         	      offsetX:10,
         	      offsetY:10,
         	      backgroundColor:'none'
         	    }
         	  ]
       	  },
       	  tick: {
       	    lineColor: '#D1D3D4',
         	  rules: [
         	    {
         	      rule: "%i == 0",
         	      visible:false
         	    }
         	  ]
       	  },
       	  guide: {
       	    visible: true,
         	  lineColor : '#D7D8D9',
         	  lineStyle: 'dotted',
         	  lineGapSize: '4px',
         	  rules: [
         	    {
         	      rule: "%i == 0",
         	      visible: false
         	    }
         	  ]
       	  }
       	},
       	scrollX:{
       	  bar:{
       	    backgroundColor:'none',
      	    borderLeft:'none',
       	    borderTop:'none',
       	    borderBottom:'none'
       	  },
       	  handle:{
       	    backgroundColor:'#1E5D9E',
       	    height:5
       	  }
       	},
       	scrollY:{
       	  borderWidth:0,
       	  bar:{
       	    backgroundColor:'none',
       	    width:14,
       	    borderLeft:'none',
       	    borderTop:'none',
       	    borderBottom:'none'
       	  },
       	  handle:{
       	    borderWidth:0,
       	    backgroundColor:'#1E5D9E',
       	    width:5
       	  }
       	},
       	zoom:{
       	  backgroundColor:'#1E5D9E',
       	  alpha:.33,
       	  borderColor:'#000',
       	  borderWidth:1
       	},
       	preview:{
       	  borderColor:'#1E5D9E',
       	  borderWidth:1,
       	  adjustLayout:true,
       	  handle:{
       	    backgroundColor:'#1E5D9E',
       	    borderColor:'#1E5D9E'
       	  },
       	  mask:{
       	    backgroundColor:'#FFF',
       	    alpha:.95,
       	  }
       	}
      }
    };
    
    var myConfig = {
     	type: 'bar',
     	noData: {
     	  
     	},
    	series: [
    		{
    			'values': []
    		}
    	]
    };
    
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: '100%', 
    	width: '100%',
    	defaults:myTheme
    });