• 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"];
        zingchart.defineModule("hello-world", "plugin", function(originalJson) {
    
          /***** JSON Manipulation *****/
    
          /* Create our hello world label */
          var helloWorldLabel = {
            "text": "Hello, world!",
            "id": "label1",
            "height": "60%",
            "width": "80%",
            "x": "10%",
            "y": "20%"
          };
    
          /* 
           *	The ?: ternary operation is used here to check for existing labels in the originalJson object. 
           *	If a labels array exists, the label is pushed into it,
           *	otherwise, it is placed into a new array.
           */
          originalJson["labels"] ?
            originalJson["labels"].push(helloWorldLabel) :
            originalJson["labels"] = [helloWorldLabel];
    
          /***** Defining Options *****/
    
          /* Instantiate oOptions as the plugin object */
          var optionsObj = originalJson["hello-world"];
    
          /* Check for "universe": true, find our label and modify it if true */
          if (optionsObj["universe"]) {
            for (var n = 0; n < originalJson["labels"].length; n++) {
              if (originalJson["labels"][n]["id"] == "label1") {
                originalJson["labels"][n]["text"] = "Hello, UNIVERSE!"
              }
            }
          }
    
          /***** Adding Event Listeners *****/
          zingchart.bind(null, 'label_click', function(chartObj) {
            console.log('You clicked my label!');
          });
    
          return originalJson;
        });
        zingchart.render({
          id: 'myChart',
          height: 400,
          width: 600,
          modules: 'hello-world',
          data: {
            'type': 'bar',
            'hello-world': {
              'universe': true
            }
          }
        });
      </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>
    
          
    zingchart.defineModule("hello-world", "plugin", function(originalJson){
    
    		/***** JSON Manipulation *****/
    
    		/* Create our hello world label */
    		var helloWorldLabel = {
    			"text": "Hello, world!",
    			"id": "label1",
    			"height": "60%",
    			"width": "80%",
    			"x": "10%",
    			"y": "20%"
    		};
    		
    		/* 
    		*	The ?: ternary operation is used here to check for existing labels in the originalJson object. 
    		*	If a labels array exists, the label is pushed into it,
    		*	otherwise, it is placed into a new array.
    		*/
    		originalJson["labels"] 
    			? originalJson["labels"].push(helloWorldLabel) 
    			: originalJson["labels"] = [helloWorldLabel];
    
    		/***** Defining Options *****/
    
    		/* Instantiate oOptions as the plugin object */
    		var optionsObj = originalJson["hello-world"];
    			
    		/* Check for "universe": true, find our label and modify it if true */
    		if (optionsObj["universe"]){
    			for (var n = 0;n < originalJson["labels"].length;n++){
    				if (originalJson["labels"][n]["id"] == "label1"){
    					originalJson["labels"][n]["text"] = "Hello, UNIVERSE!"
    				}
    			}
    		}
    
    		/***** Adding Event Listeners *****/
        zingchart.bind(null, 'label_click', function(chartObj){
          console.log('You clicked my label!');
        });
        
        return originalJson;
    	});
    	zingchart.render({
    		id: 'myChart',
    		height: 400,
    		width: 600,
    		modules: 'hello-world',
    		data: {
    			'type':'bar',
    			'hello-world':{
    				'universe': true
    			}
    		}
    	});