• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: "mixed",
          title: {
            text: 'Dynamic Labels'
          },
          plot: {
            barWidth: "2px"
          },
          scaleX: {
            itemsOverlap: true,
            maxItems: 28,
            labels: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18, 19, 20, 21, 1, 2, 3, 4, 5, 6, 7, 8, 9],
            placement: 'opposite',
            lineColor: 'none',
            refLine: {
              visible: false
            },
            tick: {
              visible: false
            }
          },
          scaleY: {
            guide: {
              visible: false
            },
            values: '0:27',
            lineColor: 'none',
            item: {
              visible: false
            },
            tick: {
              visible: false
            },
            markers: [{
              type: "area",
              range: [0, 20],
              backgroundColor: "#c4c4c4",
              alpha: 0.5
            }]
          },
          series: [{
              type: 'bar',
              backgroundColor: 'grey',
              values: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25]
            },
            {
              type: 'scatter',
              marker: {
                backgroundColor: 'grey'
              },
              values: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25]
            }
          ],
          labels: [{
              hook: 'node:plot=0,index=10',
              width: 150,
              height: 40,
              offsetY: 85,
              borderRadius: 20,
              padding: 5,
              backgroundColor: '#e91e63',
              text: '#162',
              fontSize: 16,
              fontColor: 'white',
              textAlign: 'left',
              backgroundImage: 'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: "110 5"
            },
            {
              hook: 'node:plot=0,index=17',
              width: 150,
              height: 40,
              offsetY: 85,
              borderRadius: 20,
              padding: 5,
              backgroundColor: '#e91e63',
              text: '#152',
              fontSize: 16,
              fontColor: 'white',
              textAlign: 'left',
              backgroundImage: 'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
              backgroundRepeat: 'no-repeat',
              backgroundPosition: "110 5"
            }
          ]
        };
    
        zingchart.render({
          id: 'myChart',
          data: myConfig,
          height: 300,
          width: "100%"
        });
    
        /**
         * Handle labels to be responsive.
         * This is not necessary, but will make the graph
         * much more dynamic and usable in smaller windows.
         */
        var labelsResetFlag = false;
    
        zingchart.load = function(p) {
          resizeGraphLabels(window.outerWidth);
        }
    
        window.onresize = function(p) {
          resizeGraphLabels(p.currentTarget.outerWidth);
        }
    
        window.load = function(p) {
          resizeGraphLabels(p.currentTarget.outerWidth);
        }
    
        function resizeGraphLabels(windowWidth) {
          var graphJSON = {};
          var labelsArray;
          if (windowWidth < 768) {
            if (!labelsResetFlag) {
              labelsResetFlag = true;
    
              // make a deep copy otherwise we will have changed original graph JSON and the API 'setdata' call willnot work below
              graphJSON = JSON.parse(JSON.stringify(myConfig));
              labelsArray = graphJSON.labels;
              for (var i = 0; i < labelsArray.length; i++) {
                labelsArray[i].width = 90;
                labelsArray[i].height = 30;
                labelsArray[i].fontSize = 15;
                labelsArray[i].offsetY = 95,
                  labelsArray[i].backgroundPosition = "55 0";
              }
    
              zingchart.exec('myChart', 'setdata', {
                data: graphJSON
              });
            }
          } else {
            if (labelsResetFlag) {
              labelsResetFlag = false;
              zingchart.exec('myChart', 'setdata', {
                data: myConfig
              })
            }
          }
        }
      </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>
    
          
    var myConfig = {
     	type: "mixed",
     	title: {
     	  text:'Dynamic Labels'
     	},
     	plot: {
     	  barWidth:"2px"
     	},
     	scaleX:{
     	  itemsOverlap:true,
     	  maxItems:28,
     	  labels:[2,3,4,5,6,7,8,9,10,11,12,13,15,16,17,18,19,20,21,1,2,3,4,5,6,7,8,9],
     	  placement:'opposite',
     	  	  lineColor:'none',
     	  refLine:{
     	    visible:false
     	  },
     	  tick: {
     	    visible:false
     	  }
     	},
     	scaleY:{
     	  guide: {
     	    visible:false
     	  },
    	  values:'0:27',
    	  lineColor:'none',
    	  item: {
    	    visible:false
    	  },
    	  tick:{
    	    visible:false
    	  },
     	  markers:[
       	    {
       	      type:"area",
       	      range: [0,20],
       	      backgroundColor: "#c4c4c4",
       	      alpha: 0.5
       	    }
     	    ]
     	},
    	series : [
    		{
    		  type:'bar',
    		  backgroundColor:'grey',
    			values : [25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25]
    		},
    		{
    		  type:'scatter',
    		  marker:{
    		    backgroundColor:'grey'
    		  },
    			values : [25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25,25]
    		}
    	],
    	labels: [
    	  {
    	    hook:'node:plot=0,index=10',
    	    width:150,
    	    height:40,
    	    offsetY:85,
    	    borderRadius:20,
    	    padding:5,
    	    backgroundColor:'#e91e63',
    	    text:'#162',
          fontSize:16,
          fontColor:'white',
          textAlign:'left',
          backgroundImage:'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
          backgroundRepeat:'no-repeat',
          backgroundPosition:"110 5"
    	  },
    	  {
    	    hook:'node:plot=0,index=17',
    	    width:150,
    	    height:40,
    	    offsetY:85,
    	    borderRadius:20,
    	    padding:5,
    	    backgroundColor:'#e91e63',
    	    text:'#152',
          fontSize:16,
          fontColor:'white',
          textAlign:'left',
          backgroundImage:'http://demos.zingchart.com/view/ZC30JD22/icon_pet.png',
          backgroundRepeat:'no-repeat',
          backgroundPosition:"110 5"
    	  }   
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: 300, 
    	width: "100%"
    });
    
    /**
     * Handle labels to be responsive.
     * This is not necessary, but will make the graph
     * much more dynamic and usable in smaller windows.
     */
    var labelsResetFlag = false;
    
    zingchart.load = function(p) {
      resizeGraphLabels(window.outerWidth);
    }
    
    window.onresize = function(p) {
      resizeGraphLabels(p.currentTarget.outerWidth);
    }
    
    window.load = function(p) {
      resizeGraphLabels(p.currentTarget.outerWidth);
    }
    
    function resizeGraphLabels(windowWidth) {
      var graphJSON = {};
      var labelsArray;
      if (windowWidth < 768) {
        if (!labelsResetFlag) {
          labelsResetFlag = true;
          
          // make a deep copy otherwise we will have changed original graph JSON and the API 'setdata' call willnot work below
          graphJSON = JSON.parse(JSON.stringify(myConfig));
          labelsArray = graphJSON.labels;
          for (var i = 0; i < labelsArray.length; i++) {
            labelsArray[i].width = 90;
            labelsArray[i].height = 30;
            labelsArray[i].fontSize = 15;
            labelsArray[i].offsetY = 95,
            labelsArray[i].backgroundPosition = "55 0";
          }
          
          zingchart.exec('myChart', 'setdata', {
            data: graphJSON
          });
        }
      } else {
        if (labelsResetFlag) {
          labelsResetFlag = false;
          zingchart.exec('myChart', 'setdata', {
            data: myConfig
          })
        }
      }
    }