• 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.     var myConfig = {
    17.       type: "bubble",
    18.       backgroundColor: '#F7F7F7',
    19.       title: {
    20.         text: 'Points Along A Sin Wave'
    21.       },
    22.       plot: {
    23.         selectionMode: "none", // turn off normal selection
    24.         marker: {
    25.           size: 5,
    26.           borderWidth: 0,
    27.           alpha: .85,
    28.         },
    29.         selectedMarker: {
    30.           size: 8,
    31.           borderWidth: 1,
    32.           borderColor: '#000',
    33.         },
    34.         hoverMarker: {
    35.           size: 7
    36.         },
    37.         tooltip: {
    38.           backgroundColor: '#FFF',
    39.           fontColor: '#000',
    40.           fontSize: 14,
    41.           borderRadius: 4,
    42.           borderWidth: 1,
    43.           borderColor: '#000',
    44.           text: '%t: %v'
    45.         }
    46.       },
    47.       plotarea: {
    48.         margin: 'dynamic'
    49.       },
    50.       scaleX: {
    51.         visible: false,
    52.       },
    53.       scaleY: {
    54.         minValue: -2,
    55.         maxValue: 2,
    56.         step: 1,
    57.         guide: {
    58.           visible: false
    59.         },
    60.         lineColor: '#90CAF9',
    61.         lineWidth: 2,
    62.         refLine: {
    63.           lineColor: '#90CAF9',
    64.           lineWidth: 2
    65.         },
    66.         item: {
    67.           fontColor: '#90CAF9',
    68.           fontSize: 14
    69.         },
    70.         tick: {
    71.           lineColor: '#90CAF9'
    72.         }
    73.       },
    74.       // This styling will be pushed during the next build.
    75.       // You can style the mask background, border and line color
    76.       selectionTool: {
    77.         mask: {
    78.           borderWidth: 2,
    79.           borderColor: 'red',
    80.           backgroundColor: 'yellow',
    81.           alpha: .5
    82.         }
    83.       },
    84.       series: [{
    85.           // Lets create some random values that look cool
    86.           values: (function() {
    87.             var aV = [];
    88.             var len = 500;
    89.             var x = 0;
    90.             while (len--) {
    91.               x = (Math.random() * 10).toFixed(3) - 0;
    92.               aV.push([
    93.                 x,
    94.                 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    95.               ]);
    96.             }
    97.             return aV.sort();
    98.           })(),
    99.           backgroundColor: '#F48FB1',
    100.           text: 'Sin Wave One',
    101.           marker: {
    102.             backgroundColor: '#F48FB1'
    103.           }
    104.         },
    105.         {
    106.           // Lets create some random values that look cool
    107.           values: (function() {
    108.             var aV = [];
    109.             var len = 600;
    110.             var x = 0;
    111.             while (len--) {
    112.               x = (Math.random() * 10).toFixed(3) - 0;
    113.               aV.push([
    114.                 x,
    115.                 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    116.               ]);
    117.             }
    118.             return aV.sort();
    119.           })(),
    120.           backgroundColor: '#F48FB1',
    121.           text: 'Sin Wave Two',
    122.           marker: {
    123.             backgroundColor: '#CE93D8'
    124.           }
    125.         }
    126.       ]
    127.     };
    128.  
    129.     /* Lets create a place to store our function. Typically it is not recomended
    130.      * to modify the zingchart object. This is for advanced users. It is good
    131.      * practice to keep all your charting stuff together, in this case your 
    132.      * custom functions within the zingchart object! This will also help with
    133.      * name collisions within the window object.
    134.      *
    135.      * BE WARNED: you can overwrite stuff in the zingchart object if you are
    136.      * not careful. This will mess stuff up.
    137.      */
    138.     zingchart.insert_company_name_customFncs = {};
    139.     zingchart.insert_company_name_customFncs.clearSelection = function(e) {
    140.       zingchart.exec(e.id, 'clearselection');
    141.     }
    142.  
    143.     // Load the selection-tool and render the chart once the module is loaded
    144.     zingchart.loadModules('selection-tool', function() {
    145.       zingchart.render({
    146.         id: 'myChart',
    147.         // defined data this way since context menu needs to be defined in root (above graphset)
    148.         data: {
    149.           gui: {
    150.             contextMenu: {
    151.               customItems: [{
    152.                 text: 'Clear Selection',
    153.                 function: 'zingchart.insert_company_name_customFncs.clearSelection()',
    154.                 id: 'clearSelection'
    155.               }]
    156.             }
    157.           },
    158.           graphset: [myConfig]
    159.         },
    160.         height: 400,
    161.         width: '100%',
    162.         modules: 'selection-tool'
    163.       });
    164.     });
    165.   </script>
    166. </body>
    167.  
    168. </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. var myConfig = {
    2.   type: "bubble",
    3.   backgroundColor: '#F7F7F7',
    4.   title: {
    5.     text: 'Points Along A Sin Wave'
    6.   },
    7.   plot: {
    8.     selectionMode: "none", // turn off normal selection
    9.     marker: {
    10.       size: 5,
    11.       borderWidth: 0,
    12.       alpha: .85,
    13.     },
    14.     selectedMarker: {
    15.       size: 8,
    16.       borderWidth: 1,
    17.       borderColor: '#000',
    18.     },
    19.     hoverMarker: {
    20.       size: 7
    21.     },
    22.     tooltip: {
    23.       backgroundColor: '#FFF',
    24.       fontColor: '#000',
    25.       fontSize: 14,
    26.       borderRadius: 4,
    27.       borderWidth: 1,
    28.       borderColor: '#000',
    29.       text: '%t: %v'
    30.     }
    31.   },
    32.   plotarea: {
    33.     margin: 'dynamic'
    34.   },
    35.   scaleX: {
    36.     visible: false,
    37.   },
    38.   scaleY: {
    39.     minValue: -2,
    40.     maxValue: 2,
    41.     step: 1,
    42.     guide: {
    43.       visible: false
    44.     },
    45.     lineColor: '#90CAF9',
    46.     lineWidth: 2,
    47.     refLine: {
    48.       lineColor: '#90CAF9',
    49.       lineWidth: 2
    50.     },
    51.     item: {
    52.       fontColor: '#90CAF9',
    53.       fontSize: 14
    54.     },
    55.     tick: {
    56.       lineColor: '#90CAF9'
    57.     }
    58.   },
    59.   // This styling will be pushed during the next build.
    60.   // You can style the mask background, border and line color
    61.   selectionTool: {
    62.     mask: {
    63.       borderWidth: 2,
    64.       borderColor: 'red',
    65.       backgroundColor: 'yellow',
    66.       alpha: .5
    67.     }
    68.   },
    69.   series: [{
    70.       // Lets create some random values that look cool
    71.       values: (function() {
    72.         var aV = [];
    73.         var len = 500;
    74.         var x = 0;
    75.         while (len--) {
    76.           x = (Math.random() * 10).toFixed(3) - 0;
    77.           aV.push([
    78.             x,
    79.             (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    80.           ]);
    81.         }
    82.         return aV.sort();
    83.       })(),
    84.       backgroundColor: '#F48FB1',
    85.       text: 'Sin Wave One',
    86.       marker: {
    87.         backgroundColor: '#F48FB1'
    88.       }
    89.     },
    90.     {
    91.       // Lets create some random values that look cool
    92.       values: (function() {
    93.         var aV = [];
    94.         var len = 600;
    95.         var x = 0;
    96.         while (len--) {
    97.           x = (Math.random() * 10).toFixed(3) - 0;
    98.           aV.push([
    99.             x,
    100.             (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    101.           ]);
    102.         }
    103.         return aV.sort();
    104.       })(),
    105.       backgroundColor: '#F48FB1',
    106.       text: 'Sin Wave Two',
    107.       marker: {
    108.         backgroundColor: '#CE93D8'
    109.       }
    110.     }
    111.   ]
    112. };
    113.  
    114. /* Lets create a place to store our function. Typically it is not recomended
    115.  * to modify the zingchart object. This is for advanced users. It is good
    116.  * practice to keep all your charting stuff together, in this case your 
    117.  * custom functions within the zingchart object! This will also help with
    118.  * name collisions within the window object.
    119.  *
    120.  * BE WARNED: you can overwrite stuff in the zingchart object if you are
    121.  * not careful. This will mess stuff up.
    122.  */
    123. zingchart.insert_company_name_customFncs = {};
    124. zingchart.insert_company_name_customFncs.clearSelection = function(e) {
    125.   zingchart.exec(e.id, 'clearselection');
    126. }
    127.  
    128. // Load the selection-tool and render the chart once the module is loaded
    129. zingchart.loadModules('selection-tool', function() {
    130.   zingchart.render({
    131.     id: 'myChart',
    132.     // defined data this way since context menu needs to be defined in root (above graphset)
    133.     data: {
    134.       gui: {
    135.         contextMenu: {
    136.           customItems: [{
    137.             text: 'Clear Selection',
    138.             function: 'zingchart.insert_company_name_customFncs.clearSelection()',
    139.             id: 'clearSelection'
    140.           }]
    141.         }
    142.       },
    143.       graphset: [myConfig]
    144.     },
    145.     height: 400,
    146.     width: '100%',
    147.     modules: 'selection-tool'
    148.   });
    149. });