• 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", "chart", 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 *****/
    
          /* Check for the existence of the options object. */
          if (originalJson["options"]) {
    
            /* It exists! Instantiate oOptions as the object containing our custom options. */
            var optionsObj = originalJson["options"];
    
            /* Check for "universe": true, find our label and modify it. */
            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(oChart) {
            if (oChart.graphid == "helloworld0") {
              console.log('You clicked my label!');
            }
          });
    
          return originalJson;
        });
    
        zingchart.render({
          id: 'myChart',
          height: 400,
          width: 600,
          data: {
            'type': 'hello-world',
            'options': {
              '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", "chart", 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 *****/
    
      /* Check for the existence of the options object. */
      if (originalJson["options"]) {
    
        /* It exists! Instantiate oOptions as the object containing our custom options. */
        var optionsObj = originalJson["options"];
    
        /* Check for "universe": true, find our label and modify it. */
        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(oChart) {
        if (oChart.graphid == "helloworld0") {
          console.log('You clicked my label!');
        }
      });
    
      return originalJson;
    });
    
    zingchart.render({
      id: 'myChart',
      height: 400,
      width: 600,
      data: {
        'type': 'hello-world',
        'options': {
          'universe': true
        }
      }
    });