• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     #table {
    9.       margin-top: 20px;
    10.       padding: 10px;
    11.       background-color: #F7F7F7;
    12.       visibility: hidden;
    13.     }
    14.  
    15.     #table h3 {
    16.       margin: 0px 10px;
    17.       border-bottom: 1px solid black;
    18.     }
    19.  
    20.     .row {
    21.       margin: 5px 0px;
    22.     }
    23.  
    24.     .column {
    25.       background-color: #2196F3;
    26.       border-radius: 4px;
    27.       display: inline-block;
    28.       font-size: 20px;
    29.       color: #FFF;
    30.       padding: 2px 8px;
    31.       margin: 0px 10px;
    32.       width: 30%;
    33.       text-align: center;
    34.     }
    35.   </style>
    36.  
    37.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    38.   <style></style>
    39. </head>
    40.  
    41. <body>
    42.   <div id='myChart'></div>
    43.   <div id="table"></div>
    44.   <script>
    45.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    46.     var myConfig = {
    47.       type: "bubble",
    48.       backgroundColor: '#F7F7F7',
    49.       title: {
    50.         text: 'Points Along A Sin Wave'
    51.       },
    52.       plot: {
    53.         selectionMode: "none", // turn off normal selection
    54.         marker: {
    55.           borderWidth: 0,
    56.           size: 1,
    57.           alpha: .85,
    58.         },
    59.         selectedMarker: {
    60.           size: 3
    61.         },
    62.         hoverMarker: {
    63.           size: 2
    64.         },
    65.         tooltip: {
    66.           backgroundColor: '#FFF',
    67.           fontColor: '#000',
    68.           fontSize: 14,
    69.           borderRadius: 4,
    70.           borderWidth: 1,
    71.           borderColor: '#000',
    72.           text: '%t: %v',
    73.           selectedState: {
    74.             _text: 'hi' // selected nodes can have special text
    75.           }
    76.         }
    77.       },
    78.       plotarea: {
    79.         margin: 'dynamic'
    80.       },
    81.       scaleX: {
    82.         visible: false,
    83.       },
    84.       scaleY: {
    85.         minValue: -2,
    86.         maxValue: 2,
    87.         step: 1,
    88.         guide: {
    89.           visible: false
    90.         },
    91.         lineColor: '#90CAF9',
    92.         lineWidth: 2,
    93.         refLine: {
    94.           lineColor: '#90CAF9',
    95.           lineWidth: 2
    96.         },
    97.         item: {
    98.           fontColor: '#90CAF9',
    99.           fontSize: 14
    100.         },
    101.         tick: {
    102.           lineColor: '#90CAF9'
    103.         }
    104.       },
    105.       // This styling will be pushed during the next build.
    106.       // You can style the mask background, border and line color
    107.       selectionTool: {
    108.         mask: {
    109.           borderWidth: 2,
    110.           borderColor: 'red',
    111.           backgroundColor: 'yellow',
    112.           alpha: .5
    113.         }
    114.       },
    115.       series: [{
    116.           // Lets create some random values that look cool
    117.           values: (function() {
    118.             var aV = [];
    119.             var len = 1000;
    120.             var x = 0;
    121.             while (len--) {
    122.               x = (Math.random() * 10).toFixed(3) - 0;
    123.               aV.push([
    124.                 x,
    125.                 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    126.               ]);
    127.             }
    128.             return aV.sort();
    129.           })(),
    130.           backgroundColor: '#F48FB1',
    131.           text: 'Sin Wave One',
    132.           marker: {
    133.             backgroundColor: '#F48FB1'
    134.           }
    135.         },
    136.         {
    137.           // Lets create some random values that look cool
    138.           values: (function() {
    139.             var aV = [];
    140.             var len = 2000;
    141.             var x = 0;
    142.             while (len--) {
    143.               x = (Math.random() * 10).toFixed(3) - 0;
    144.               aV.push([
    145.                 x,
    146.                 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    147.               ]);
    148.             }
    149.             return aV.sort();
    150.           })(),
    151.           backgroundColor: '#F48FB1',
    152.           text: 'Sin Wave Two',
    153.           marker: {
    154.             backgroundColor: '#CE93D8'
    155.           }
    156.         }
    157.       ]
    158.     };
    159.  
    160.     /* Special callback function for this dragging module.
    161.      * You can use this information to display selected data.
    162.      * You can use this information to update the chart etc...
    163.      */
    164.     zingchart.bind(null, 'zingchart.plugins.selection-tool.selection', function(e) {
    165.       var table = document.getElementById('table');
    166.       var header = document.createElement('h3');
    167.       var Column = function() {
    168.         var column = document.createElement('div');
    169.         column.classList.add('column');
    170.         return column;
    171.       }
    172.  
    173.       var Row = function() {
    174.         var row = document.createElement('div');
    175.         row.classList.add('row');
    176.         return row;
    177.       }
    178.  
    179.       // clear table and set header
    180.       table.innerHTML = '';
    181.       header.innerHTML = 'Selected State Logistics';
    182.       table.appendChild(header);
    183.  
    184.       // define variables for creating grid
    185.       var totalMinValue = 10000;
    186.       var totalMaxValue = 0;
    187.       var sumValues = 0;
    188.       var row;
    189.       var column1;
    190.       var column2;
    191.       var column3;
    192.  
    193.       // loop through plots and grab information
    194.       for (var key in e.nodes) {
    195.  
    196.         // Get global min and max values from plots
    197.         if (e.nodes[key].value < totalMinValue)
    198.           totalMinValue = e.nodes[key].value;
    199.  
    200.         if (e.nodes[key].value > totalMaxValue)
    201.           totalMaxValue = e.nodes[key].value;
    202.  
    203.         sumValues += e.nodes[key].value;
    204.       }
    205.  
    206.       // append a new total value row
    207.       row = Row();
    208.       column1 = Column();
    209.       column2 = Column();
    210.       column3 = Column();
    211.       column1.innerHTML = 'SumValues: ' + sumValues.toFixed(3);
    212.       column2.innerHTML = 'MinValue: ' + totalMinValue.toFixed(3);
    213.       column3.innerHTML = 'MaxValue: ' + totalMaxValue.toFixed(3);
    214.       row.appendChild(column1);
    215.       row.appendChild(column2);
    216.       row.appendChild(column3);
    217.       table.appendChild(row);
    218.  
    219.       // render the table visible
    220.       table.style.visibility = 'visible';
    221.     });
    222.  
    223.  
    224.     /* Lets create a place to store our function. Typically it is not recomended
    225.      * to modify the zingchart object. This is for advanced users. It is good
    226.      * practice to keep all your charting stuff together, in this case your 
    227.      * custom functions within the zingchart object! This will also help with
    228.      * name collisions within the window object.
    229.      *
    230.      * BE WARNED: you can overwrite stuff in the zingchart object if you are
    231.      * not careful. This will mess stuff up.
    232.      */
    233.     zingchart.insert_company_name_customFncs = {};
    234.     zingchart.insert_company_name_customFncs.clearSelection = function(e) {
    235.       zingchart.exec(e.id, 'clearselection');
    236.     }
    237.  
    238.     // Load the selection-tool and render the chart once the module is loaded
    239.     zingchart.loadModules('selection-tool', function() {
    240.       zingchart.render({
    241.         id: 'myChart',
    242.         // defined data this way since context menu needs to be defined in root (above graphset)
    243.         data: {
    244.           gui: {
    245.             contextMenu: {
    246.               customItems: [{
    247.                 text: 'Clear Selection',
    248.                 function: 'zingchart.insert_company_name_customFncs.clearSelection()',
    249.                 id: 'clearSelection'
    250.               }]
    251.             }
    252.           },
    253.           graphset: [myConfig]
    254.         },
    255.         height: 400,
    256.         width: '100%',
    257.         modules: 'selection-tool'
    258.       });
    259.     });
    260.   </script>
    261. </body>
    262.  
    263. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <style>
    8.     #table {
    9.       margin-top: 20px;
    10.       padding: 10px;
    11.       background-color: #F7F7F7;
    12.       visibility: hidden;
    13.     }
    14.  
    15.     #table h3 {
    16.       margin: 0px 10px;
    17.       border-bottom: 1px solid black;
    18.     }
    19.  
    20.     .row {
    21.       margin: 5px 0px;
    22.     }
    23.  
    24.     .column {
    25.       background-color: #2196F3;
    26.       border-radius: 4px;
    27.       display: inline-block;
    28.       font-size: 20px;
    29.       color: #FFF;
    30.       padding: 2px 8px;
    31.       margin: 0px 10px;
    32.       width: 30%;
    33.       text-align: center;
    34.     }
    35.   </style>
    36.  
    37.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    38. </head>
    39.  
    40. <body>
    41.   <div id='myChart'></div>
    42.   <div id="table"></div>
    43. </body>
    44.  
    45. </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.       borderWidth: 0,
    11.       size: 1,
    12.       alpha: .85,
    13.     },
    14.     selectedMarker: {
    15.       size: 3
    16.     },
    17.     hoverMarker: {
    18.       size: 2
    19.     },
    20.     tooltip: {
    21.       backgroundColor: '#FFF',
    22.       fontColor: '#000',
    23.       fontSize: 14,
    24.       borderRadius: 4,
    25.       borderWidth: 1,
    26.       borderColor: '#000',
    27.       text: '%t: %v',
    28.       selectedState: {
    29.         _text: 'hi' // selected nodes can have special text
    30.       }
    31.     }
    32.   },
    33.   plotarea: {
    34.     margin: 'dynamic'
    35.   },
    36.   scaleX: {
    37.     visible: false,
    38.   },
    39.   scaleY: {
    40.     minValue: -2,
    41.     maxValue: 2,
    42.     step: 1,
    43.     guide: {
    44.       visible: false
    45.     },
    46.     lineColor: '#90CAF9',
    47.     lineWidth: 2,
    48.     refLine: {
    49.       lineColor: '#90CAF9',
    50.       lineWidth: 2
    51.     },
    52.     item: {
    53.       fontColor: '#90CAF9',
    54.       fontSize: 14
    55.     },
    56.     tick: {
    57.       lineColor: '#90CAF9'
    58.     }
    59.   },
    60.   // This styling will be pushed during the next build.
    61.   // You can style the mask background, border and line color
    62.   selectionTool: {
    63.     mask: {
    64.       borderWidth: 2,
    65.       borderColor: 'red',
    66.       backgroundColor: 'yellow',
    67.       alpha: .5
    68.     }
    69.   },
    70.   series: [{
    71.       // Lets create some random values that look cool
    72.       values: (function() {
    73.         var aV = [];
    74.         var len = 1000;
    75.         var x = 0;
    76.         while (len--) {
    77.           x = (Math.random() * 10).toFixed(3) - 0;
    78.           aV.push([
    79.             x,
    80.             (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    81.           ]);
    82.         }
    83.         return aV.sort();
    84.       })(),
    85.       backgroundColor: '#F48FB1',
    86.       text: 'Sin Wave One',
    87.       marker: {
    88.         backgroundColor: '#F48FB1'
    89.       }
    90.     },
    91.     {
    92.       // Lets create some random values that look cool
    93.       values: (function() {
    94.         var aV = [];
    95.         var len = 2000;
    96.         var x = 0;
    97.         while (len--) {
    98.           x = (Math.random() * 10).toFixed(3) - 0;
    99.           aV.push([
    100.             x,
    101.             (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    102.           ]);
    103.         }
    104.         return aV.sort();
    105.       })(),
    106.       backgroundColor: '#F48FB1',
    107.       text: 'Sin Wave Two',
    108.       marker: {
    109.         backgroundColor: '#CE93D8'
    110.       }
    111.     }
    112.   ]
    113. };
    114.  
    115. /* Special callback function for this dragging module.
    116.  * You can use this information to display selected data.
    117.  * You can use this information to update the chart etc...
    118.  */
    119. zingchart.bind(null, 'zingchart.plugins.selection-tool.selection', function(e) {
    120.   var table = document.getElementById('table');
    121.   var header = document.createElement('h3');
    122.   var Column = function() {
    123.     var column = document.createElement('div');
    124.     column.classList.add('column');
    125.     return column;
    126.   }
    127.  
    128.   var Row = function() {
    129.     var row = document.createElement('div');
    130.     row.classList.add('row');
    131.     return row;
    132.   }
    133.  
    134.   // clear table and set header
    135.   table.innerHTML = '';
    136.   header.innerHTML = 'Selected State Logistics';
    137.   table.appendChild(header);
    138.  
    139.   // define variables for creating grid
    140.   var totalMinValue = 10000;
    141.   var totalMaxValue = 0;
    142.   var sumValues = 0;
    143.   var row;
    144.   var column1;
    145.   var column2;
    146.   var column3;
    147.  
    148.   // loop through plots and grab information
    149.   for (var key in e.nodes) {
    150.  
    151.     // Get global min and max values from plots
    152.     if (e.nodes[key].value < totalMinValue)
    153.       totalMinValue = e.nodes[key].value;
    154.  
    155.     if (e.nodes[key].value > totalMaxValue)
    156.       totalMaxValue = e.nodes[key].value;
    157.  
    158.     sumValues += e.nodes[key].value;
    159.   }
    160.  
    161.   // append a new total value row
    162.   row = Row();
    163.   column1 = Column();
    164.   column2 = Column();
    165.   column3 = Column();
    166.   column1.innerHTML = 'SumValues: ' + sumValues.toFixed(3);
    167.   column2.innerHTML = 'MinValue: ' + totalMinValue.toFixed(3);
    168.   column3.innerHTML = 'MaxValue: ' + totalMaxValue.toFixed(3);
    169.   row.appendChild(column1);
    170.   row.appendChild(column2);
    171.   row.appendChild(column3);
    172.   table.appendChild(row);
    173.  
    174.   // render the table visible
    175.   table.style.visibility = 'visible';
    176. });
    177.  
    178.  
    179. /* Lets create a place to store our function. Typically it is not recomended
    180.  * to modify the zingchart object. This is for advanced users. It is good
    181.  * practice to keep all your charting stuff together, in this case your 
    182.  * custom functions within the zingchart object! This will also help with
    183.  * name collisions within the window object.
    184.  *
    185.  * BE WARNED: you can overwrite stuff in the zingchart object if you are
    186.  * not careful. This will mess stuff up.
    187.  */
    188. zingchart.insert_company_name_customFncs = {};
    189. zingchart.insert_company_name_customFncs.clearSelection = function(e) {
    190.   zingchart.exec(e.id, 'clearselection');
    191. }
    192.  
    193. // Load the selection-tool and render the chart once the module is loaded
    194. zingchart.loadModules('selection-tool', function() {
    195.   zingchart.render({
    196.     id: 'myChart',
    197.     // defined data this way since context menu needs to be defined in root (above graphset)
    198.     data: {
    199.       gui: {
    200.         contextMenu: {
    201.           customItems: [{
    202.             text: 'Clear Selection',
    203.             function: 'zingchart.insert_company_name_customFncs.clearSelection()',
    204.             id: 'clearSelection'
    205.           }]
    206.         }
    207.       },
    208.       graphset: [myConfig]
    209.     },
    210.     height: 400,
    211.     width: '100%',
    212.     modules: 'selection-tool'
    213.   });
    214. });