• 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/2.6.1/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     var myConfig = {
    16.       type: "scatter",
    17.       backgroundColor: '#F7F7F7',
    18.       title: {
    19.         text: 'Tooltip Text Changes'
    20.       },
    21.       plot: {
    22.         selectionMode: "none", // turn off normal selection   
    23.         marker: {
    24.           borderWidth: 0
    25.         },
    26.         selectedMarker: {
    27.           size: 8,
    28.           borderWidth: 1,
    29.           borderColor: '#000',
    30.         },
    31.         hoverMarker: {
    32.           size: 7
    33.         },
    34.         tooltip: {
    35.           backgroundColor: '#FFF',
    36.           fontColor: '#000',
    37.           fontSize: 14,
    38.           borderRadius: 4,
    39.           borderWidth: 1,
    40.           borderColor: '#000',
    41.           text: '%t: %v',
    42.         }
    43.       },
    44.       plotarea: {
    45.         margin: 'dynamic'
    46.       },
    47.       scaleX: {
    48.         visible: false
    49.       },
    50.       scaleY: {
    51.         minValue: -2,
    52.         maxValue: 2,
    53.         step: 1,
    54.         guide: {
    55.           visible: false
    56.         },
    57.         lineColor: '#90CAF9',
    58.         lineWidth: 2,
    59.         refLine: {
    60.           lineColor: '#90CAF9',
    61.           lineWidth: 2
    62.         },
    63.         item: {
    64.           fontColor: '#90CAF9',
    65.           fontSize: 14
    66.         },
    67.         tick: {
    68.           lineColor: '#90CAF9'
    69.         }
    70.       },
    71.       selectionTool: {
    72.         mask: {
    73.           borderWidth: 2,
    74.           borderColor: "red",
    75.           backgroundColor: "yellow",
    76.           alpha: 0.5
    77.         }
    78.       },
    79.       series: [{
    80.           values: (function() {
    81.             var aV = [];
    82.             var len = 500;
    83.             var x = 0;
    84.             while (len--) {
    85.               x = (Math.random() * 10).toFixed(3) - 0;
    86.               aV.push([
    87.                 x,
    88.                 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    89.               ]);
    90.             }
    91.             return aV;
    92.           })(),
    93.           backgroundColor: '#F48FB1',
    94.           text: 'Sin Wave One',
    95.           marker: {
    96.             size: 5,
    97.             alpha: .85,
    98.             backgroundColor: '#F48FB1'
    99.           }
    100.         },
    101.         {
    102.           values: (function() {
    103.             var aV = [];
    104.             var len = 500;
    105.             var x = 0;
    106.             while (len--) {
    107.               x = (Math.random() * 10).toFixed(3) - 0;
    108.               aV.push([
    109.                 x,
    110.                 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    111.               ]);
    112.             }
    113.             return aV;
    114.           })(),
    115.           backgroundColor: '#F48FB1',
    116.           text: 'Sin Wave Two',
    117.           marker: {
    118.             size: 5,
    119.             alpha: .85,
    120.             backgroundColor: '#CE93D8'
    121.           }
    122.         }
    123.       ]
    124.     };
    125.  
    126.     zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    127.       console.log(e);
    128.       var series1Text = '%t<br>SumValue: ';
    129.       var series2Text = '%t<br>SumValue: ';
    130.  
    131.       // Calculate Sum of selection
    132.       for (var i = 0; i < e.selection.length; i++) {
    133.         var sumValue = e.nodes.reduce(function(a, b, arr, index) {
    134.  
    135.           if (i == 0 && b.plotindex === 0)
    136.             return (a.value ? a.value : a) + b.value;
    137.           else if (i == 1 && b.plotindex === 1)
    138.             return (a.value ? a.value : a) + b.value;
    139.           else
    140.             return (a.value ? a.value : a);
    141.         });
    142.  
    143.         if (i === 0)
    144.           series1Text += sumValue;
    145.         else
    146.           series2Text += sumValue;
    147.       }
    148.  
    149.       // This will merge with the current series data and update
    150.       // the tooltip based on the selected plots
    151.       zingchart.exec(e.id, 'appendseriesdata', {
    152.         data: [{
    153.             tooltip: {
    154.               selectedState: {
    155.                 text: series1Text
    156.               }
    157.             }
    158.           },
    159.           {
    160.             tooltip: {
    161.               selectedState: {
    162.                 text: series2Text
    163.               }
    164.             }
    165.           }
    166.         ]
    167.       })
    168.     });
    169.  
    170.     // Load the selection-tool and render the chart once its loaded
    171.     zingchart.loadModules('selection-tool', function() {
    172.       zingchart.render({
    173.         id: 'myChart',
    174.         data: myConfig,
    175.         height: 400,
    176.         width: '100%',
    177.         modules: 'selection-tool'
    178.       });
    179.     });
    180.   </script>
    181. </body>
    182.  
    183. </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/2.6.1/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: "scatter",
    3.   backgroundColor: '#F7F7F7',
    4.   title: {
    5.     text: 'Tooltip Text Changes'
    6.   },
    7.   plot: {
    8.     selectionMode: "none", // turn off normal selection   
    9.     marker: {
    10.       borderWidth: 0
    11.     },
    12.     selectedMarker: {
    13.       size: 8,
    14.       borderWidth: 1,
    15.       borderColor: '#000',
    16.     },
    17.     hoverMarker: {
    18.       size: 7
    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.     }
    29.   },
    30.   plotarea: {
    31.     margin: 'dynamic'
    32.   },
    33.   scaleX: {
    34.     visible: false
    35.   },
    36.   scaleY: {
    37.     minValue: -2,
    38.     maxValue: 2,
    39.     step: 1,
    40.     guide: {
    41.       visible: false
    42.     },
    43.     lineColor: '#90CAF9',
    44.     lineWidth: 2,
    45.     refLine: {
    46.       lineColor: '#90CAF9',
    47.       lineWidth: 2
    48.     },
    49.     item: {
    50.       fontColor: '#90CAF9',
    51.       fontSize: 14
    52.     },
    53.     tick: {
    54.       lineColor: '#90CAF9'
    55.     }
    56.   },
    57.   selectionTool: {
    58.     mask: {
    59.       borderWidth: 2,
    60.       borderColor: "red",
    61.       backgroundColor: "yellow",
    62.       alpha: 0.5
    63.     }
    64.   },
    65.   series: [{
    66.       values: (function() {
    67.         var aV = [];
    68.         var len = 500;
    69.         var x = 0;
    70.         while (len--) {
    71.           x = (Math.random() * 10).toFixed(3) - 0;
    72.           aV.push([
    73.             x,
    74.             (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    75.           ]);
    76.         }
    77.         return aV;
    78.       })(),
    79.       backgroundColor: '#F48FB1',
    80.       text: 'Sin Wave One',
    81.       marker: {
    82.         size: 5,
    83.         alpha: .85,
    84.         backgroundColor: '#F48FB1'
    85.       }
    86.     },
    87.     {
    88.       values: (function() {
    89.         var aV = [];
    90.         var len = 500;
    91.         var x = 0;
    92.         while (len--) {
    93.           x = (Math.random() * 10).toFixed(3) - 0;
    94.           aV.push([
    95.             x,
    96.             (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    97.           ]);
    98.         }
    99.         return aV;
    100.       })(),
    101.       backgroundColor: '#F48FB1',
    102.       text: 'Sin Wave Two',
    103.       marker: {
    104.         size: 5,
    105.         alpha: .85,
    106.         backgroundColor: '#CE93D8'
    107.       }
    108.     }
    109.   ]
    110. };
    111.  
    112. zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    113.   console.log(e);
    114.   var series1Text = '%t<br>SumValue: ';
    115.   var series2Text = '%t<br>SumValue: ';
    116.  
    117.   // Calculate Sum of selection
    118.   for (var i = 0; i < e.selection.length; i++) {
    119.     var sumValue = e.nodes.reduce(function(a, b, arr, index) {
    120.  
    121.       if (i == 0 && b.plotindex === 0)
    122.         return (a.value ? a.value : a) + b.value;
    123.       else if (i == 1 && b.plotindex === 1)
    124.         return (a.value ? a.value : a) + b.value;
    125.       else
    126.         return (a.value ? a.value : a);
    127.     });
    128.  
    129.     if (i === 0)
    130.       series1Text += sumValue;
    131.     else
    132.       series2Text += sumValue;
    133.   }
    134.  
    135.   // This will merge with the current series data and update
    136.   // the tooltip based on the selected plots
    137.   zingchart.exec(e.id, 'appendseriesdata', {
    138.     data: [{
    139.         tooltip: {
    140.           selectedState: {
    141.             text: series1Text
    142.           }
    143.         }
    144.       },
    145.       {
    146.         tooltip: {
    147.           selectedState: {
    148.             text: series2Text
    149.           }
    150.         }
    151.       }
    152.     ]
    153.   })
    154. });
    155.  
    156. // Load the selection-tool and render the chart once its loaded
    157. zingchart.loadModules('selection-tool', function() {
    158.   zingchart.render({
    159.     id: 'myChart',
    160.     data: myConfig,
    161.     height: 400,
    162.     width: '100%',
    163.     modules: 'selection-tool'
    164.   });
    165. });