Problems to add a callback on data point tap

[handgull]

I'm trying to add the execution of an external dart callback to the chart when I tap on a specific point in this scatter chart. The viewer doesn’t have an argument like onEvent, and I don’t see anything in the controller apart from the update method. If I click on a point, I can see that it’s still counted as selected by Apache ECharts, with the color and dot size changing very slightly. I also need to set an active point from outside the chart and not only if i tap on the dots! The code is this:

Map<String, dynamic> _generateChartOptions(BuildContext context) {
    final theme = Theme.of(context);
    const yStep = 5.0;
    const xStep = 0.5;

    final xValues =
        widget.points?.map((e) => e.axisX.toPrecision(1)).toList() ?? [];
    final yValues =
        widget.points?.map((e) => e.axisY.toPrecision(1)).toList() ?? [];
    final greaterX =
        xValues.isNotEmpty ? xValues.reduce((a, b) => a > b ? a : b) : 0.0;
    final greaterY =
        yValues.isNotEmpty ? yValues.reduce((a, b) => a > b ? a : b) : 0.0;

    const minX = 0.0;
    const minY = 0.0;
    final maxX = max(lastWidth, greaterX);
    final maxY =
        (yValues.isEmpty ? yStep : ((greaterY / yStep).ceil()) * yStep);

    final seriesData = _generateSeriesData(context, theme);

    final xAxis = {
      'type': 'value',
      'min': minX,
      'max': maxX,
      'interval': xStep,
      'inverse': widget.reverse,
      'axisLabel': {
        'color': '#000',
        'formatter': '{value} m',
      },
      'splitLine': {
        'show': true,
        'lineStyle': {
          'type': [5, 10],
          'width': 0.5,
        },
      },
      'axisTick': {'show': false},
    };

    final yAxis = {
      'type': 'value',
      'min': minY,
      'max': maxY,
      'interval': yStep,
      'inverse': widget.reverse,
      'axisLabel': {
        'color': '#000',
        'formatter': '{value} m',
      },
      'splitLine': {
        'show': true,
        'lineStyle': {
          'type': [5, 5],
          'width': 0.5,
        },
      },
    };

    return {
      'backgroundColor': 'transparent',
      'grid': {
        'left': '3%',
        'right': '3%',
        'bottom': '3%',
        'top': '3%',
        'containLabel': true,
      },
      'xAxis': xAxis,
      'yAxis': yAxis,
      'series': [
        {
          'type': 'scatter',
          'data': seriesData,
          'cursor': 'pointer',
        },
      ],
    };
  }

  List<Map<String, dynamic>> _generateSeriesData(
    BuildContext context,
    ThemeData theme,
  ) {
    final isTabletDevice = isTablet(context);
    final strokeWidth = isTabletDevice ? 3.5 : 2.0;

    return widget.points
            ?.map((point) {
              final colorStr = point.category?.color;
              final color = hexToColor(
                colorStr ?? theme.colorScheme.secondary.hex,
              );
              final isActive = widget.activePoint == point;

              final unactiveColor =
                  Color.lerp(color, Colors.white, 0.5) ?? Colors.transparent;
              final strokeColor = theme.primaryColor;

              final radius = _findRadius(
                isTabletDevice,
                heightCm: point.height,
                widthCm: point.width,
              );
              final symbolSize = radius * 2;

              return {
                'value': [point.axisX, point.axisY],
                'itemStyle': {
                  'color': '#${isActive ? color.hex : unactiveColor.hex}',
                  'borderColor': strokeColor.hex,
                  'borderWidth': isActive ? strokeWidth : 1,
                },
                'symbolSize': symbolSize,
                'pèointId': point.image,
              };
            })
            .toList(growable: false) ??
        [];
  }

  @override
  Widget build(BuildContext context) {
    final currentOptions = _generateChartOptions(context);

    return GraphifyView(
      controller: controller,
      initialOptions: currentOptions,
      onConsoleMessage: (msg) {
        dev.log('[OverviewChart] $msg');
      },
    );
  }

[handgull]

@warioddly I've seen the tags, maybe I can help if you give me some context from the codebase! The functionality that communicates with the apache api already exists?

[warioddly]

@handgull Hi, glad to see you))

If you look at the code, you can see that the diagrams are displayed and worked with via a webview, and an <iframe> is used for the web

Controllers are also used for their interaction. To listen for changes, clicks, etc., I wanted to make callback parameters

If you have any questions, I'll help you, don't hesitate to ask.

[ankitsingh0913]

@warioddly I've read the issue and looking at your code i think you are using ECharts via WebView wrapper. The Standard approach for tap callbacks and external point activation requires:

JavaScript -> Dart Communication for tap Events
Dart -> JavaScript communication for setting active points externally

here is the solution:
Capture tap event
Set Active point Externally
Write all together in your widget

if you are still working in the issue let me know if you can assign it me, thanks