• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     zingchart.defineModule("hello-world", "plugin", function(originalJson) {
    17.  
    18.       /***** JSON Manipulation *****/
    19.  
    20.       /* Create our hello world label */
    21.       var helloWorldLabel = {
    22.         "text": "Hello, world!",
    23.         "id": "label1",
    24.         "height": "60%",
    25.         "width": "80%",
    26.         "x": "10%",
    27.         "y": "20%"
    28.       };
    29.  
    30.       /* 
    31.        *	The ?: ternary operation is used here to check for existing labels in the originalJson object. 
    32.        *	If a labels array exists, the label is pushed into it,
    33.        *	otherwise, it is placed into a new array.
    34.        */
    35.       originalJson["labels"] ?
    36.         originalJson["labels"].push(helloWorldLabel) :
    37.         originalJson["labels"] = [helloWorldLabel];
    38.  
    39.       /***** Defining Options *****/
    40.  
    41.       /* Instantiate oOptions as the plugin object */
    42.       var optionsObj = originalJson["hello-world"];
    43.  
    44.       /* Check for "universe": true, find our label and modify it if true */
    45.       if (optionsObj["universe"]) {
    46.         for (var n = 0; n < originalJson["labels"].length; n++) {
    47.           if (originalJson["labels"][n]["id"] == "label1") {
    48.             originalJson["labels"][n]["text"] = "Hello, UNIVERSE!"
    49.           }
    50.         }
    51.       }
    52.  
    53.       /***** Adding Event Listeners *****/
    54.       zingchart.bind(null, 'label_click', function(chartObj) {
    55.         console.log('You clicked my label!');
    56.       });
    57.  
    58.       return originalJson;
    59.     });
    60.     zingchart.render({
    61.       id: 'myChart',
    62.       height: 400,
    63.       width: 600,
    64.       modules: 'hello-world',
    65.       data: {
    66.         'type': 'bar',
    67.         'hello-world': {
    68.           'universe': true
    69.         }
    70.       }
    71.     });
    72.   </script>
    73. </body>
    74.  
    75. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. zingchart.defineModule("hello-world", "plugin", function(originalJson) {
    2.  
    3.   /***** JSON Manipulation *****/
    4.  
    5.   /* Create our hello world label */
    6.   var helloWorldLabel = {
    7.     "text": "Hello, world!",
    8.     "id": "label1",
    9.     "height": "60%",
    10.     "width": "80%",
    11.     "x": "10%",
    12.     "y": "20%"
    13.   };
    14.  
    15.   /* 
    16.    *	The ?: ternary operation is used here to check for existing labels in the originalJson object. 
    17.    *	If a labels array exists, the label is pushed into it,
    18.    *	otherwise, it is placed into a new array.
    19.    */
    20.   originalJson["labels"] ?
    21.     originalJson["labels"].push(helloWorldLabel) :
    22.     originalJson["labels"] = [helloWorldLabel];
    23.  
    24.   /***** Defining Options *****/
    25.  
    26.   /* Instantiate oOptions as the plugin object */
    27.   var optionsObj = originalJson["hello-world"];
    28.  
    29.   /* Check for "universe": true, find our label and modify it if true */
    30.   if (optionsObj["universe"]) {
    31.     for (var n = 0; n < originalJson["labels"].length; n++) {
    32.       if (originalJson["labels"][n]["id"] == "label1") {
    33.         originalJson["labels"][n]["text"] = "Hello, UNIVERSE!"
    34.       }
    35.     }
    36.   }
    37.  
    38.   /***** Adding Event Listeners *****/
    39.   zingchart.bind(null, 'label_click', function(chartObj) {
    40.     console.log('You clicked my label!');
    41.   });
    42.  
    43.   return originalJson;
    44. });
    45. zingchart.render({
    46.   id: 'myChart',
    47.   height: 400,
    48.   width: 600,
    49.   modules: 'hello-world',
    50.   data: {
    51.     'type': 'bar',
    52.     'hello-world': {
    53.       'universe': true
    54.     }
    55.   }
    56. });