Conditionally change Marker based on data in ScatterLine chart

[Tim]

I am trying to customize the Marker of a ScatterLine chart. If the data is of type A then show ChartMarkerShape.Triangle otherwise show ChartMarkerShape.Circle? 

This is my current code 

                        

@(Html.Kendo().Chart(Model.DosageUnitsOfInsulin)
                        .Name("DosageTotal")
                        .Title("Total Series")
                        .Series(series => {

                            series.ScatterLine(model => model.DosageDate, model => model.DosageTotal).Width(4).ColorHandler("getColor");
                        })
                        .SeriesDefaults(seriesDefaults => seriesDefaults
                            .ScatterLine().Markers(markers => markers.Size(20).Type(ChartMarkerShape.Circle)).Color("#47AADF")
                        )

                        .XAxis(x => x
                            .Date()
                            .BaseUnit(ChartAxisBaseUnit.Days)
                            .Title(title => title.Text(""))
                            .Labels(m => m.DateFormats(v => v.Days("M/d/yyyy") ))
                            .Min(new DateTime(2021,2,7))
                            .Max(new DateTime(2021, 9, 28))
                            .MinorGridLines(m => m.Visible(true))
                            .MajorGridLines(m => m.Visible(true))
                        )
                        .YAxis(y => y
                            .Numeric()
                            .Title(title => title.Text("Units of Insulin"))
                            .Min(65)
                            .Max(110)
                            .AxisCrossingValue(-5)

                        )
                        .Theme("sass").Legend(leg => {
                            leg.Position(ChartLegendPosition.Bottom);
                        })
                        .Tooltip(tooltip => tooltip
                            .Format("{0:d}, {1}")
                            .Visible(true)
                        )
                        .Events(events => events.Render("onRender"))
                        .Zoomable()
                        .Pannable()
                    )

 

Is it possible to dynamically change the marker when the chart is rendered? I have subscribed to the Visual event like the Custom Visual example. However, I just want the standard Telerik circle and sometimes triangle visual not a custom image.

 

Thanks,

 

Tim

 

[Anton Mironov]

Hi Tim,

Thank you for the code snippets and details provided.

You are totally correct - the Visual will do the trick, but this should happen while rendering the Telerik UI Chart.

Here is an example:

// In the Chart:
.SeriesDefaults(sd => sd.ScatterLine().Markers(m => m.Visual("test")))

// The Visual function handler:
    function test(e) {
        var origin = e.rect.origin;
        var center = e.rect.center();
        var bottomRight = e.rect.bottomRight();

        if (e.value.x < 30) {
            return e.createVisual();
        } else {
            var path = new kendo.drawing.Path({
                stroke: { color: e.options.border.color, width: 2 },
                fill: { color: "white" }
            })
                .moveTo(origin.x, bottomRight.y)
                .lineTo(bottomRight.x, bottomRight.y)
                .lineTo(center.x, origin.y)
                .close();

            return path;
        }
    }

Attached is a sample project that I prepared for the case. It includes the approach above.

Make the needed tests locally with the project attached and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

[Tim]

This solution is perfect. However, when I hover over the marker it changes back to the default marker. 

Below is what the marker looks like before hovering. The red arrow points to the custom marker.

In the following picture, you can't see the cursor but notice the tooltip (meaning the cursor is over the marker). When you hover over the marker and the tooltip is visible the marker changes to default.

 

Is there a solution to this such as subscribing to the series hover event?

 

Thanks,

 

Tim

[Anton Mironov]

Hi Tim,

Thank you for the additional details provided.

In order to achieve the desired behavior, I would recommend trying the "Highlight" configuration. Here is an example:

// In the Series:
        .Series(series => {
            series.ScatterLine(new int[][] {
                    new [] {10, 10}, new [] {15, 20}, new [] {20, 25},
                    new [] {32, 40}, new [] {43, 50}, new [] {55, 60},
                    new [] {60, 70}, new [] {70, 80}, new [] {90, 100}
                })
                .Name("0.8C").Highlight(highlight => highlight.Toggle("toggleHandler")); 

            series.ScatterLine(new int[][] {
                    new [] {10, 40}, new [] {17, 50}, new [] {18, 70},
                    new [] {35, 90}, new [] {47, 95}, new [] {60, 100}
                })
                .Name("1.6C").Highlight(highlight => highlight.Toggle("toggleHandler")); 

            series.ScatterLine(new int[][] {
                    new [] {10, 70}, new [] {13, 90}, new [] {25, 100}
                })
                .Name("3.1C").Highlight(highlight => highlight.Toggle("toggleHandler")); 
        })

// The function handler:
    function toggleHandler(e) {
        e.preventDefault();
        var visual = e.visual;
        var transform = null;
        if (e.show) {
            transform = kendo.geometry.transform().scale(1.5, 1.5, visual.rect().center());
        }
        visual.transform(transform);
    }

Attached is the reworked sample project that includes the approach above.

Give a try to the approach above and let me know if further assistance is needed.

Best Regards,
Anton Mironov