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