syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.46k stars 680 forks source link

when i get data using provider state management chart tooltip not showing me in ScatterSeries chart #1859

Open ankitunada opened 2 weeks ago

ankitunada commented 2 weeks ago

simulator_screenshot_C3F707E6-E42F-404C-82EF-A6F015803034

custom tooltip view code :--

TooltipBehavior toolBarView({String name = "", List? filepath}) { return TooltipBehavior( enable: true, builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int e) { log("${point}"); log("${data.value}"); // name = filepath![pointIndex].fileName!; // return Container(); return GestureDetector( onTap: () { log("message"); String url = filepath![pointIndex].filepath!; String Files2Name = filepath[pointIndex].fileName!;

        // log("$url");

        filepath.isNotEmpty
            ? Navigator.push(
                navigatorKey.currentContext!,
                SlideRightRoute(
                  page: MyPdfViewer(
                    pdfPath: url,
                    File: Files2Name,
                  ),
                ))
            : null;
      },
      child: Container(
        padding: EdgeInsets.all(6),
        decoration: BoxDecoration(
            color: Colors.black, borderRadius: BorderRadius.circular(10)),
        child: Text(
          '${name.isEmpty ? "value" : name}: ${data.value}',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  });

}

this is main code : -

                      SingleChildScrollView(
                        child: Column(
                          children: [
                            Container(
                                height: 300,
                                margin: EdgeInsets.only(
                                    top: Responsive.isSmallScreen(context)
                                        ? width / 25
                                        : width / 60),
                                child: SfCartesianChart(
                                  series: [
                                    ScatterSeries<DataPoint, String>(
                                      dataSource: List.generate(
                                          provider.testData!.xLabels.length,
                                          (index) {
                                        if (index <
                                            provider
                                                .testData!.yVals.length) {
                                          final xLabel = provider
                                              .testData!.xLabels[index];
                                          final yValueString = provider
                                              .testData!.yVals[index].value!
                                              .replaceAll(',', '');

                                          final yValue = double.tryParse(
                                                  yValueString) ??
                                              0.0;

                                          if (provider
                                                  .testData!
                                                  .yVals[index]
                                                  .isVerified ==
                                              true) {
                                            return DataPoint(xLabel, yValue,
                                                value2: true);
                                          } else {
                                            return DataPoint(xLabel, yValue,
                                                value2: false);
                                          }
                                        } else {
                                          // Handle the case where index is out of bounds for yVals
                                          // You can return a default DataPoint or handle it as needed
                                          return DataPoint(
                                              "Invalid Date", 0,
                                              value2: false);
                                        }
                                      }),
                                      xValueMapper: (DataPoint data, _) =>
                                          data.date,
                                      yValueMapper: (DataPoint data, _) =>
                                          data.value,
                                      pointColorMapper:
                                          (DataPoint? data, _) {
                                        return data?.value2 == true
                                            ? const Color(0xFFFFD974)
                                            : const Color(0xFFFF959B);
                                      },
                                      markerSettings: const MarkerSettings(
                                        isVisible: true,
                                        height: 12,
                                        width: 12,
                                        shape: DataMarkerType.circle,
                                        // color: Colors.green,
                                        borderColor: Colors.transparent,
                                      ),
                                    ),
                                  ],
                                  tooltipBehavior: toolBarView(
                                      filepath: provider.testData!.yVals),
                                  primaryXAxis: CategoryAxis(
                                    title: sfl.AxisTitle(
                                        text: 'Yearly',
                                        textStyle: TextStyle(
                                            color: Colors.grey,
                                            fontSize: width / 30,
                                            fontStyle: FontStyle.italic,
                                            fontWeight: FontWeight.w400,
                                            fontFamily: 'Poppins')),
                                  ),
                                  primaryYAxis: NumericAxis(
                                    title: sfl.AxisTitle(
                                        text: 'mg/dl',
                                        textStyle: TextStyle(
                                            color: Colors.grey,
                                            fontSize: width / 30,
                                            fontStyle: FontStyle.italic,
                                            fontWeight: FontWeight.w400,
                                            fontFamily: 'Poppins')),
                                  ),
                                )),
                            provider.getLabAnalyticsDetailsModel!
                                        .responseData!.listOfTestfields ==
                                    null
                                ? buildLoading(context)
                                : ListView.builder(
                                    itemCount: provider
                                        .getLabAnalyticsDetailsModel!
                                        .responseData!
                                        .listOfTestfields!
                                        .length,
                                    shrinkWrap: true,
                                    physics: NeverScrollableScrollPhysics(),
                                    itemBuilder: (context, index) {
                                      String? colour = provider
                                          .getLabAnalyticsDetailsModel!
                                          .responseData!
                                          .listOfTestfields![index]
                                          .colour;

                                      return InkWell(
                                        onTap: () {
                                          String url = provider
                                              .getLabAnalyticsDetailsModel!
                                              .responseData!
                                              .listOfTestfields![index]
                                              .filepath!;
                                          String Files2Name = provider
                                              .getLabAnalyticsDetailsModel!
                                              .responseData!
                                              .listOfTestfields![index]
                                              .fileName!;
                                          Navigator.push(
                                              context,
                                              SlideRightRoute(
                                                page: MyPdfViewer(
                                                  pdfPath: url,
                                                  File: Files2Name,
                                                  isBottomViewOn: true,
                                                  bottomData: provider
                                                      .getLabAnalyticsDetailsModel!
                                                      .responseData!
                                                      .listOfTestfields![index],
                                                ),
                                              ));
                                          // Navigator
                                          //     .push(context, MaterialPageRoute(builder: (_) => LabReportDetail()));
                                        },
                                        child: Padding(
                                          padding:
                                              const EdgeInsets.symmetric(
                                                  horizontal: 15.0),
                                          child: Card(
                                            color: Colors.white,
                                            shadowColor: Colors
                                                .green.shade50
                                                .withOpacity(0.3),
                                            elevation: 9,
                                            shape: RoundedRectangleBorder(
                                                borderRadius:
                                                    BorderRadius.circular(
                                                        10),
                                                side: BorderSide(
                                                    color: Colors
                                                        .grey.shade50)),
                                            borderOnForeground: true,
                                            child: ListTile(
                                              title: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment
                                                        .start,
                                                children: [
                                                  Row(
                                                    children: [
                                                      Text(
                                                        "Latest: ",
                                                        style: TextStyle(
                                                          color:
                                                              Colors.black,
                                                          fontSize: Responsive
                                                                  .isSmallScreen(
                                                                      context)
                                                              ? width / 40
                                                              : width / 30,
                                                          fontFamily:
                                                              'Poppins',
                                                        ),
                                                      ),
                                                      Text(
                                                          "${DateFormat('dd MMM yy').format(provider.getLabAnalyticsDetailsModel!.responseData!.listOfTestfields![index].date ?? DateTime.now())}",
                                                          style: TextStyle(
                                                            color:
                                                                Colors.grey,
                                                            fontSize: Responsive
                                                                    .isSmallScreen(
                                                                        context)
                                                                ? width / 40
                                                                : width /
                                                                    30,
                                                            fontFamily:
                                                                'Poppins',
                                                          )),
                                                    ],
                                                  ),
                                                  Text(
                                                      "${provider.getLabAnalyticsDetailsModel!.responseData!.listOfTestfields![index].testname}",
                                                      style: TextStyle(
                                                          color:
                                                              Colors.black,
                                                          fontSize: Responsive
                                                                  .isSmallScreen(
                                                                      context)
                                                              ? width / 23
                                                              : width / 20,
                                                          fontFamily:
                                                              'Poppins',
                                                          fontWeight:
                                                              FontWeight
                                                                  .w500))
                                                ],
                                              ),
                                              subtitle: Text(
                                                "${provider.getLabAnalyticsDetailsModel!.responseData!.listOfTestfields![index].value} ${provider.getLabAnalyticsDetailsModel!.responseData!.listOfTestfields![index].unit}",
                                                style: TextStyle(
                                                  color: Colors.grey,
                                                  fontSize: Responsive
                                                          .isSmallScreen(
                                                              context)
                                                      ? width / 40
                                                      : width / 30,
                                                  fontFamily: 'Poppins',
                                                ),
                                              ),
                                              trailing: SizedBox(
                                                width:
                                                    100, // Specify the desired width
                                                child: Column(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment
                                                          .end,
                                                  children: [
                                                    ActionChip(
                                                      label: Text(
                                                          "${provider.getLabAnalyticsDetailsModel!.responseData!.listOfTestfields![index].severity}",
                                                          style: TextStyle(
                                                              color: Colors
                                                                  .white,
                                                              fontSize:
                                                                  width /
                                                                      26,
                                                              fontFamily:
                                                                  'Poppins',
                                                              fontWeight:
                                                                  FontWeight
                                                                      .w600)),
                                                      backgroundColor: provider
                                                          .getColorBySeverity(
                                                              colour:
                                                                  colour),
                                                      onPressed: () {},
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      );
                                    })
                          ],
                        ),
                      ),
LokeshPalani commented 2 weeks ago

Hi @ankitunada,

We have validated the code snippet and attached screenshot. We have used your code snippet in our sample, but it is not in a runnable state. We suspect that you are using the interactive widget in the TooltipBehavior. We have prepared a workaround sample by placing the IconButton inside the TooltipBehavior. When you tap on the IconButton, it navigates to the provided link. We hope that the provided solution will resolve your issue. If not, we kindly request you to share more information on your requirement with sample including screen recording. This will help us assist you in a better way. We have shared sample and screen recording for your reference below. Please let us know if you need any further assistance.

Regards, Lokesh P.

chart_590752.zip