Pop-up chart in tooltip problem

[AP]

I have a bar chart, which uses a tooltip template, to show a pop-up pie chart.

This works, however if the mouse cursor is dragged from outside of the chart, the tooltip pops up an empty window. Only if the mouse is then dragged from within the chart, does the pop-up chart show correctly.

I've attached images showing what happens.

The code is:-

@(Html.Kendo().Chart<WLI_Payments.Models.SummaryChartItem>()
    .Name("SummaryChartMedic")
     //.Title("Paid / Awaiting Payment Requests")
     .Title(ti => ti.Text("Summary by Practitioner - Number of Sessions").Font("11px Arial"))
    .Theme("bootstrap")
    .Legend(l => l.Visible(false))
    .ChartArea(c => c.Background("transparent").Height(250))
    .DataSource(ds => ds.Read(read => read.Action("GetDateRangeMedicSummary", "Dashboard").Data("chartFilterMonthly")))
        .Series(series =>
        {
            series.Column(model => model.YIntValue).Name("Point of Delivery").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial"));
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.XValue)
            .Labels(labels => labels.Rotation(-45).Font("10px Arial"))
            .MajorGridLines(lines => lines.Visible(false))


        )
        .ValueAxis(axis => axis.Numeric()

           .Labels(labels => labels.Font("10px Arial"))



       )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Background("White")
           .Template("#=tooltipTemplate(dataItem)#")
        )
        .Pannable(p => p.Lock(ChartAxisLock.Y))

        .Zoomable(zoomable => zoomable
            .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
            .Selection(selection => selection.Lock(ChartAxisLock.Y))
        )



                            )

The template is:-

    <script id="childChartTemplate" type="text/x-kendo-template">
        <div id="childChart" />
        # setTimeout(function() { createChildChart(AdditionalID,startDate,endDate,XValue,ExtraText); }) #
    </script>

var tooltipTemplate = kendo.template($("#childChartTemplate").html());

The code is:-

function createChildChart(medicID, s, e, PractName, et) {

          var childDataSource = new kendo.data.DataSource({

              transport: {
                  read: {
                      url: "@Url.Content("~/Dashboard/GetDateRangeMedicSessionSummary/Get")",
                      dataType: "json",
                      data: {
                          MedicID: medicID,
                          start: s,
                          end: e,
                          DirectorateID: selectedDirectorate
                      }
                  }
              }
          });
          $("#childChart").kendoChart({
              dataSource: childDataSource,
              title: {
                  text: PractName + '(' + et + ')',
                  font: "11px Arial"

              },
              theme: "bootstrap",
              legend: {
                  visible: true,
                  orientation: "horizontal",
                  position: "bottom"

              },
              seriesDefaults: {
                  type: "pie",
                  labels: {
                      visible: true,
                      format: "{0}"
                  }
              },

              series: [{
                  field: "YIntValue",
                  categoryField: "XValue",
                  name: "Session Type",
                  labels: {
                      visible: true,
                      distance: 15

                  }
              }]
          });
      }

I'm not sure if it always had this bug, or if upgrading to version 2019.2.619  from a much earlier version introduced it.

 

[Georgi]

Hi Andrew,

The issue occurs since the tooltip is display via animation which, thus if the createChildChart is executed before the animation is done, the childChart element is not yet within the DOM.

Could you please test to increase the interval?

e.g.

# setTimeout(function() { createChildChart(); },200) #

Below you will find the sample I used for testing:

• https://dojo.telerik.com/AjEXuVON

I hope this helps.


Regards,
Georgi
Progress Telerik

[AP]

That's worked.  Thanks