• 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: 500px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; // set modules dir
            zingchart.loadModules('dragging'); // load dragging module
    
            var myConfig = { // chart configuration
                type: 'vbullet',
                title: {
                    text: 'Pushups Per Day'
                },
                subtitle: {
                    text: 'Bars are draggable'
                },
                scaleX: {
                    labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
                },
                tooltip: { // tooltip changes based on value
                    fontSize: 14,
                    borderRadius: 3,
                    borderWidth: 0,
                    shadow: true
                },
                plot: {
                    valueBox: [{
                        type: 'all',
                        color: '#000',
                        placement: 'goal',
                        text: '[%node-value / %node-goal-value]'
                    }]
                },
                series: [{
                    dataDragging: true, // need this to enable drag
                    values: [20, 40, 14, 50, 15, 35, 5],
                    goals: [25, 43, 30, 40, 21, 59, 35],
                    goal: {
                        backgroundColor: '#64b5f6',
                        borderWidth: 0,
                    },
                    rules: [ // rules for color
                        {
                            rule: '%v >= %g', // if greater than goal
                            backgroundColor: '#81c784'
                        },
                        {
                            rule: '%v < %g/2', // if less than half goal
                            backgroundColor: '#ef5350'
                        },
                        {
                            rule: '%v >= %g/2 && %v < %g', // if in between
                            backgroundColor: '#ffca28'
                        }
                    ]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: 500,
                width: '100%',
                modules: "dragging" // need this to enable drag
            });
        </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;
    }
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; // set modules dir
    zingchart.loadModules('dragging'); // load dragging module
    
    var myConfig = { // chart configuration
        type: 'vbullet',
     	title: {
     	  text: 'Pushups Per Day'
     	},
     	subtitle: {
     	  text: 'Bars are draggable'
     	},
     	scaleX: {
     	  labels: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
     	},
      tooltip: { // tooltip changes based on value
        fontSize: 14,
        borderRadius: 3,
        borderWidth: 0,
        shadow: true
      },
      plot : {
        valueBox:[
            {
                type : 'all',
                color : '#000',
                placement : 'goal',
                text: '[%node-value / %node-goal-value]'
            }  
        ]
      },
    	series : [
    		{
    		  dataDragging : true, // need this to enable drag
    			values:[20,40,14,50,15,35,5],
    			goals: [25,43,30,40,21,59,35],
    			goal:{
    			  backgroundColor: '#64b5f6',
    			  borderWidth: 0,
    			},
    			rules:[ // rules for color
    			  {
    			    rule: '%v >= %g', // if greater than goal
    			    backgroundColor: '#81c784'
    			  },
    			  {
    			    rule: '%v < %g/2', // if less than half goal
    			    backgroundColor: '#ef5350'
    			  },
    			  {
    			    rule: '%v >= %g/2 && %v < %g', // if in between
    			    backgroundColor: '#ffca28'
    			  } 
    			 ]
    		}
    	]
    };
     
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 500, 
    	width: '100%',
    	modules : "dragging" // need this to enable drag
    });