Conditionally change Marker based on data in ScatterLine chart

1 Answer 16 Views
Chart
Tim
Top achievements
Rank 1
Tim asked on 01 Jun 2022, 07:49 PM

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

 

1 Answer, 1 is accepted

Sort by
1
Anton Mironov
Telerik team
answered on 06 Jun 2022, 10:40 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tim
Top achievements
Rank 1
commented on 14 Jun 2022, 09:31 PM | edited

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
Telerik team
commented on 17 Jun 2022, 02:57 PM

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

Tags
Chart
Asked by
Tim
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Share this question
or