• 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;
            }
    
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                graphset: [{
                    globals: {
                        fontFamily: 'Lucida Sans Unicode'
                    },
                    type: 'vbar',
                    plotarea: {
                        margin: 'dynamic'
                    },
                    scaleX: {
                        values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        item: {
                            offsetY: -5,
                            angle: 270
                        },
                        tick: {
                            size: 10
                        }
                    },
                    scaleX2: {
                        values: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2', 'Q3', 'Q4'],
                        placement: 'default',
                        tick: {
                            size: 58,
                            placement: 'cross'
                        },
                        itemsOverlap: true,
                        item: {
                            offsetY: -55
                        }
                    },
                    scaleX3: {
                        values: ['2015', '2016'],
                        placement: 'default',
                        tick: {
                            size: 20,
                        },
                        item: {
                            offsetY: -15
                        }
                    },
                    plot: {
                        barsSpaceLeft: 0.15,
                        barsSpaceRight: 0.15
                    },
                    tooltip: {
                        visible: false
                    },
                    crosshairX: {
                        lineWidth: '100%',
                        alpha: 0.4,
                    },
                    series: [{
                            values: [95, 95, 86, 71, 84, 96, 103, 95, 105, 75, 92, 84, 95, 95, 86, 71, 84, 96, 103, 95, 105, 75, 92, 84],
                            text: 'Dell'
                        },
                        {
                            values: [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69, 69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
                            text: 'Apple'
                        },
                        {
                            values: [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48, 51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
                            text: 'Microsoft'
                        },
                        {
                            values: [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38, 42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
                            text: 'Oracle'
                        }
                    ]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: '100%',
                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>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    var myConfig = {
      graphset: [
        {
          globals: {
            fontFamily: 'Lucida Sans Unicode'
          },
          type: 'vbar',
          plotarea: {
            margin: 'dynamic'
          },
          scaleX: {
            values: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            item: {
              offsetY: -5,
              angle: 270
            },
            tick: {
              size: 10
            }
          },
          scaleX2: {
            values: ['Q1','Q2','Q3','Q4','Q1','Q2','Q3','Q4'],
            placement: 'default',
            tick: {
              size: 58,
              placement: 'cross'
            },
            itemsOverlap: true,
            item: {
             offsetY: -55
            }
          },
          scaleX3: {
            values: ['2015','2016'],
            placement: 'default',
            tick: {
              size: 20,
            },
            item: {
              offsetY: -15
            }
          },
          plot: {
            barsSpaceLeft: 0.15,
            barsSpaceRight: 0.15
          },
          tooltip: {
            visible: false
          },
          crosshairX: {
            lineWidth: '100%',
            alpha: 0.4,
          },
          series: [
            {
              values: [95,95,86,71,84,96,103,95,105,75,92,84,95,95,86,71,84,96,103,95,105,75,92,84],
              text: 'Dell'
            },
            {
              values: [69,68,54,48,70,74,98,70,72,68,49,69,69,68,54,48,70,74,98,70,72,68,49,69],
              text: 'Apple'
            },
            {
              values: [51,53,47,60,48,52,75,52,55,47,60,48,51,53,47,60,48,52,75,52,55,47,60,48],
              text: 'Microsoft'
            },
            {
              values: [42,43,30,40,31,48,55,46,48,32,38,38,42,43,30,40,31,48,55,46,48,32,38,38],
              text: 'Oracle'
            }
          ]
        }
      ]
    };
    
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: '100%', 
    	width: '100%' 
    });