• 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", "chart", 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.       /* Check for the existence of the options object. */
    42.       if (originalJson["options"]) {
    43.  
    44.         /* It exists! Instantiate oOptions as the object containing our custom options. */
    45.         var optionsObj = originalJson["options"];
    46.  
    47.         /* Check for "universe": true, find our label and modify it. */
    48.         if (optionsObj["universe"]) {
    49.           for (var n = 0; n < originalJson["labels"].length; n++) {
    50.             if (originalJson["labels"][n]["id"] == "label1") {
    51.               originalJson["labels"][n]["text"] = "Hello, UNIVERSE!"
    52.             }
    53.           }
    54.         }
    55.       }
    56.  
    57.       /***** Adding Event Listeners *****/
    58.       zingchart.bind(null, 'label_click', function(oChart) {
    59.         if (oChart.graphid == "helloworld0") {
    60.           console.log('You clicked my label!');
    61.         }
    62.       });
    63.  
    64.       return originalJson;
    65.     });
    66.  
    67.     zingchart.render({
    68.       id: 'myChart',
    69.       height: 400,
    70.       width: 600,
    71.       data: {
    72.         'type': 'hello-world',
    73.         'options': {
    74.           'universe': true
    75.         }
    76.       }
    77.     });
    78.   </script>
    79. </body>
    80.  
    81. </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", "chart", 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.   /* Check for the existence of the options object. */
    27.   if (originalJson["options"]) {
    28.  
    29.     /* It exists! Instantiate oOptions as the object containing our custom options. */
    30.     var optionsObj = originalJson["options"];
    31.  
    32.     /* Check for "universe": true, find our label and modify it. */
    33.     if (optionsObj["universe"]) {
    34.       for (var n = 0; n < originalJson["labels"].length; n++) {
    35.         if (originalJson["labels"][n]["id"] == "label1") {
    36.           originalJson["labels"][n]["text"] = "Hello, UNIVERSE!"
    37.         }
    38.       }
    39.     }
    40.   }
    41.  
    42.   /***** Adding Event Listeners *****/
    43.   zingchart.bind(null, 'label_click', function(oChart) {
    44.     if (oChart.graphid == "helloworld0") {
    45.       console.log('You clicked my label!');
    46.     }
    47.   });
    48.  
    49.   return originalJson;
    50. });
    51.  
    52. zingchart.render({
    53.   id: 'myChart',
    54.   height: 400,
    55.   width: 600,
    56.   data: {
    57.     'type': 'hello-world',
    58.     'options': {
    59.       'universe': true
    60.     }
    61.   }
    62. });