Selection-Tool BLOG Tooltip

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/2.6.1/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart'></div>
  <script>
    var myConfig = {
      type: "scatter",
      backgroundColor: '#F7F7F7',
      title: {
        text: 'Tooltip Text Changes'
      },
      plot: {
        selectionMode: "none", // turn off normal selection   
        marker: {
          borderWidth: 0
        },
        selectedMarker: {
          size: 8,
          borderWidth: 1,
          borderColor: '#000',
        },
        hoverMarker: {
          size: 7
        },
        tooltip: {
          backgroundColor: '#FFF',
          fontColor: '#000',
          fontSize: 14,
          borderRadius: 4,
          borderWidth: 1,
          borderColor: '#000',
          text: '%t: %v',
        }
      },
      plotarea: {
        margin: 'dynamic'
      },
      scaleX: {
        visible: false
      },
      scaleY: {
        minValue: -2,
        maxValue: 2,
        step: 1,
        guide: {
          visible: false
        },
        lineColor: '#90CAF9',
        lineWidth: 2,
        refLine: {
          lineColor: '#90CAF9',
          lineWidth: 2
        },
        item: {
          fontColor: '#90CAF9',
          fontSize: 14
        },
        tick: {
          lineColor: '#90CAF9'
        }
      },
      selectionTool: {
        mask: {
          borderWidth: 2,
          borderColor: "red",
          backgroundColor: "yellow",
          alpha: 0.5
        }
      },
      series: [{
          values: (function() {
            var aV = [];
            var len = 500;
            var x = 0;
            while (len--) {
              x = (Math.random() * 10).toFixed(3) - 0;
              aV.push([
                x,
                (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
              ]);
            }
            return aV;
          })(),
          backgroundColor: '#F48FB1',
          text: 'Sin Wave One',
          marker: {
            size: 5,
            alpha: .85,
            backgroundColor: '#F48FB1'
          }
        },
        {
          values: (function() {
            var aV = [];
            var len = 500;
            var x = 0;
            while (len--) {
              x = (Math.random() * 10).toFixed(3) - 0;
              aV.push([
                x,
                (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
              ]);
            }
            return aV;
          })(),
          backgroundColor: '#F48FB1',
          text: 'Sin Wave Two',
          marker: {
            size: 5,
            alpha: .85,
            backgroundColor: '#CE93D8'
          }
        }
      ]
    };

    zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
      console.log(e);
      var series1Text = '%t<br>SumValue: ';
      var series2Text = '%t<br>SumValue: ';

      // Calculate Sum of selection
      for (var i = 0; i < e.selection.length; i++) {
        var sumValue = e.nodes.reduce(function(a, b, arr, index) {

          if (i == 0 && b.plotindex === 0)
            return (a.value ? a.value : a) + b.value;
          else if (i == 1 && b.plotindex === 1)
            return (a.value ? a.value : a) + b.value;
          else
            return (a.value ? a.value : a);
        });

        if (i === 0)
          series1Text += sumValue;
        else
          series2Text += sumValue;
      }

      // This will merge with the current series data and update
      // the tooltip based on the selected plots
      zingchart.exec(e.id, 'appendseriesdata', {
        data: [{
            tooltip: {
              selectedState: {
                text: series1Text
              }
            }
          },
          {
            tooltip: {
              selectedState: {
                text: series2Text
              }
            }
          }
        ]
      })
    });

    // Load the selection-tool and render the chart once its loaded
    zingchart.loadModules('selection-tool', function() {
      zingchart.render({
        id: 'myChart',
        data: myConfig,
        height: 400,
        width: '100%',
        modules: 'selection-tool'
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/2.6.1/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart'></div>
</body>

</html>

var myConfig = {
  type: "scatter",
  backgroundColor: '#F7F7F7',
  title: {
    text: 'Tooltip Text Changes'
  },
  plot: {
    selectionMode: "none", // turn off normal selection   
    marker: {
      borderWidth: 0
    },
    selectedMarker: {
      size: 8,
      borderWidth: 1,
      borderColor: '#000',
    },
    hoverMarker: {
      size: 7
    },
    tooltip: {
      backgroundColor: '#FFF',
      fontColor: '#000',
      fontSize: 14,
      borderRadius: 4,
      borderWidth: 1,
      borderColor: '#000',
      text: '%t: %v',
    }
  },
  plotarea: {
    margin: 'dynamic'
  },
  scaleX: {
    visible: false
  },
  scaleY: {
    minValue: -2,
    maxValue: 2,
    step: 1,
    guide: {
      visible: false
    },
    lineColor: '#90CAF9',
    lineWidth: 2,
    refLine: {
      lineColor: '#90CAF9',
      lineWidth: 2
    },
    item: {
      fontColor: '#90CAF9',
      fontSize: 14
    },
    tick: {
      lineColor: '#90CAF9'
    }
  },
  selectionTool: {
    mask: {
      borderWidth: 2,
      borderColor: "red",
      backgroundColor: "yellow",
      alpha: 0.5
    }
  },
  series: [{
      values: (function() {
        var aV = [];
        var len = 500;
        var x = 0;
        while (len--) {
          x = (Math.random() * 10).toFixed(3) - 0;
          aV.push([
            x,
            (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
          ]);
        }
        return aV;
      })(),
      backgroundColor: '#F48FB1',
      text: 'Sin Wave One',
      marker: {
        size: 5,
        alpha: .85,
        backgroundColor: '#F48FB1'
      }
    },
    {
      values: (function() {
        var aV = [];
        var len = 500;
        var x = 0;
        while (len--) {
          x = (Math.random() * 10).toFixed(3) - 0;
          aV.push([
            x,
            (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
          ]);
        }
        return aV;
      })(),
      backgroundColor: '#F48FB1',
      text: 'Sin Wave Two',
      marker: {
        size: 5,
        alpha: .85,
        backgroundColor: '#CE93D8'
      }
    }
  ]
};

zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
  console.log(e);
  var series1Text = '%t<br>SumValue: ';
  var series2Text = '%t<br>SumValue: ';

  // Calculate Sum of selection
  for (var i = 0; i < e.selection.length; i++) {
    var sumValue = e.nodes.reduce(function(a, b, arr, index) {

      if (i == 0 && b.plotindex === 0)
        return (a.value ? a.value : a) + b.value;
      else if (i == 1 && b.plotindex === 1)
        return (a.value ? a.value : a) + b.value;
      else
        return (a.value ? a.value : a);
    });

    if (i === 0)
      series1Text += sumValue;
    else
      series2Text += sumValue;
  }

  // This will merge with the current series data and update
  // the tooltip based on the selected plots
  zingchart.exec(e.id, 'appendseriesdata', {
    data: [{
        tooltip: {
          selectedState: {
            text: series1Text
          }
        }
      },
      {
        tooltip: {
          selectedState: {
            text: series2Text
          }
        }
      }
    ]
  })
});

// Load the selection-tool and render the chart once its loaded
zingchart.loadModules('selection-tool', function() {
  zingchart.render({
    id: 'myChart',
    data: myConfig,
    height: 400,
    width: '100%',
    modules: 'selection-tool'
  });
});